Dark Mode

How to customize the dark mode theme of the components.

Modify dark mode theme

You can modify the dark mode theme of the components by changing any of the previews properties discussed in the previous sections by only adding the dark- prefix to the property name.

module.exports = {
  ...,
  content: [
    "./node_modules/@andore-ui/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [
    require('@andore-ui/theme')({
      theme: {
        primary: {
          "dark-DEFAULT": "#381E72",
          "dark-text": "#D0BCFE",
        },
        shadow: {
          "dark-md": "0 4px 6px -1px rgba(56, 30, 114, 0.1), 0 2px 4px -1px rgba(56, 30, 114, 0.06)",
        },
      }
    }),
  ],
};

How does it work?

The theme system uses the prefix dark- to apply the colors, box shadows, and other properties when user has dark mode enabled.

For example, let's modify the dark colors of the following component:

Dark mode tokens

All the color tokens that can be modified have a dark- prefix.

For naming some examples:

• dark-primary-DEFAULT: The primary color of the dark mode.
• dark-shadow-md: The shadow color of the dark mode.

IMPORTANT: The dark mode prefix is only applied to the colors and shadows, the other properties are the same for both light and dark mode.