Theme Switcher

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

API	Type	Description
`window.a3sUI.theme.get()`	Method	Returns `"dark"` or `"light"`.
`window.a3sUI.theme.set(mode)`	Method	Sets the mode to `"dark"` or `"light"` and stores it in `localStorage.themeMode`.
`window.a3sUI.theme.toggle()`	Method	Toggles between dark and light mode.

#Theme Switcher

#Usage