Improve custom scripts

utils/gtag.ts

@@ -17,3 +17,16 @@ export const event = ({ action, category, label, value }: any) => {
 		value: value
 	});
 };
+
+export const initAnalytics = () => `
+	window.dataLayer = window.dataLayer || [];
+						
+	function gtag() {
+		dataLayer.push(arguments);
+	}
+	
+	gtag('js', new Date());
+	gtag('config', ${GOOGLE_ANALYTICS_KEY}, {
+		page_path: window.location.pathname,
+	});
+`;

utils/styles.ts

@@ -0,0 +1,45 @@
+export const initStyles = () => `
+  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);
+  })();
+`;