cloudscape/index.html at main · tijnjh/cloudscape · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script>
      // @ts-check
      'use strict'

      if (document) {
        /**
         * @param {string} key
         * @param {string} fallback
         * @returns {string}
         */
        function getStoredColor(key, fallback) {
          try {
            return JSON.parse(localStorage[key]) || fallback
          } catch {
            return fallback
          }
        }

        /** @type {string} */
        const baseColor = getStoredColor('selected-base-color', 'mist')
        /** @type {string} */
        const accentColor = getStoredColor('selected-accent-color', 'emerald')

        const shades = /** @type {const} */ ([50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950])

        /**
         * @param {string} name
         * @param {string} value
         */
        function setProperty(name, value) {
          document.documentElement.style.setProperty(name, value)
        }

        for (const shade of shades) {
          setProperty(`--t-base-${shade}`, `var(--color-${baseColor}-${shade})`)
          setProperty(`--t-accent-${shade}`, `var(--color-${accentColor}-${shade})`)
        }
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>