Skip to main content

Using theme.jsx

You can customize WSUI components and global styles via the theme.jsx file located in /src/wsui.

import { createTheme } from "@wsui/base";

export default createTheme({
  // Define your theme here
});

Colors​

theme.colors is a map of color names to color values. The color values can be any valid CSS color value, a reference to another color or a scale definition.

Example​

export default createTheme({
  colors: {
    blue: {
      50: "#eff6ff",
      100: "#dbeafe",
      200: "#bfdbfe",
      300: "#93c5fd",
      400: "#60a5fa",
      500: "#3b82f6",
      600: "#2563eb",
      700: "#1d4ed8",
      800: "#1e40af",
      900: "#1e3a8a",
      950: "#172554",
    },
    primary: "blue.500", // Reference another color
    gray: "#6b7280", // Tints and shades will be generated automatically but this value will be the default when using `gray` or `gray.main`
    border: "gray.200",
  },
});

Typography​

theme.typography.fonts is used to define font faces.

theme.typography.fontFamily is used to define the default font family.

theme.typography.variants is used to define the variants used by the <Typography> and <TypographyBlock> components.

Components​

theme.components is used to customize the behavior of WSUI components.

theme.components.<component-name>.defaultProps is used to change the default props of a component.