2022-09-11 19:37:24 +05:30
|
|
|
import Document, { Html, Head, Main, NextScript } from 'next/document';
|
|
|
|
|
|
|
|
|
|
// for preventing Flash of inAccurate coloR Theme(fart)
|
|
|
|
|
// chris coyier came up with that acronym(https://css-tricks.com/flash-of-inaccurate-color-theme-fart/)
|
|
|
|
|
const setInitialTheme = `
|
2022-12-31 22:02:24 +05:30
|
|
|
(() => {
|
|
|
|
|
document.documentElement.dataset.js = true;
|
2023-01-22 21:13:09 +05:30
|
|
|
const isLocalStorageAvailable = () => {
|
|
|
|
|
try {
|
|
|
|
|
window.localStorage.getItem('test');
|
|
|
|
|
return true;
|
|
|
|
|
} catch (e) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-12-31 22:02:24 +05:30
|
|
|
let theme = 'light';
|
|
|
|
|
let themeColor = '#ffe5ef';
|
2023-01-22 21:13:09 +05:30
|
|
|
const userPrefersTheme = isLocalStorageAvailable() ? window.localStorage.getItem('theme') : null;
|
2022-12-31 22:02:24 +05:30
|
|
|
const browserPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
|
if (userPrefersTheme) theme = userPrefersTheme;
|
|
|
|
|
else if (browserPrefersDarkTheme) theme = 'dark';
|
|
|
|
|
if(theme === 'dark') themeColor = '#141c2e';
|
|
|
|
|
document.documentElement.dataset.theme = theme;
|
|
|
|
|
document.querySelector('meta[name="theme-color"]').setAttribute('content', themeColor);
|
2022-09-11 19:37:24 +05:30
|
|
|
})();
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const ModifiedDocument = class extends Document {
|
|
|
|
|
static async getInitialProps(ctx: any) {
|
|
|
|
|
const initialProps = await Document.getInitialProps(ctx);
|
|
|
|
|
return { ...initialProps };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<Html lang='en'>
|
|
|
|
|
<Head />
|
|
|
|
|
<body>
|
|
|
|
|
<script dangerouslySetInnerHTML={{ __html: setInitialTheme }} />
|
|
|
|
|
<Main />
|
|
|
|
|
<NextScript />
|
|
|
|
|
</body>
|
|
|
|
|
</Html>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ModifiedDocument;
|
