Svelte Theme Store

theme.ts

import { writable } from 'svelte/store'

const html = document.querySelector('html')
const storedTheme = localStorage.getItem('theme')

function isSystemThemeDark() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}

function createThemeStore() {
    const isDark = writable(storedTheme ? storedTheme === 'dark' : isSystemThemeDark())

    const toggle = () => {
        isDark.update(prev => !prev)
    }

    isDark.subscribe((value) => {
        localStorage.setItem('theme', value ? 'dark' : 'light')
        
        // For tailwind/windi
        if (value) {
            html.classList.add('dark')
        } else {
            html.classList.remove('dark')
        }
    })

    return {
        isDark,
        toggle
    }
}

export const theme = createThemeStore()