<script lang="ts"> let theme = localStorage.getItem("theme") ?? "light"; const handleClick = () => { theme = (theme === "light" ? "dark" : "light"); console.log('classlist',document.documentElement.classList); }; $:{ if (theme === "dark") { document!.documentElement.classList.add("dark"); } else { document!.documentElement.classList.remove("dark"); } localStorage.setItem("theme", theme); }</script><button on:click={handleClick}>{theme === "light" ? "🌙" : "🌞"}</button>when the button is clicked it prints the classlist fine, but I get document not defined when i add the reactive value.
Thank you @H.B for the answer:
<script lang="ts"> import { onMount } from "svelte"; let theme = localStorage.getItem("theme") ?? "light"; let flag = false; onMount(()=>{ flag = true }) $: if (flag) { if ( theme === 'dark') { document!.documentElement.classList.add("dark"); } else { document!.documentElement.classList.remove("dark"); } localStorage.setItem("theme", theme); } const handleClick = () => { theme = (theme === "light" ? "dark" : "light"); console.log('classlist',document.documentElement.classList); }; </script><button on:click={handleClick}>{theme === "light" ? "🌙" : "🌞"}</button>this works as intended