Customize theme

Extend the default Hope UI theme to match your design requirements.

Customizing theme tokens

To override a token in the default theme, import the extendTheme function and add the keys you'd like to override. You can also add new values to the theme.

The below example demonstrates how to override the light mode primary color palette.

tsx
import { createPalette, extendTheme, HopeProvider } from "@hope-ui/core";
const theme = extendTheme({
  colors: {
    light: {
      primary: createPalette({
        50: "#eff6ff",
        100: "#dbeafe",
        200: "#bfdbfe",
        300: "#93c5fd",
        400: "#60a5fa",
        500: "#3b82f6",
        600: "#2563eb",
        700: "#1d4ed8",
        800: "#1e40af",
        900: "#1e3a8a",
      }),
    },
  },
});
function Demo() {
  <HopeProvider theme={theme}>
    <App />
  </HopeProvider>;
}

tsx
import { createPalette, extendTheme, HopeProvider } from "@hope-ui/core";
const theme = extendTheme({
  colors: {
    light: {
      primary: createPalette({
        50: "#eff6ff",
        100: "#dbeafe",
        200: "#bfdbfe",
        300: "#93c5fd",
        400: "#60a5fa",
        500: "#3b82f6",
        600: "#2563eb",
        700: "#1d4ed8",
        800: "#1e40af",
        900: "#1e3a8a",
      }),
    },
  },
});
function Demo() {
  <HopeProvider theme={theme}>
    <App />
  </HopeProvider>;
}

Customizing component theme

The theme override object accepts a components key, allowing you to set default props and styles for each Hope UI component.

Default props

Use the defaultProps key to override the default props of a component.

tsx
import { extendTheme, ButtonTheme } from "@hope-ui/core";
const theme = extendTheme({
  // ...others theme tokens override
  components: {
    Button: {
      defaultProps: {
        variant: "outlined",
        size: "sm",
        colorScheme: "neutral",
      },
    } as ButtonTheme,
  },
});

tsx
import { extendTheme, ButtonTheme } from "@hope-ui/core";
const theme = extendTheme({
  // ...others theme tokens override
  components: {
    Button: {
      defaultProps: {
        variant: "outlined",
        size: "sm",
        colorScheme: "neutral",
      },
    } as ButtonTheme,
  },
});

Style config override

Use the styleConfigOverride key to override the default styles of a component.

Each key refers to a part of the component for which the baseStyle, variants, and compoundVariants can be defined as described in the [Styled components] (/docs/styles/styled-components) section.

tsx
import { extendTheme, ButtonTheme } from "@hope-ui/core";
const theme = extendTheme({
  // ...others theme tokens override
  components: {
    Button: {
      defaultProps: {
        // default props override
      },
      styleConfigOverride: {
        // styles for the Button "root" part
        root: {
          baseStyle: {
            // base style override
          },
          variants: {
            size: {
              sm: {
                // style override to apply when the `size="sm"` prop is passed
              },
            },
          },
          compoundVariants: [
            {
              variants: {
                variant: "solid",
                colorScheme: "primary",
              },
              style: {
                // style override to apply when both `variant="solid"` and `colorScheme="primary"` props are passed
              },
            },
          ],
        },
        // ...style of other parts of the component, if any
      },
    } as ButtonTheme,
  },
});

tsx
import { extendTheme, ButtonTheme } from "@hope-ui/core";
const theme = extendTheme({
  // ...others theme tokens override
  components: {
    Button: {
      defaultProps: {
        // default props override
      },
      styleConfigOverride: {
        // styles for the Button "root" part
        root: {
          baseStyle: {
            // base style override
          },
          variants: {
            size: {
              sm: {
                // style override to apply when the `size="sm"` prop is passed
              },
            },
          },
          compoundVariants: [
            {
              variants: {
                variant: "solid",
                colorScheme: "primary",
              },
              style: {
                // style override to apply when both `variant="solid"` and `colorScheme="primary"` props are passed
              },
            },
          ],
        },
        // ...style of other parts of the component, if any
      },
    } as ButtonTheme,
  },
});

To find out which Hope UI components are themeable, refer to the theming section of their documentation.