For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/theme-switcher.md.
A3S UI
  • English
  • next

      • Theme Switcher

      Live previewHTML · CSS · JavaScript

      Usage

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Or import only the base CSS, the component CSS files it composes, and one style pack.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/components/tooltip.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Theme Switcher composes Button and Tooltip component CSS.

      Using CDN or bundler imports? See the Installation page.

      Include JavaScript

      Copy or serve the full A3S UI JavaScript bundle.

      <script src="/assets/js/all.min.js" defer></script>

      Or copy or serve the A3S UI runtime only.

      <script src="/assets/js/runtime.min.js" defer></script>

      Using CDN or bundler imports? See the Installation page.

      Avoid the initial flash

      Add this inline script before loading your styles so the stored mode is applied before the page renders.

      <script>
  (() => {
    try {
      const stored = localStorage.getItem("themeMode");
      if (stored ? stored === "dark" : matchMedia("(prefers-color-scheme: dark)").matches) {
        document.documentElement.classList.add("dark");
      }
    } catch (_) {}
  })();
</script>

      Add your switcher HTML

      <button type="button" aria-label="Toggle dark mode" data-tooltip="Toggle dark mode" data-side="bottom" onclick="window.a3sUI.theme.toggle()" class="btn size-8" data-variant="outline" data-size="icon">
  <span class="hidden dark:block"><svg class="lucide lucide-sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" /></svg></span>
  <span class="block dark:hidden"><svg class="lucide lucide-moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" /></svg></span>
</button>

      JavaScript API

      APITypeDescription
      window.a3sUI.theme.get()MethodReturns "dark" or "light".
      window.a3sUI.theme.set(mode)MethodSets the mode to "dark" or "light" and stores it in localStorage.themeMode.
      window.a3sUI.theme.toggle()MethodToggles between dark and light mode.