questiongen/index.html at main · flandyw/questiongen · 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"
    />
    <link rel="icon" href="data:," />
    <title>Question Generator</title>
    <script>
      (function () {
        try {
          const uiPrefs = JSON.parse(
            localStorage.getItem('questiongen-ui-prefs') || '{}',
          );
          const systemDark = window.matchMedia(
            '(prefers-color-scheme: dark)',
          ).matches;

          // 1. Handle Dark/Light Mode
          const mode =
            uiPrefs.mode || localStorage.getItem('questiongen-theme') || 'dark';
          const isDark = mode === 'dark' || (mode === 'system' && systemDark);

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

          // 2. Handle Design Theme
          let designTheme = uiPrefs.designTheme;
          if (!designTheme) {
            try {
              const appState = JSON.parse(
                localStorage.getItem('questiongen.appState') || '{}',
              );
              designTheme = appState.settings?.theme;
            } catch (e) {}
          }

          // Migrate deprecated theme names for instant first-paint correctness
          const migrationMap = {
            claude: 'light',
            blue: 'light',
            purple: 'light',
            pink: 'light',
            zen: 'light',
            nord: 'light',
            slate: 'light',
            midnight: 'dark',
            forest: 'dark',
            'rose-pine': 'dark',
            sunset: 'dark',
          };
          const resolvedTheme =
            migrationMap[designTheme] || designTheme || 'light';

          document.documentElement.setAttribute(
            'data-design-theme',
            resolvedTheme,
          );

          // Apply cached custom theme CSS vars immediately for true first-paint custom theming.
          if (resolvedTheme === 'custom' && uiPrefs.customThemeVars) {
            Object.entries(uiPrefs.customThemeVars).forEach(([key, value]) => {
              if (typeof key === 'string' && typeof value === 'string') {
                document.documentElement.style.setProperty(key, value);
              }
            });
          }

          // 3. Set background color immediately to avoid white flash
          // Matches the new Light theme token defaults.
          document.documentElement.style.backgroundColor =
            resolvedTheme === 'custom' &&
            uiPrefs.customThemeVars &&
            typeof uiPrefs.customThemeVars['--background'] === 'string'
              ? uiPrefs.customThemeVars['--background']
              : isDark
                ? 'oklch(0.2 0.02 90)'
                : 'oklch(0.985 0.01 90)';
        } catch (e) {
          console.error('Theme injector failed', e);
        }
      })();
    </script>
  </head>

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