index.html

<!doctype html>
<html lang="en" data-theme="light" data-palette="solar" data-density="default" data-code-font="plex">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
    <meta name="apple-mobile-web-app-title" content="Code Ducky" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#002c37" />
    <meta name="theme-color" content="#fcf5e3" />
    <script>
      // First-paint hint ahead of src/app/appearance.ts, with its rules: the cached choice, else dark only on an explicit OS match.
      ;(function () {
        var root = document.documentElement
        var theme = null
        try {
          theme = localStorage.getItem('codeducky.theme')
          var palette = localStorage.getItem('codeducky.palette')
          // Keep in step with PALETTES in src/db/schema.ts; a test checks it.
          if (['terminal', 'fjord', 'solar', 'dusk', 'contrast'].indexOf(palette) !== -1) root.dataset.palette = palette
        } catch (e) {}
        if (theme !== 'dark' && theme !== 'light') {
          try {
            theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
          } catch (e) {
            theme = 'light'
          }
        }
        root.dataset.theme = theme
      })()
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code Ducky</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>