Skip to main content

Custom theme

Definition​

Theme is defined with a set of 2 variations (dark and light) with a default background color. The isDarkProperty defines the default theme variant.

export interface DesignSystemTheme {
  light: ThemeVariant
  dark: ThemeVariant

  /**
   * Automatically inferred from the background color to determine if we want to use the light theme or the dark theme
   */
  isDark: boolean

  /**
   * Background color applied on a <Background /> component
   */
  backgroundColor: Color
}

A custom theme can be only a partial definition of the theme and will only overwrite defined properties.

Theme patch example​

{
  "light": {
    "colors": {
      "primary": {
        "base": "#50E3C2",
        "calm": "#d9f9f2",
        "loud": "#50E3C2",
        "calmer": "#f8fefd",
        "louder": "#329983"
      },
      "secondary": {
        "base": "#003C71",
        "calm": "#c8d5e0",
        "loud": "#003C71",
        "calmer": "#f5f7f9",
        "louder": "#003C71"
      }
    }
  }
}

see types definition for details

Apply custom theme​

Add you theme through ThemeProvider

const Providers = ({ children }) => {
  const theme = useMyCustomTheme();
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};