ThemeProvider

Usage

Import the ThemeProvider and wrap your application with it:

import { ThemeProvider } from '@aws-amplify/ui-react';

export const App = () => (
  <ThemeProvider>
    <YourApplication />
  </ThemeProvider>
);

After wrapping your application in the ThemeProvider, you have access to all theme values in your components. To style the components in your app, you can either:

1. Get the theme tokens through the useTheme hook (e.g., tokens.colors.blue[80])
2. Reference the theme tokens directly in style props (e.g., "purple.80")

import { Button, useTheme } from '@aws-amplify/ui-react';

export const BasicExample = () => {
  const { tokens } = useTheme();

  return (
    <Button border={`2px solid ${tokens.colors.blue[80]}`} color="purple.80">
      Themed Button
    </Button>
  );
};

theme

To create and use your own custom theme, you may pass a theme object to the theme prop on the ThemeProvider.

• Theming overview

import { Card, Heading, Text, ThemeProvider } from '@aws-amplify/ui-react';

const theme = {
  name: 'custom-theme',
  tokens: {
    components: {
      card: {
        backgroundColor: { value: '{colors.background.secondary}' },
        outlined: {
          borderColor: { value: '{colors.black}' },
        },
      },
      heading: {
        color: { value: '{colors.secondary[80]}' },
      },
      text: {
        color: { value: '{colors.primary[80]}' },
      },
    },
  },
};

export const CustomThemeExample = () => {
  return (
    <ThemeProvider theme={theme}>
      <Card variation="outlined">
        <Heading level={6}>Heading text</Heading>
        <Text>Some sample text for this card.</Text>
      </Card>
    </ThemeProvider>
  );
};

colorMode

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

See the Dark mode documentation for a detailed explanation of how to use the colorMode prop.

nonce

When you have a Content-Security-Policy (CSP) header defined, the browser will automatically block inline styles.

To safely allow inline styles when using strict CSP rules, you may pass a nonce to the nonce prop on the ThemeProvider. This will add a nonce to the <style> tag rendered by the ThemeProvider. For example:

CSP rules

style-src css-cdn.example.com 'nonce-rAnd0m';

ThemeProvider

<ThemeProvider nonce="rAnd0m">
  {/* your app */}
</ThemeProvider>

HTML output

<style nonce="rAnd0m">
  :root, [data-amplify-theme] {
    --amplify-colors-white: hsl(0, 0%, 100%);
    /* etc */
  }
  /* 
   * Any of your custom theme styles
   */
</style>

For more information, see the following documention on allowing inline styles using a nonce.