CraftReactNativeTheming
Learn how to customise the components and templates to your own brand.
The theme is a configuration object that is pre-defined in the craftrn-ui/themes folder. This folder contains the colors, spacing and typography definitions. The theme is integrated with Unistyles and can be accessed across your app.
All components and templates are built on the theme configuration, providing a consistent, centralized styling system for your React Native app. This approach simplifies maintenance and enables switching between styles (e.g., light/dark mode).
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
stone400
#beb9b6
stone700
#44403c
Accent
accentPrimary
teal700
#006771
teal700
#006771
accentSecondary
teal800
#004247
teal600
#007884
accentTertiary
teal300
#0bb6cb
teal800
#004247
accentQuaternary
teal150
#d6e6f6
teal150
#d6e6f6
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