Default Themes
Adding dark and light themes to your application.
Wedges supports dark and light themes out of the box. By default, the light theme is applied if no specific theme classes are added. The default theme can be changed with wedgesTW configuration.
Using Default Themes
To apply a dark theme, simply add the dark class to a parent element, usually the html or body. For other themes, add the appropriate class, like light for light theme.
<html class="dark">
...
</html>This approach enables the dark theme for the entire app. To apply different themes to individual sections, add the corresponding theme class to each section’s container.
<html class="dark">
...
<div class="light">...</div>
<div class="orange-blue">...</div>
<!-- custom theme -->
</html>Customization
See Colors Customization.
Theme Switching
If you need to toggle between different themes consider using a theme switching library, or a custom solution for this functionality.
Next.js
A popular choice for toggling themes in Next.js is next-themes. It support system preference and any other theme with no flashing, sync theme across tabs and windows, useTheme hook and more.
For more information follow the official guide on how to setup next-themes with Next.js:
Switcher Examples
The following examples show how you could use Wedges components to create a theme switcher component.