jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-17 17:15:33 -04:00
Code Issues Activity

use the excellent next-themes module

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-06 10:08:24 -05:00
parent 6b756a54c1
commit 3394cac5de
11 changed files with 36 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/page-header/Menu.tsx
View File

@@ -1,5 +1,5 @@
import dynamic from "next/dynamic";
import Link from "next/link";
import ThemeToggle from "./ThemeToggle";
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
import styles from "./Menu.module.scss";
@@ -27,9 +27,6 @@ const links = [
},
];
// ensure the theme toggle isn't evaluated server-side
const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
const Menu = () => (
<ul className={styles.menu}>
{links.map((link, index) => (

71
components/page-header/ThemeToggle.tsx
View File

@@ -1,64 +1,21 @@
import { useState, useEffect, useCallback } from "react";
import * as config from "../../lib/config";
import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import { BulbOffIcon, BulbOnIcon } from "../icons";
// store preference in local storage
const storageKey = "dark_mode";
const getDarkPref = () => localStorage.getItem(storageKey);
const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, pref as unknown as string);
// use the `<html data-theme="...">` as a hint to what the theme was set to outside of the button component
// TODO: there's probably (definitely) a cleaner way to do this, maybe with react hooks..?
const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
// sets appropriate `<html data-theme="...">`, `<meta name="color-scheme" ...>`, and color-scheme CSS property
const updateDOM = (dark: boolean) => {
document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
document.documentElement.style.colorScheme = dark ? "dark" : "light";
document.head
.querySelector("meta[name=theme-color]")
?.setAttribute("content", dark ? config.themeColorDark : config.themeColorLight);
};
const ThemeToggle = ({ className = "" }) => {
// sync button up with theme and preference states after initialization
const [dark, setDark] = useState(isDark());
const [saved, setSaved] = useState(!!getDarkPref());
const [mounted, setMounted] = useState(false);
const { resolvedTheme, setTheme } = useTheme();
// real-time switching between modes based on user's system if preference isn't set (and it's supported by OS/browser)
const matchCallback = useCallback((e) => setDark(e.matches), []);
useEffect(() => {
try {
// https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
const matcher = window.matchMedia("(prefers-color-scheme: dark)");
// only listen to OS if the user hasn't specified a preference
if (!saved) {
matcher.addEventListener("change", matchCallback, true);
}
// cleanup and stop listening if/when preference is explicitly set
return () => matcher.removeEventListener("change", matchCallback, true);
} catch (e) {} // eslint-disable-line no-empty
}, [saved, matchCallback]);
// sets appropriate HTML when mode changes
useEffect(() => updateDOM(dark), [dark]);
const handleToggle = () => {
// only update the local storage preference if the user explicitly presses the lightbulb
setDarkPref(!dark);
setSaved(true);
// set theme to the opposite of current theme
setDark(!dark);
};
// avoid hydration mismatch:
// https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch
useEffect(() => setMounted(true), []);
if (!mounted) return null;
return (
<button
onClick={handleToggle}
title={dark ? "Toggle Light Mode" : "Toggle Dark Mode"}
aria-label={dark ? "Toggle Light Mode" : "Toggle Dark Mode"}
onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
title={resolvedTheme === "dark" ? "Toggle Light Mode" : "Toggle Dark Mode"}
aria-hidden={true}
style={{
border: 0,
padding: 0,
@@ -66,7 +23,11 @@ const ThemeToggle = ({ className = "" }) => {
cursor: "pointer",
}}
>
{dark ? <BulbOffIcon className={`icon ${className}`} /> : <BulbOnIcon className={`icon ${className}`} />}
{resolvedTheme === "dark" ? (
<BulbOffIcon className={`icon ${className}`} />
) : (
<BulbOnIcon className={`icon ${className}`} />
)}
</button>
);
};