Amplify UI


The ThemeProvider allows you to apply a Theme to your application.

AmplifyProvider has been renamed to ThemeProvider. The ThemeProvider export is available since version 2.18.3, previous versions must still use AmplifyProvider.


Import the ThemeProvider and wrap your application with it:

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

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

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.,[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 ${[80]}`} color="purple.80">
      Themed Button


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

Heading text

Some sample text for this card.

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: '{}' },
      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>


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.


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 'nonce-rAnd0m';


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

HTML output

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

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

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.