zen
DocumentationPlayground
Getting started
IntroductionInstallationUsage Guide
ColorsFontsSpacingBordersShadowsBreakpointsThemesCustomization
BoxFlexboxGridContainer
TextHeadingCodeBlockquote
Page headerAspect ratioResizableScroll areaSeparator
Overview
AutocompleteCheckboxCheckbox groupComboboxDate pickerInput groupNumber fieldOTP FieldPassword fieldRadio groupSearch fieldSelectSliderSwitchText fieldToggleToggle group
BreadcrumbsButtonButton groupCommandContext menuHover triggerLoading buttonMenuMenubarNavbarPaginationTabsToolbarTheme buttonTheme switcher
AlertAlert dialogConfirmation dialogDialogDrawerEmptyLoadingMeterModalPopoverPreview cardProgress barProgress circleSheetSkeletonStatus lightToastTooltip
AccordionAvatarBadgeCalendarCarouselCollapsibleData cardData tableIconImageKbdListTableTag group
Actions & Navigation

Theme Switcher

A segmented control that allows users to choose between light, dark, or system theme.

Features#

  • Shows all three options (light, dark, system) at once
  • Highlights the currently selected option
  • Persists the mode preference to localStorage
  • Automatically responds to system theme changes when "system" is selected

Component props#

NameTypeDescription
classNamestringAdditional CSS classes
PreviousTheme buttonNextAlert
On this page
FeaturesComponent props
Powered by shiso