Skip to content

Take system's theme for the beta site #4022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 4, 2021
Merged

Take system's theme for the beta site #4022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ce58bc4
Take system's theme for the site
Oct 29, 2021
8d192b7
Add IIFE for dark mode in document load and preserve in localStorage
Nov 4, 2021
0665f30
Add types
Nov 4, 2021
afc7965
Fix SSR and respect override
gaearon Nov 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 51 additions & 38 deletions beta/src/components/Layout/Nav/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,13 @@ import {MenuContext} from 'components/useMenu';
import {Logo} from '../../Logo';
import NavLink from './NavLink';

declare global {
interface Window {
__theme: string;
__setPreferredTheme: (theme: string) => void;
}
}

const feedbackIcon = (
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -92,14 +99,6 @@ function inferSection(pathname: string): 'learn' | 'reference' | 'home' {
export default function Nav() {
const {pathname} = useRouter();
const {isOpen, toggleOpen} = React.useContext(MenuContext);
// TODO: persist
// TODO: respect system pref
const [isDark, setIsDark] = React.useState(() => {
if (typeof document === 'undefined') {
return false;
}
return document.documentElement.classList.contains('dark');
});
const section = inferSection(pathname);

function handleFeedback() {
Expand Down Expand Up @@ -137,21 +136,28 @@ export default function Nav() {
Beta
</div>
</div>
<button
type="button"
aria-label={isDark ? 'Use Light Mode' : 'Use Dark Mode'}
onClick={() => {
if (isDark) {
document.documentElement.classList.remove('dark');
setIsDark(false);
} else {
document.documentElement.classList.add('dark');
setIsDark(true);
}
}}
className="hidden lg:flex items-center h-full pr-2">
{isDark ? lightIcon : darkIcon}
</button>
<div className="block dark:hidden">
<button
type="button"
aria-label="Use Dark Mode"
onClick={() => {
window.__setPreferredTheme('dark');
}}
className="hidden lg:flex items-center h-full pr-2">
{darkIcon}
</button>
</div>
<div className="hidden dark:block">
<button
type="button"
aria-label="Use Light Mode"
onClick={() => {
window.__setPreferredTheme('light');
}}
className="hidden lg:flex items-center h-full pr-2">
{lightIcon}
</button>
</div>
</div>
<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">
<NavLink href="/" isActive={section === 'home'}>
Expand All @@ -172,21 +178,28 @@ export default function Nav() {
onClick={handleFeedback}>
{feedbackIcon}
</button>
<button
type="button"
aria-label={isDark ? 'Use Light Mode' : 'Use Dark Mode'}
onClick={() => {
if (isDark) {
document.documentElement.classList.remove('dark');
setIsDark(false);
} else {
document.documentElement.classList.add('dark');
setIsDark(true);
}
}}
className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
{isDark ? lightIcon : darkIcon}
</button>
<div className="block dark:hidden">
<button
type="button"
aria-label="Use Dark Mode"
onClick={() => {
window.__setPreferredTheme('dark');
}}
className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
{darkIcon}
</button>
</div>
<div className="hidden dark:block">
<button
type="button"
aria-label="Use Light Mode"
onClick={() => {
window.__setPreferredTheme('light');
}}
className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
{lightIcon}
</button>
</div>
</div>
</nav>
);
Expand Down
43 changes: 43 additions & 0 deletions beta/src/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,49 @@ class MyDocument extends Document {
<Html lang="en">
<Head />
<body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
<script
dangerouslySetInnerHTML={{
__html: `
(function () {
function setTheme(newTheme) {
window.__theme = newTheme;
if (newTheme === 'dark') {
document.documentElement.classList.add('dark');
} else if (newTheme === 'light') {
document.documentElement.classList.remove('dark');
}
}

var preferredTheme;
try {
preferredTheme = localStorage.getItem('theme');
} catch (err) { }

window.__setPreferredTheme = function(newTheme) {
preferredTheme = newTheme;
setTheme(newTheme);
try {
localStorage.setItem('theme', newTheme);
} catch (err) { }
};

var initialTheme = preferredTheme;
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');

if (!initialTheme) {
initialTheme = darkQuery.matches ? 'dark' : 'light';
}
setTheme(initialTheme);

darkQuery.addListener(function (e) {
if (!preferredTheme) {
setTheme(e.matches ? 'dark' : 'light');
}
});
})();
`,
}}
/>
<Main />
<NextScript />
</body>
Expand Down