Skip to main content

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

// 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"

Code​

<DhlThemeSwitch theme="dark" />

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 the theme prop.
  • The toggleTheme method switches between light and dark themes and updates both the data-dui-theme attribute on the <html> element and the value in localStorage.
  • Possible value of data-dui-theme is theme-light or theme-dark.

Readme​

Properties​

PropertyAttributeDescriptionTypeDefault
dataAriaLabeldata-aria-labelAn 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"
dataTestiddata-testidAn optional prop. The test id attached to the component as a data-testid attribute.stringundefined
iconOrientationicon-orientationAn 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
iconSizeicon-sizeAn optional prop used to control the size of icons in the button"lg" | "md" | "sm" | "xl"DHL_BUTTON.ICON_SIZE.LG
sizesizeAn optional size prop for the component."md" | "sm" | "xs"DHL_BUTTON.SIZE.MD
themethemeAn optional prop to select the default theme of components."dark" | "light" | "system""light"
variantvariantAn optional prop to select a component design variant."ghost" | "ghostBlack" | "outline" | "outlineBlack" | "primary" | "text" | "tonal"DHL_BUTTON.VARIANT.PRIMARY

Slots​

SlotDescription
"unnamed"unnamed children slot for Theme Switch text

Dependencies​

Depends on​

Graph​

Built by DHL User Interface Library Team!