Overview
Cerberus provides support for themes and color modes, allowing you to create visually appealing and accessible applications that adapt to user preferences.
Themes
To use a theme, just add the data-panda-theme attribute to your root html tag.
<html lang="en" data-panda-theme="cerberus">
<body>{children}</body>
</html>Cerberus comes with two built-in themes: cerberus and acheron. You can switch between these themes by changing the value of the data-panda-theme attribute.
Color Modes
Cerberus supports two color modes: light and dark. You can set the default color mode by adding the data-color-mode attribute to your root html tag.
<html lang="en" data-panda-theme="cerberus" data-color-mode="light">
<body>{children}</body>
</html>Color mode works the same way as themes. You can switch between light and dark modes by changing the value of the data-color-mode attribute.
Nesting themes and color modes
You can also nest themes and color modes within your application using the Theme component. This is useful when you want to apply a different theme or color mode to a specific section of your app.
<html lang="en" data-panda-theme="cerberus" data-color-mode="light">
<body>
<Text>This text is in the Cerberus theme and light mode</Text>
<Theme theme="acheron" mode="dark">
<Text>This text is in the Acheron theme and dark mode</Text>
</Theme>
</body>
</html>Custom Themes and Color Modes
You can create your own themes and modes by extending your panda.config.ts file. For more information, check out the Multi-Theme Support sections in the PandaCSS documentation.
Note
Cerberus will provide a way to streamline this via the `createCerberusPreset` in a future release.