Skip to content

Commit afc7965

Browse files
gaearongaearon
committed
Fix SSR and respect override
1 parent 0665f30 commit afc7965

File tree

2 files changed

+82
-72
lines changed

2 files changed

+82
-72
lines changed

‎beta/src/components/Layout/Nav/Nav.tsx

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@ import NavLink from './NavLink';
1717

1818
declare global {
1919
interface Window {
20-
__onThemeChange: () => void,
21-
__theme :string,
22-
__setPreferredTheme: (theme: string) => void
20+
__theme: string;
21+
__setPreferredTheme: (theme: string) => void;
2322
}
2423
}
2524

@@ -100,21 +99,6 @@ function inferSection(pathname: string): 'learn' | 'reference' | 'home' {
10099
export default function Nav() {
101100
const {pathname} = useRouter();
102101
const {isOpen, toggleOpen} = React.useContext(MenuContext);
103-
// TODO: persist
104-
105-
const [isDark, setIsDark] = React.useState(() => {
106-
if (typeof document === 'undefined') {
107-
return false;
108-
}
109-
return document.documentElement.classList.contains('dark');
110-
});
111-
112-
React.useEffect(() => {
113-
window.__onThemeChange = () => {
114-
setIsDark(window.__theme === 'dark' ? true : false);
115-
};
116-
}, []);
117-
118102
const section = inferSection(pathname);
119103

120104
function handleFeedback() {
@@ -152,17 +136,28 @@ export default function Nav() {
152136
Beta
153137
</div>
154138
</div>
155-
<button
156-
type="button"
157-
aria-label={isDark ? 'Use Light Mode' : 'Use Dark Mode'}
158-
onClick={() => {
159-
window.__setPreferredTheme(
160-
window.__theme === 'light' ? 'dark' : 'light'
161-
);
162-
}}
163-
className="hidden lg:flex items-center h-full pr-2">
164-
{isDark ? lightIcon : darkIcon}
165-
</button>
139+
<div className="block dark:hidden">
140+
<button
141+
type="button"
142+
aria-label="Use Dark Mode"
143+
onClick={() => {
144+
window.__setPreferredTheme('dark');
145+
}}
146+
className="hidden lg:flex items-center h-full pr-2">
147+
{darkIcon}
148+
</button>
149+
</div>
150+
<div className="hidden dark:block">
151+
<button
152+
type="button"
153+
aria-label="Use Light Mode"
154+
onClick={() => {
155+
window.__setPreferredTheme('light');
156+
}}
157+
className="hidden lg:flex items-center h-full pr-2">
158+
{lightIcon}
159+
</button>
160+
</div>
166161
</div>
167162
<div className="px-0 pt-2 w-full 2xl:max-w-xs hidden lg:flex items-center self-center border-b-0 lg:border-b border-border dark:border-border-dark">
168163
<NavLink href="/" isActive={section === 'home'}>
@@ -183,17 +178,28 @@ export default function Nav() {
183178
onClick={handleFeedback}>
184179
{feedbackIcon}
185180
</button>
186-
<button
187-
type="button"
188-
aria-label={isDark ? 'Use Light Mode' : 'Use Dark Mode'}
189-
onClick={() => {
190-
window.__setPreferredTheme(
191-
window.__theme === 'light' ? 'dark' : 'light'
192-
);
193-
}}
194-
className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
195-
{isDark ? lightIcon : darkIcon}
196-
</button>
181+
<div className="block dark:hidden">
182+
<button
183+
type="button"
184+
aria-label="Use Dark Mode"
185+
onClick={() => {
186+
window.__setPreferredTheme('dark');
187+
}}
188+
className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
189+
{darkIcon}
190+
</button>
191+
</div>
192+
<div className="hidden dark:block">
193+
<button
194+
type="button"
195+
aria-label="Use Light Mode"
196+
onClick={() => {
197+
window.__setPreferredTheme('light');
198+
}}
199+
className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
200+
{lightIcon}
201+
</button>
202+
</div>
197203
</div>
198204
</nav>
199205
);

‎beta/src/pages/_document.tsx

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -14,40 +14,44 @@ class MyDocument extends Document {
1414
<body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
1515
<script
1616
dangerouslySetInnerHTML={{
17-
__html: `(function () {
18-
window.__onThemeChange = function () {};
19-
function setTheme(newTheme) {
20-
window.__theme = newTheme;
21-
preferredTheme = newTheme;
22-
23-
document.documentElement.className = newTheme;
24-
window.__onThemeChange();
25-
}
26-
27-
var preferredTheme;
28-
try {
29-
preferredTheme = localStorage.getItem("theme");
30-
} catch (err) {
31-
console.error("Couldn't fetch theme from local storage")
32-
33-
}
34-
35-
window.__setPreferredTheme = function (newTheme) {
36-
setTheme(newTheme);
17+
__html: `
18+
(function () {
19+
function setTheme(newTheme) {
20+
window.__theme = newTheme;
21+
if (newTheme === 'dark') {
22+
document.documentElement.classList.add('dark');
23+
} else if (newTheme === 'light') {
24+
document.documentElement.classList.remove('dark');
25+
}
26+
}
27+
28+
var preferredTheme;
3729
try {
38-
localStorage.setItem("theme", newTheme);
39-
} catch (err) {
40-
console.error("Couldn't set theme in local storage")
30+
preferredTheme = localStorage.getItem('theme');
31+
} catch (err) { }
32+
33+
window.__setPreferredTheme = function(newTheme) {
34+
preferredTheme = newTheme;
35+
setTheme(newTheme);
36+
try {
37+
localStorage.setItem('theme', newTheme);
38+
} catch (err) { }
39+
};
40+
41+
var initialTheme = preferredTheme;
42+
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
43+
44+
if (!initialTheme) {
45+
initialTheme = darkQuery.matches ? 'dark' : 'light';
4146
}
42-
};
43-
44-
var darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
45-
darkQuery.addListener(function (e) {
46-
window.__setPreferredTheme(e.matches ? "dark" : "light");
47-
});
48-
49-
setTheme(preferredTheme || (darkQuery.matches ? "dark" : "light"));
50-
})();
47+
setTheme(initialTheme);
48+
49+
darkQuery.addListener(function (e) {
50+
if (!preferredTheme) {
51+
setTheme(e.matches ? 'dark' : 'light');
52+
}
53+
});
54+
})();
5155
`,
5256
}}
5357
/>

0 commit comments

Comments
 (0)