refactor(theme): switch theme detection to use class

discordjs · Jul 18, 2022 · 70dd757 · 70dd757 · vercel · Jul 18, 2022
1 parent b5d4b2d
commit 70dd757
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/website/src/root.tsx b/packages/website/src/root.tsx
@@ -24,6 +24,17 @@ export default function App() {
 				<Links />
 			</head>
 			<body>
+				<script
+					dangerouslySetInnerHTML={{
+						__html: `(() => {
+							const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+							const persistedColorPreference = localStorage.getItem('theme') || 'auto';
+							if (persistedColorPreference === 'dark' || (prefersDarkMode && persistedColorPreference !== 'light')) {
+								document.documentElement.classList.toggle('dark', true);
+							}
+						})();`,
+					}}
+				/>
 				<Outlet />
 				<ScrollRestoration />
 				<Scripts />

diff --git a/packages/website/unocss.config.ts b/packages/website/unocss.config.ts
@@ -8,9 +8,7 @@ export default defineConfig({
 		},
 	},
 	presets: [
-		presetUno({
-			dark: 'media',
-		}),
+		presetUno({ dark: 'class' }),
 		presetWebFonts({
 			provider: 'google',
 			fonts: {