Fix color theme

2026-05-01 18:00:26 +00:00 · 2021-09-04 23:29:01 +01:00
parent 5d0f99d18d
commit 0fcaeb2cda
2 changed files with 44 additions and 2 deletions
@@ -43,6 +43,36 @@ class Doc extends Document {
 							`
 						}}
 					/>
+					<script
+						dangerouslySetInnerHTML={{
+							__html: `
+								function getInitialColorMode() {
+									const persistedColorPreference = window.localStorage.getItem('theme');
+									const hasPersistedPreference = typeof persistedColorPreference === 'string';
+
+									if (hasPersistedPreference) {
+										return persistedColorPreference;
+									}
+
+									const mql = window.matchMedia('(prefers-color-scheme: dark)');
+									const hasMediaQueryPreference = typeof mql.matches === 'boolean';
+
+									if (hasMediaQueryPreference) {
+										return mql.matches ? 'dark' : 'light';
+									}
+
+									return 'light';
+								}
+
+								(() => {
+									const colorMode = getInitialColorMode();
+									const root = document.documentElement;
+
+									root.style.setProperty('--theme', colorMode);
+								})();
+							`
+						}}
+					/>
 				</Head>
 				<body>
 					<Main />