Theme Switcher
Easily switch between predefined themes on your page
Source ↗️ Report Issue ↗️The ThemeSwitcher
component allow users to toggle between different visual themes of your application/website, such as light mode and dark mode. Use them to enhance user experience and accessibility.
To use the ThemeSwitcher
component, you must first have themes setup in your setup
mixin.
When using the component, it’ll attach the necessary class to your body
tag that’ll active the theme for you. It’ll also create a w-theme
cookie and local storage item that you can reference to set the theme on page load either on your server or in the client.
w-theme
cookie or local storage item to reset the theme on page load. Toggles
If you only have two themes, such as a dark and light theme, you can turn the component into a single toggle button by setting the toggle
prop to true
:
Toggles with Icons
To complement the toggle functionality visually with custom icons, you can use named slots for Astro/Svelte component, and additional props for React components:
Use the primaryIcon
and secondaryIcon
slots for Astro/Svelte components. When using in React, use the primaryIcon
and secondaryIcon
props instead. The same approach can be used to create toggles with custom images instead of icons. Simply replace the Icon
component with an img
tag:
Sizes
To change the size of your ThemeSwitcher
component, override the following CSS variable:
Alternatively, set the size
prop to change the size on individual components:
API
Prop | Purpose |
---|---|
themes | Define your themes that have been set up using the Setup mixin. |
toggle | Turns the switcher into a one button toggle. Use if you only have two themes. |
size | Sets the size of the switcher. Defaults to 20px . |
className | Pass additional CSS classes for the theme switcher. |
For React components, instead of using slots, use the primaryIcon
and secondaryIcon
props to pass custom icons to your component.
Request improvement for this page