src/app.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="/lua-logo-favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
            rel="preload"
            href="https://fonts.nickmazuk.com/inter-variable.woff2"
            as="font"
            type="font/woff2"
            crossorigin="anonymous"
        />
        <link
            rel="preload"
            href="https://fonts.nickmazuk.com/inter-variable-italic.woff2"
            as="font"
            type="font/woff2"
            crossorigin="anonymous"
        />
        %svelte.head%
    </head>
    <body>
        <div id="svelte">%svelte.body%</div>
    </body>

    <script>
        const setTheme = () => {
            const savedTheme = localStorage.getItem('theme')
            if (!savedTheme) localStorage.setItem('theme', 'system')
            const { classList } = document.body
            if (savedTheme === 'system' || !savedTheme) {
                const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
                if (isDark) classList.add('dark')
            } else if (savedTheme === 'dark') {
                classList.add('dark')
            }
        }
        setTheme()
    </script>
</html>