View Source Color modes
The storybook can support color modes: dark, light and system.
- The storybook style itself is styled based on the selected color mode
- Your components will be wrapped in a div with a custom dark class.
The different modes are handled as such:
- when
dark
, thedark
class (or custom dark class) is added on your components sandbox - when
light
, no class is set - when
system
, it will add thedark
class if your system prefers dark (cf.prefers-color-scheme
)
Setup
First you need enable color_mode
support.
use PhoenixStorybook,
# ...
color_mode: true
This will add a new color theme picker in the storybook header. At this time you should be able to render the storybook with the new mode.
Component rendering
Whenever a component of yours is rendered in the storybook, it's wrapped under a sandbox element (read sandboxing guide)
If the current color_mode is dark (or system with your system being dark), then the sandbox will carry a dark
css class. When in light mode, no class is set.
You can customize the default dark class:
use PhoenixStorybook,
# ...
color_mode_sandbox_dark_class: "my-dark",
Tailwind setup
If you use Tailwind for your own components, then update your tailwind.config.js
accordingly.
module.exports = {
// ...
darkMode: "selector",
};
A custom dark class can be used like this:
module.exports = {
// ...
darkMode: ["selector", ".my-dark"],
};
In your own application, when setting the dark mode class to your DOM, make sure it is added on (or under) your sandbox/important element.
<html class="storybook-demo-sandbox dark">
...
</html>