jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-11-14 19:40:50 -05:00
Code Issues Activity

load theme restoration script earlier in the <head>

Browse Source
This commit is contained in:
Jake Jarvis
2025-03-31 09:38:41 -04:00
parent ec7c9fae54
commit 4203516cf3
3 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
contexts/ThemeContext.tsx
View File

@@ -50,22 +50,22 @@ export const ThemeProvider = ({ children }: PropsWithChildren) => {
setTheme: setPreferredTheme,
};
return (
<ThemeContext.Provider value={providerValues}>
<script
id="restore-theme"
// unminified: https://gist.github.com/jakejarvis/79b0ec8506bc843023546d0d29861bf0
dangerouslySetInnerHTML={{
__html:
"(()=>{try{const e=document.documentElement,t='undefined'!=typeof Storage?window.localStorage.getItem('theme'):null,a=(t&&'dark'===t)??window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';e.dataset.theme=a,e.style.colorScheme=a}catch(e){}})()",
}}
/>
{children}
</ThemeContext.Provider>
);
return <ThemeContext.Provider value={providerValues}>{children}</ThemeContext.Provider>;
};
// loaded in <head> by layout.tsx to avoid blinding flash of unstyled content (FOUC). irrelevant after the first render
// since the theme provider above takes over.
// unminified JS: https://gist.github.com/jakejarvis/79b0ec8506bc843023546d0d29861bf0
export const ThemeScript = () => (
<script
id="restore-theme"
dangerouslySetInnerHTML={{
__html:
"(()=>{try{const e=document.documentElement,t='undefined'!=typeof Storage?window.localStorage.getItem('theme'):null,a=(t&&'dark'===t)??window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';e.dataset.theme=a,e.style.colorScheme=a}catch(e){}})()",
}}
/>
);
// debugging help pls
if (process.env.NODE_ENV !== "production") {
ThemeContext.displayName = "ThemeContext";