hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve custom scripts

Browse Source
This commit is contained in:
Hazem Krimi
2022-02-13 19:52:54 +01:00
parent d32afe310d
commit 4025ee960b
4 changed files with 67 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_app.tsx
-52
View File
@@ -1,7 +1,6 @@
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';
@@ -36,57 +35,6 @@ const App = ({ Component, pageProps }: AppProps) => {
return (
<>
<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>