Theme Switcher

Component that allows users to switch between light and dark themes.

Further

Put the following code in your html > headto ensure the correctness of the theme when the page is overloaded. (This is not necessary, it is only necessary to perform this operation when this kind of problem occurs.)

(()=>{if(typeof window==='undefined')return;let p=matchMedia('(prefers-color-scheme:dark)').matches;let s=localStorage.getItem('fe.system.color-scheme')||'auto';if(s==='dark'||(p&&s==='auto'))document.documentElement.classList.toggle('dark',true)})()

Default

Support all attributes of the button component (except slots)

<template>
  <PThemeSwitcher />
</template>

Variants/Shape

<template>
  <PStack>
    <PThemeSwitcher variant="primary" />
    <PThemeSwitcher shape="rounded" />
  </PStack>
</template>

Events