2 min read
In Ladle there is a handy button which is able to switch between light and dark mode. However, this only switches the ui of Ladle. Wouldn't it be great if it could also switch the mode of our TailwindCSS components, with the same button? It turns out that we can. We only have to create a GlobalProvider.
A global provider can be used to enhance stories or provide additional context to them.
In this example we use the class strategy to toggle the dark mode in TailwindCSS.
So we want to add the
dark class to the
html element when dark mode is active in Ladle and
we want to make sure it is not present when light mode is active.
To create the global provider we create a file at
Then we have to export a component called
Provider of type
Provider receives the following props:
- children: The current story
- globalState: The global state of Ladle, which contains the active theme
- storyMeta: The metadata of the story, such as the name
To achieve our goal we have to create a component which uses an Effect Hook
which toggles the
dark class whenever the theme in Ladle changes.
That's all, have fun developing components in light and dark mode.
Posted in: ladle, tailwindcss, react