skillshare-app/index.html at main · runkids/skillshare-app · 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/image.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Skillshare App</title>
    <script>
      // Initialize theme before page renders to prevent flash
      // MUST match ThemeContext.tsx storage keys and logic
      (function() {
        const THEME_MODE_KEY = 'skillshare-theme-preference';
        const LEGACY_THEME_KEY = 'skillshare-theme';

        // Background colors matching index.css CSS variables.
        // IMPORTANT: These values MUST be kept in sync with --color-paper in :root and .dark in index.css.
        const DARK_BG = '#111110';  // --color-paper in .dark
        const LIGHT_BG = '#f7f6f3'; // --color-paper in :root

        // Determine theme mode (matches ThemeContext logic)
        let mode;
        try {
          mode = localStorage.getItem(THEME_MODE_KEY);
        } catch (e) {
          mode = 'system';
        }

        if (!mode || !['light', 'dark', 'system'].includes(mode)) {
          // Check legacy key for backward compatibility
          let legacy;
          try {
            legacy = localStorage.getItem(LEGACY_THEME_KEY);
          } catch (e) {
            // localStorage inaccessible, legacy remains undefined
          }

          if (legacy && ['light', 'dark'].includes(legacy)) {
            mode = legacy;
          } else {
            mode = 'system';
          }
        }

        // Resolve to actual theme
        const isDark = (mode === 'system')
          ? window.matchMedia('(prefers-color-scheme: dark)').matches
          : (mode === 'dark');

        // Apply theme class
        if (isDark) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }

        // Set background color immediately to prevent white flash
        document.documentElement.style.backgroundColor = isDark ? DARK_BG : LIGHT_BG;

        // Force clean mode — remove any leftover playful theme
        document.documentElement.removeAttribute('data-theme');
        try { localStorage.setItem('skillshare-style', 'clean'); } catch(e) {}
      })();
    </script>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>