# Color modes The storybook supports three color modes: _dark_, _light_ and _system_. - The Storybook's styling adapts based on the selected color mode. - Your components are wrapped in a `
` with a custom dark class. The different modes are handled as follows: - `dark`: the `dark` class (or custom dark class) is applied to your component's sandbox - `light`: no class is applied - `system`: The `dark` class is added if your system prefers dark mode (as determined by the `prefers-color-scheme` media query). ## Setup To enable color mode support, you need to configure it in your Storybook setup: ```elixir use PhoenixStorybook, # ... color_mode: true ``` This configuration adds a color theme picker to the Storybook header, allowing you to render the Storybook with the selected mode. ## Component rendering When your components are rendered in Storybook, they are wrapped in a sandbox element (read [sandboxing guide](sandboxing.md)). - If the current color mode is dark (or system mode with dark preference), the sandbox will have a `dark` CSS class. - In light mode, no class is applied. You can customize the default dark class by specifying it in your configuration: ```elixir use PhoenixStorybook, # ... color_mode_sandbox_dark_class: "my-dark", ``` ## Tailwind setup If you use Tailwind for your components, update your `tailwind.config.js` file as follows: ```js module.exports = { // ... darkMode: "selector", }; ``` To use a custom dark class, modify the configuration like this: ```js module.exports = { // ... darkMode: ["selector", ".my-dark"], }; ``` In your application, ensure that the dark mode class is applied to your DOM element, particularly on or under your sandbox element: ```html ... ```