Dark Mode

Overview

Amplify UI supports color modes/schemes, like Dark Mode, through theme overrides. Amplify UI Theme Overrides let you define different theme styles in different contexts, such as color mode.

ThemeProvider

The ThemeProvider accepts a colorMode prop which can be light, dark, or system.

If you have multiple ThemeProviders in your application, make sure to store colorMode in the application's state or context and pass it to each ThemeProvider or else some parts of your app won't have the right color mode applied. Also, because the theme uses CSS variables which are inherited, your application can have some weird behavior with nested themes and color modes.

Default Dark Mode

Amplify UI comes with a default dark mode that you can use. Import the defaultDarkModeOverride and add it to the overrides array in your theme.

If you want to honor your users' operating system preference for color mode, you can send the useColorScheme hook from React Native to the colorMode prop on the ThemeProvider.

import * as React from 'react';
import { useColorScheme } from 'react-native';
import { defaultDarkModeOverride, ThemeProvider } from '@aws-amplify/ui-react-native';

const theme = {
  overrides: [defaultDarkModeOverride],
};

export const DefaultDarkMode = () => {
  const colorMode = useColorScheme();

  return (
    <ThemeProvider theme={theme} colorMode={colorMode}>
      {/* ... */}
    </ThemeProvider>
  );
};

You can also control the color mode in your application as well by keeping a state variable that is either 'light' or 'dark'.

import * as React from 'react';
import { Pressable, Text } from 'react-native';
import { ThemeProvider } from '@aws-amplify/ui-react-native';

const theme = {
  overrides: [defaultDarkModeOverride],
};

export const CustomDarkModeExample = () => {
  const [colorMode, setColorMode] = React.useState('light');

  return (
    // Note: color mode overrides are scoped to the ThemeProvider
    // if you use multiple providers
    <ThemeProvider theme={theme} colorMode={colorMode}>
      <Pressable onPress={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
        <Text>Change theme</Text>
      </Pressable>
    </ThemeProvider>
  );
};

Custom dark mode

You can create your own dark mode override as well. The dark mode override will be applied when colorMode on the ThemeProvider is set to dark.

const theme = {
  overrides: [
    {
      colorMode: 'dark',
      tokens: {
        colors: {
          font: {
            primary: '{colors.pink.100}',
            secondary: '{colors.pink.90}',
            tertiary: '{colors.pink.80}',
          },
          background: {
            primary: '{colors.purple.10}',
            secondary: '{colors.purple.20}',
            tertiary: '{colors.purple.40}',
          },
          border: {
            primary: '{colors.pink.60}',
            secondary: '{colors.pink.40}',
            tertiary: '{colors.pink.20}',
          },
        },
      },
    },
  ],
};