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
stone150
stone200
stone300
stone400
stone500
stone600
stone700
stone800
stone900
stone950

Brand

teal150
teal300
teal400
teal500
teal600
teal700
teal800
teal900

Semantic

green150
green300
green500
green700
green800
red150
red300
red500
red700
red800
blue300
blue700

Non-semantic

grape600
eggplant600
fjord600
olive600
sunshine200

Light and dark themes

Background

backgroundPrimary
stone100
#f5f5f4
stone900
#1c1917
backgroundSecondary
stone200
#e7e5e4
stone950
#110e0c
backgroundTertiary
stone300
#d6d3d1
stone800
#292524
backgroundQuaternary
stone400
#beb9b6
stone600
#57534e

Surfaces

surfacePrimary
stone100
#f5f5f4
stone800
#292524
surfaceSecondary
stone200
#e7e5e4
stone700
#44403c
surfaceTertiary
stone300
#d6d3d1
stone600
#57534e
surfaceQuaternary
stone500
#837b75
stone500
#837b75

Accent

accentPrimary
teal700
#006771
teal600
#007884
accentSecondary
teal800
#004247
teal700
#006771
accentTertiary
teal300
#a3d6da
teal800
#004247
accentQuaternary
teal150
#d4edf0
teal900
#00282c

Content

contentPrimary
stone950
#110e0c
stone50
#fafaf9
contentSecondary
stone800
#292524
stone300
#d6d3d1
contentTertiary
stone600
#57534e
stone400
#beb9b6
contentQuaternary
stone500
#837b75
stone500
#837b75
contentReversed
stone50
#fafaf9
stone900
#1c1917
contentAccent
teal700
#006771
teal400
#6bbbc4

Border & Shadow

borderPrimary
stone300
#d6d3d1
stone700
#44403c
borderSecondary
stone200
#e7e5e4
stone900
#1c1917
shadowPrimary
stone800
#292524
stone600
#57534e
overlay
stone600
#57534e
stone600
#57534e

Semantic

positivePrimary
green800
#166534
green300
#86efac
positiveSecondary
green700
#15803d
green150
#d2f2dd
positiveTertiary
green300
#86efac
green700
#15803d
positiveQuaternary
green150
#d2f2dd
green800
#166534
negativePrimary
red800
#7a2828
red300
#d19a9a
negativeSecondary
red700
#9b3535
red150
#f0dada
negativeTertiary
red300
#d19a9a
red700
#9b3535
negativeQuaternary
red150
#f0dada
red800
#7a2828
informativePrimary
blue700
#1d4ed8
blue300
#6aa7f1

Non-semantic

white
stone50
#fafaf9
stone50
#fafaf9
black
stone950
#110e0c
stone950
#110e0c
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
body313px / 16px / 400
The quick brown fox jumps over the lazy dog

On this page