Skip to main content
Storybook for React Native provides a comprehensive theming system built on Emotion. You can customize colors, typography, spacing, and more.

​
Built-in Themes

Two themes are provided out of the box: 
import { theme, darkTheme } from '@storybook/react-native';

​
Light Theme (theme)

The default light theme with a clean, bright appearance.

​
Dark Theme (darkTheme)

A dark theme optimized for low-light environments.

​
Applying Custom Themes

Pass theme customizations to getStorybookUI(): 
import { darkTheme } from '@storybook/react-native';

const StorybookUIRoot = view.getStorybookUI({
  theme: {
    ...darkTheme,
    color: {
      ...darkTheme.color,
      primary: '#FF6B6B',
    },
  },
  storage: { /* ... */ },
});

​
Theme Interface

​
Base Properties

​
base
'light' | 'dark'
required
The base theme mode.

​
Colors

​
color
object
Color palette configuration
​
primary
string
default:"#FF4785"
Primary brand color (coral)
​
secondary
string
default:"#029CFD"
Secondary brand color (ocean blue)
​
secondaryLighter
string
default:"rgba(2, 157, 253, 0.9)"
Lighter variant of secondary color
​
tertiary
string
default:"#FAFBFC"
Tertiary color
​
ancillary
string
default:"#22a699"
Ancillary accent color
​
orange
string
default:"#FC521F"
Complementary orange
​
gold
string
default:"#FFAE00"
Complementary gold
​
green
string
default:"#66BF3C"
Complementary green
​
seafoam
string
default:"#37D5D3"
Complementary seafoam
​
purple
string
default:"#6F2CAC"
Complementary purple
​
ultraviolet
string
default:"#2A0481"
Complementary ultraviolet
​
lightest
string
default:"#FFFFFF"
Lightest monochrome shade
​
lighter
string
default:"#F7FAFC"
Lighter monochrome shade
​
light
string
default:"#EEF3F6"
Light monochrome shade
​
mediumlight
string
default:"#ECF4F9"
Medium-light monochrome shade
​
medium
string
default:"#D9E8F2"
Medium monochrome shade
​
mediumdark
string
default:"#73828C"
Medium-dark monochrome shade
​
dark
string
default:"#5C6870"
Dark monochrome shade
​
darker
string
default:"#454E54"
Darker monochrome shade
​
darkest
string
default:"#2E3438"
Darkest monochrome shade
​
border
string
default:"hsla(203, 50%, 30%, 0.15)"
Default border color
​
positive
string
default:"#66BF3C"
Positive/success color
​
negative
string
default:"#FF4400"
Negative/error color
​
warning
string
default:"#E69D00"
Warning color
​
critical
string
default:"#FFFFFF"
Critical status color
​
defaultText
string
Default text color
​
inverseText
string
Inverse text color
​
positiveText
string
default:"#448028"
Positive text color
​
negativeText
string
default:"#D43900"
Negative text color
​
warningText
string
default:"#A15C20"
Warning text color

​
Background

​
background
object
Background color configuration
​
app
string
Main app background color
​
bar
string
Toolbar/bar background color
​
content
string
Content area background color
​
preview
string
Story preview background color
​
gridCellSize
number
default:"10"
Grid cell size for background patterns
​
hoverable
string
Background for hoverable/pressable items
​
positive
string
default:"#E1FFD4"
Positive notification background
​
negative
string
default:"#FEDED2"
Negative notification background
​
warning
string
default:"#FFF5CF"
Warning notification background
​
critical
string
default:"#FF4400"
Critical notification background

​
Typography

​
typography
object
Typography configuration
​
weight
object
Font weights
​
regular
string
default:"'400'"
Regular font weight
​
bold
string
default:"'700'"
Bold font weight
​
size
object
Font sizes
​
s1
number
default:"12"
Extra small text
​
s2
number
default:"14"
Small text
​
s3
number
default:"16"
Small-medium text
​
m1
number
default:"20"
Medium text
​
m2
number
default:"24"
Medium-large text
​
m3
number
default:"28"
Medium-extra large text
​
l1
number
default:"32"
Large text
​
l2
number
default:"40"
Extra large text
​
l3
number
default:"48"
Extra extra large text
​
code
number
default:"90"
Code text size

​
Input

​
input
object
Input field styling
​
background
string
Input background color
​
border
string
Input border color
​
borderRadius
number
default:"4"
Input border radius
​
color
string
Input text color
​
paddingHorizontal
number
default:"10"
Horizontal padding inside inputs
​
paddingVertical
number
default:"6"
Vertical padding inside inputs

​
Button

​
button
object
Button styling
​
background
string
Button background color
​
border
string
Button border color

​
Boolean

​
boolean
object
Boolean control styling
​
background
string
Unselected background color
​
selectedBackground
string
Selected background color

​
Layout

​
layoutMargin
number
default:"10"
Default margin for layout elements
​
appBorderColor
string
Application border color
​
appBorderRadius
number
default:"4"
Application border radius

​
Toolbar

​
barTextColor
string
Toolbar text color
​
barHoverColor
string
Toolbar item hover color
​
barSelectedColor
string
Toolbar item selected color
​
barBg
string
Toolbar background color

​
Branding

​
brand
Brand
default:"undefined"
Custom branding configuration
​
title
string
Replace Storybook logo with this title
​
url
string
URL to open when clicking the branded logo/title
​
image
ImageSourcePropType | ReactElement
Image source to replace Storybook logo
​
resizeMode
ImageProps['resizeMode']
Resize mode for brand image
​
target
string
Link target attribute
​
textMutedColor
string
Muted text color for secondary content

​
Examples

​
Custom Brand Colors

import { theme } from '@storybook/react-native';

const StorybookUIRoot = view.getStorybookUI({
  theme: {
    ...theme,
    color: {
      ...theme.color,
      primary: '#7C3AED',    // Purple
      secondary: '#10B981',   // Green
    },
  },
  storage: { /* ... */ },
});

​
Dark Theme with Custom Accents

import { darkTheme } from '@storybook/react-native';

const StorybookUIRoot = view.getStorybookUI({
  theme: {
    ...darkTheme,
    color: {
      ...darkTheme.color,
      primary: '#F59E0B',
      secondary: '#3B82F6',
    },
    background: {
      ...darkTheme.background,
      app: '#1F2937',
      bar: '#111827',
    },
  },
  storage: { /* ... */ },
});

​
Custom Typography

import { theme } from '@storybook/react-native';

const StorybookUIRoot = view.getStorybookUI({
  theme: {
    ...theme,
    typography: {
      ...theme.typography,
      size: {
        ...theme.typography.size,
        s1: 14,  // Larger base text
        s2: 16,
        s3: 18,
      },
    },
  },
  storage: { /* ... */ },
});

​
Auto Light/Dark Mode

The UI automatically switches between light and dark themes based on the system color scheme: 
import { useColorScheme } from 'react-native';
import { theme, darkTheme } from '@storybook/react-native';

// This happens automatically inside getStorybookUI():
const colorScheme = useColorScheme();
const appliedTheme = colorScheme === 'dark' ? darkTheme : theme;
You can customize both themes: 
import { theme, darkTheme } from '@storybook/react-native';

const customTheme = {
  light: {
    ...theme,
    color: { ...theme.color, primary: '#7C3AED' },
  },
  dark: {
    ...darkTheme,
    color: { ...darkTheme.color, primary: '#A78BFA' },
  },
};

const StorybookUIRoot = view.getStorybookUI({
  theme: customTheme.light, // Will be merged with auto-selected base
  storage: { /* ... */ },
});

​
Using Emotion for Styled Components

For custom UI components, you can use the theming utilities: 
import { styled, useTheme, withTheme } from '@storybook/react-native';
import { Text } from 'react-native';

// Styled component
const StyledText = styled(Text)`
  color: ${props => props.theme.color.primary};
  font-size: ${props => props.theme.typography.size.s2}px;
`;

// With hook
function MyComponent() {
  const theme = useTheme();
  return <Text style={{ color: theme.color.primary }}>Hello</Text>;
}

// With HOC
const MyThemedComponent = withTheme(({ theme }) => {
  return <Text style={{ color: theme.color.primary }}>Hello</Text>;
});

Build docs developers (and LLMs) love

Get started for freeTalk to us