mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 05:38:18 +00:00
98 lines
4.0 KiB
Plaintext
98 lines
4.0 KiB
Plaintext
# Theme Switcher
|
|
|
|
<Preview>
|
|
<button
|
|
type="button"
|
|
aria-label="Toggle dark mode"
|
|
data-tooltip="Toggle dark mode"
|
|
data-side="bottom"
|
|
onclick="window.basecoat.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>
|
|
</Preview>
|
|
|
|
## Usage
|
|
|
|
<Steps>
|
|
<Step title="Include CSS">
|
|
|
|
Import Tailwind and one full Basecoat style bundle.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/vega.css";
|
|
```
|
|
|
|
Or import only the base CSS, the component CSS files it composes, and one style pack.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/base.css";
|
|
@import "basecoat-css/components/button.css";
|
|
@import "basecoat-css/components/tooltip.css";
|
|
@import "basecoat-css/styles/vega.css";
|
|
```
|
|
|
|
Theme Switcher composes Button and Tooltip component CSS.
|
|
|
|
Using CDN or bundler imports? See the [Installation page](/installation).
|
|
|
|
</Step>
|
|
<Step title="Include JavaScript">
|
|
|
|
Copy or serve the full Basecoat JavaScript bundle.
|
|
|
|
```html
|
|
<script src="/assets/js/all.min.js" defer></script>
|
|
```
|
|
|
|
Or copy or serve the Basecoat runtime only.
|
|
|
|
```html
|
|
<script src="/assets/js/basecoat.min.js" defer></script>
|
|
```
|
|
|
|
Using CDN or bundler imports? See the [Installation page](/installation).
|
|
|
|
</Step>
|
|
<Step title="Avoid the initial flash">
|
|
|
|
Add this inline script before loading your styles so the stored mode is applied before the page renders.
|
|
|
|
```html
|
|
<script>
|
|
(() => {
|
|
try {
|
|
const stored = localStorage.getItem("themeMode");
|
|
if (stored ? stored === "dark" : matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
document.documentElement.classList.add("dark");
|
|
}
|
|
} catch (_) {}
|
|
})();
|
|
</script>
|
|
```
|
|
|
|
</Step>
|
|
<Step title="Add your switcher HTML">
|
|
|
|
```html
|
|
<button type="button" aria-label="Toggle dark mode" data-tooltip="Toggle dark mode" data-side="bottom" onclick="window.basecoat.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>
|
|
```
|
|
|
|
</Step>
|
|
</Steps>
|
|
|
|
### JavaScript API
|
|
|
|
| API | Type | Description |
|
|
| --- | --- | --- |
|
|
| `window.basecoat.theme.get()` | Method | Returns `"dark"` or `"light"`. |
|
|
| `window.basecoat.theme.set(mode)` | Method | Sets the mode to `"dark"` or `"light"` and stores it in `localStorage.themeMode`. |
|
|
| `window.basecoat.theme.toggle()` | Method | Toggles between dark and light mode. |
|