jjranalli/nightwind

How to configure for svelte/sveltekit?

mavdotjs opened this issue · 3 comments

(svelte only allows one script element per component)

if there is no way for it to work with svelte/sveltekit is there at least another option.... i dont feel like writing dark:... classes lol

misclick

Nevermind i figured it out

    import { onMount } from 'svelte';
    onMount(()=>{
        (function() {
        function getInitialColorMode() {
                const persistedColorPreference = window.localStorage.getItem('nightwind-mode');
                const hasPersistedPreference = typeof persistedColorPreference === 'string';
                if (hasPersistedPreference) {
                  return persistedColorPreference;
                }
                const mql = window.matchMedia('(prefers-color-scheme: dark)');
                const hasMediaQueryPreference = typeof mql.matches === 'boolean';
                if (hasMediaQueryPreference) {
                  return mql.matches ? 'dark' : 'light';
                }
                return 'light';
        }
        getInitialColorMode() == 'light' ? document.documentElement.classList.remove('dark') : document.documentElement.classList.add('dark');
      })()
    })