Documentation Index
Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
Use this file to discover all available pages before exploring further.
Just like in regular Svelte, we use the class strategy from Tailwind CSS to support dark mode toggling. See the Tailwind CSS documentation for more information.
How you add the dark class to the html element is up to you. In this guide, we’ll take a look at enabling dark mode toggling with mode-watcher.
Usage
Create an inline theme script
This script will, in part, keep and track the dark mode value in localStorage and prevent FUOC.---
import "../styles/global.css";
---
<script is:inline>
const isBrowser = typeof localStorage !== 'undefined';
const getThemePreference = () => {
if (isBrowser && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark' : 'light';
};
const isDark = getThemePreference() === 'dark';
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
if (isBrowser) {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
}
</script>
<html lang="en">
<body>
<h1>Astro</h1>
</body>
</html>
Install mode-watcher
npm install mode-watcher@0.5.1
Add the ModeWatcher component
Import the ModeWatcher component and use it in your page with the client:load directive:---
import "../styles/global.css";
import { ModeWatcher } from "mode-watcher";
---
<!-- inline-script -->
<html lang="en">
<body>
<h1>Astro</h1>
<ModeWatcher client:load />
</body>
</html>
Create a mode toggle
Create a mode toggle on your site to toggle between light and dark mode.You can create either a light switch toggle or a dropdown menu toggle. The implementation details will depend on your specific UI components.
Add mode toggle to page
Add the mode toggle to the page (also with the client:load directive):---
import "../styles/global.css";
import { ModeWatcher } from "mode-watcher";
import ModeToggle from "$lib/components/mode-toggle.svelte";
---
<!-- inline-script -->
<html lang="en">
<body>
<h1>Astro</h1>
<ModeWatcher client:load />
<ModeToggle client:load />
</body>
</html>