Theme Switcher
Easily switch between themes, light or dark mode and more with the Theme Switcher component.
Table of contents
Usage
To implement the Theme Switcher, you’ll need to make some modifications to your HTML code to allow users to change their preferences.
1. Start by setting a default theme and mode in the <head> tag of your HTML by checking the user’s preference:
This will first check if a user previously set the theme color preference manually using local storage, and as a fallback, it will either set dark or light mode based on the browser’s color scheme preference.
Note You can replace
uk-theme-zinc with any of the 12 available themes you want as the default.
2. Ensure that your <body> tag includes the classes bg-background and text-foreground to apply the proper background and text colors that automatically adapt to the currently set theme.
3. You can now use the <uk-theme-switcher> markup in your HTML code with one <select hidden></select> tag as items reference and place it however you like.
Custom palette
First, ensure that your tailwind.config.js file is configured to include your custom palette. For more information on how to do this, please refer to the documentation.
Adding or removing themes
To add or remove theme options, simply add or remove <option> tags within the <optgroup data-key="theme" label="Theme"> group. Each theme option should follow the format:
Where:
- The
data-hexspecifies the hex code for the theme preview. - The
valuespecifies the class name for the theme. - The option text specifies the label for the theme.
Radii
To allow users to customize radii, add an <optgroup data-key="radii" label="Radii"> group within the <select hidden> tag. This group should contain <option> tags for each radii option, such as:
Shadows
Similarly, to allow users to customize shadows, add an <optgroup data-key="shadows" label="Shadows"> group within the <select hidden> tag. This group should contain <option> tags for each shadow option, such as:
Font
You can also allow users to customize font size, just add an <optgroup data-key="font" label="Font"> group within the <select hidden> tag. This group should contain <option> tags for each font option, such as:
Radii
To allow users to customize their chart styles, add an <optgroup data-key="chart" label="Chart"> group within the <select hidden> tag. This group should contain <option> tags for each chart option, such as:
Modes
To allow users to switch between light and dark modes, add an <optgroup data-key="mode" label="Mode"> group within the <select hidden> tag. This group should contain <option> tags for each mode option, such as:
Charts
To allow users to switch between chart themes, add an <optgroup data-key="chart" label="Chart"> group within the <select hidden> tag. This group should contain <option> tags for each chart theme option, such as:
Note The values inside the <option> tags will be attached to the <head> tag, allowing for customization. However, the dark and light classes are exceptions and will be handled differently.
Dropdown
You can use the Drop component to display the Theme Switcher, providing a compact and convenient way to access theme options.
Modal
Alternatively, you can also display the Theme Switcher inside a Modal component.
Internationalization
To customize language, you can now directly do it inside your markup. This allows for more flexibility and control over the text displayed to your users.
Events
The Theme Switcher component triggers the following events on elements with this component attached:
| Name | Description |
|---|---|
uk-theme-switcher:change | Fired when something has changed. |