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

Fix FOUC

Browse Source
This commit is contained in:
Hazem Krimi
2022-01-29 19:00:55 +01:00
parent 0a396bc03b
commit 14e1970a56
7 changed files with 127 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_document.tsx
+3 -82
View File
@@ -1,15 +1,15 @@
import Document, { Html, Head, Main, NextScript } from 'next/document';
import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
class Doc extends Document {
static async getInitialProps(ctx: any) {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App: any) => (props: any) => sheet.collectStyles(<App {...props} />)
enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
@@ -26,85 +26,6 @@ class Doc extends Document {
sheet.seal();
}
}
render() {
return (
<Html>
<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>
<script async src='https://www.googletagmanager.com/gtag/js?id=G-FMD81GLKS3'></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', ${process.env.GOOGLE_ANALYTICS_KEY});
`
}}
/>
<script
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>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default Doc;