Fix FOUC

2026-05-01 18:00:26 +00:00 · 2022-01-29 19:00:55 +01:00
parent 0a396bc03b
commit 14e1970a56
7 changed files with 127 additions and 119 deletions
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';

 import type { AppProps } from 'next/app';
+import Script from 'next/script';
 import Head from 'next/head';
 import { useRouter } from 'next/router';

@@ -35,7 +36,80 @@ const App = ({ Component, pageProps }: AppProps) => {

 	return (
 		<>
+			<Script
+				strategy='afterInteractive'
+				src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS_KEY}`}
+			/>
+			<Script
+				id='analytics-init'
+				strategy='afterInteractive'
+				dangerouslySetInnerHTML={{
+					__html: `
+						window.dataLayer = window.dataLayer || [];
+						
+						function gtag() {
+							dataLayer.push(arguments);
+						}
+						
+						gtag('js', new Date());
+						gtag('config', ${process.env.GOOGLE_ANALYTICS_KEY});
+					`
+				}}
+			/>
+			<Script
+				id='styles-init'
+				strategy='afterInteractive'
+				dangerouslySetInnerHTML={{
+					__html: `
+						function getInitialThemeMode() {
+							const persistedColorPreference = window.localStorage.getItem('mode');
+							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 mode = getInitialThemeMode();
+							const root = document.documentElement;
+							const lightFavicon = document.querySelector('link#light-favicon');
+							const darkFavicon = document.querySelector('link#dark-favicon');
+
+							root.style.setProperty('--mode', mode);
+							root.style.setProperty(
+								'--background',
+								mode === 'light' ? '#F9F9F9' : '#262626'
+							);
+							root.style.setProperty(
+								'--secondary-background',
+								mode === 'light' ? 'white' : '#2F2F2F'
+							);
+							root.style.setProperty(
+								'--text',
+								mode === 'light' ? 'black' : 'white'
+							);
+							root.style.setProperty(
+								'--text-inverted',
+								mode === 'light' ? 'white' : 'black'
+							);
+							document.head.append(mode === 'light' ? darkFavicon : lightFavicon);
+						})();
+					`
+				}}
+			/>
 			<Head>
+				<link rel='shortcut icon' href='light-favicon.png' id='light-favicon'></link>
+				<link rel='shortcut icon' href='dark-favicon.png' id='dark-favicon'></link>
 				<link rel='preconnect' href='https://fonts.gstatic.com' />
 				<link
 					href='https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap'