LogoCraftReactNative

Theming

Customize components and templates with a centralized, accessible theming system that supports light/dark modes and follows WCAG guidelines.

The theming system provides a comprehensive, centralized approach to styling your React Native app. The theme configuration is pre-defined in the craftrn-ui/themes folder, containing colors, spacing, and typography definitions that are integrated with Unistyles for seamless access across your entire application.

All components and templates are built on this unified theme configuration, ensuring consistency while simplifying maintenance. The system supports dynamic theme switching (such as light/dark mode) and is designed with accessibility in mind. Color contrasts meet WCAG guidelines, and all visual elements remain usable across different themes and user preferences, making your app accessible to everyone regardless of their visual abilities or device settings.

Color Palette

Neutral

stone50
stone100
stone200
stone300
stone400
stone500
stone600
stone700
stone800
stone900
stone950

Brand

teal150
teal300
teal600
teal700
teal800

Semantic

green500
green700
green800
red500
red700
red800
blue700

Non-semantic

grape600
eggplant600
fjord600
olive600
sunshine200

Light and dark themes

Background

backgroundPrimary
stone100
#f5f5f4
stone900
#1c1917
backgroundSecondary
stone200
#e7e5e4
stone950
#0c0a09
backgroundTertiary
stone300
#d6d3d1
stone800
#292524
backgroundQuaternary
stone500
#78716c
stone600
#57534e

Accent

accentPrimary
teal700
#006771
teal700
#006771
accentSecondary
teal800
#004247
teal600
#007884
accentTertiary
teal300
#0bb6cb
teal800
#004247
accentQuaternary
teal150
#d5f2f5
teal800
#004247

Content

contentPrimary
stone900
#1c1917
stone50
#fafaf9
contentSecondary
stone700
#44403c
stone300
#d6d3d1
contentTertiary
stone600
#57534e
stone400
#beb9b6
contentAccent
teal700
#006771
teal300
#0bb6cb
contentError
red700
#b91c1c
red700
#b91c1c

Border & Shadow

borderPrimary
stone300
#d6d3d1
stone800
#292524
shadowPrimary
stone800
#292524
stone600
#57534e
overlay
stone600
#57534e
stone600
#57534e

Semantic

informativeStrong
blue700
#1d4ed8
blue700
#1d4ed8
positivePrimary
green700
#15803d
green700
#15803d
positiveSecondary
green800
#166534
green800
#166534
negativePrimary
red700
#b91c1c
red700
#b91c1c
negativeSecondary
red800
#991b1b
red800
#991b1b

Non-semantic

white
stone50
#fafaf9
stone50
#fafaf9
black
stone950
#0c0a09
stone950
#0c0a09
berryStrong
grape600
#544171
grape600
#544171
wineStrong
eggplant600
#714148
eggplant600
#714148
imperialBlueStrong
fjord600
#415171
fjord600
#415171
darkOliveStrong
olive600
#456138
olive600
#456138
sunshineStrong
sunshine200
#f5be0a
sunshine200
#f5be0a

Border radius

xsmall4px
small8px
medium12px
large16px
xlarge24px
full999px

Spacings

xxsmall2px
xsmall4px
small8px
medium12px
large16px
xlarge24px
xxlarge32px

Text variants

heading132px / 32px / 900
The quick brown fox jumps over the lazy dog
heading224px / 30px / 800
The quick brown fox jumps over the lazy dog
heading318px / 25px / 700
The quick brown fox jumps over the lazy dog
body116px / 21px / 400
The quick brown fox jumps over the lazy dog
body214px / 19px / 400
The quick brown fox jumps over the lazy dog
body312px / 16px / 400
The quick brown fox jumps over the lazy dog

On this page