Easily switch between themes, light or dark mode and more with the Theme Switcher component.
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-neutral with any of the 15 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.
First, ensure that your vite.config.js file is configured to include your custom palette. For more information on how to do this, please refer to the documentation.
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:
data-hex specifies the hex code for the theme preview.value specifies the class name for the theme.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:
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:
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:
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:
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.
You can use the Drop component to display the Theme Switcher, providing a compact and convenient way to access theme options.
Alternatively, you can also display the Theme Switcher inside a Modal component.
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.
The following attributes are available for this component:
| Name | Type | Default | Description |
|---|---|---|---|
force-prevent-rerender | Boolean | false | Forcefully prevents component rerendering. |
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. |