index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        
        <meta charset="UTF-8" />

        <link rel="icon" href="/favicon.ico" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Local VueVentus Testing App</title>

        <!-- Color Mode Functionality -->
        <script>
            // On page load or when changing colorMode, best to add inline in `head` to avoid FOUC
            if (localStorage.colorMode === 'dark' || (!('colorMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                localStorage.setItem('colorMode', 'dark');
                document.documentElement.classList.add('dark');
                document.documentElement.style.backgroundColor = '#242426';
                document.documentElement.style.color = '#e1e1e3';
            } else {
                localStorage.setItem('colorMode', 'light');
                document.documentElement.classList.remove('dark');
                document.documentElement.style.backgroundColor = '#e1e1e3';
                document.documentElement.style.color = '#242426';
            }
        </script>

    </head>

    <body class="scrollbar scrollbar-thumb-trueGray-100 scrollbar-track-trueGray-200 dark:scrollbar-thumb-trueGray-600 dark:scrollbar-track-trueGray-800">

        <div id="app"></div>

        <script type="module" src="/src/main.ts"></script>

    </body>

</html>