ThemeSwitcher

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

Premise

Put the following code in your html > headto ensure the correctness of the theme when the page is overloaded.

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

Default

code

<template>
  <PThemeSwitcher />
</template>

Variants/Shape

code

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