DhlThemeSwitch
A configurable ThemeSwitch component that allows users to toggle between light and dark themes. This component can be customized by selecting different design variants and default themes.
Import
- React
- Angular
- Vue.js
// with @dhl-official/react-library:
import { DhlThemeSwitch } from "@dhl-official/react-library"
// with @dhl-official/ui-libraries/react-library:
import { DhlThemeSwitch } from "@dhl-official/ui-libraries/react-library"
If the DUIL has been installed, you can use the web component directly:
<dhl-theme-switch></dhl-theme-switch>
// with @dhl-official/vue-library:
import { DhlThemeSwitch } from "@dhl-official/vue-library"
// with @dhl-official/ui-libraries/vue-library:
import { DhlThemeSwitch } from "@dhl-official/ui-libraries/vue-library"
Code
- React
- Angular
- Vue.js
<DhlThemeSwitch theme="dark" />
<dhl-theme-switch [theme]="'dark'"></dhl-theme-switch>
<dhl-theme-switch :theme="'dark'"></dhl-theme-switch>
Interactive Demo
Usage
The DhlThemeSwitch component is designed to toggle between light and dark themes. The user's preferred theme is stored in localStorage and applied on subsequent visits.
How It Works
- The component checks the user's preferred theme from
localStorage. If none is found, it defaults to the light theme or the value provided via thethemeprop. - The
toggleThememethod switches between light and dark themes and updates both thedata-dui-themeattribute on the<html>element and the value inlocalStorage. - Possible value of
data-dui-themeistheme-lightortheme-dark.
Readme
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
dataAriaLabel | data-aria-label | An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label. | string | "Button for switching themes" |
dataTestid | data-testid | An optional prop. The test id attached to the component as a data-testid attribute. | string | undefined |
iconOrientation | icon-orientation | An optional prop used to align an icon (if present) on either the left or right side of the component. | "left" \| "right" | DHL_BUTTON.ICON_ORIENTATION.RIGHT |
iconSize | icon-size | An optional prop used to control the size of icons in the button | "lg" \| "md" \| "sm" \| "xl" | DHL_BUTTON.ICON_SIZE.LG |
size | size | An optional size prop for the component. | "md" \| "sm" \| "xs" | DHL_BUTTON.SIZE.MD |
theme | theme | An optional prop to select the default theme of components. | "dark" \| "light" \| "system" | "light" |
variant | variant | An optional prop to select a component design variant. | "outline" \| "primary" \| "text" | DHL_BUTTON.VARIANT.PRIMARY |
Slots
| Slot | Description |
|---|---|
"unnamed" | unnamed children slot for Theme Switch text |
Dependencies
Depends on
Graph
Built by DHL User Interface Library Team!