jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 15:16:21 -04:00
Code Issues

restore live theme switching when system setting changes

Browse Source 
TODO: removing the event listener is infuriatingly not cooperating
This commit is contained in:
Jake Jarvis 2021-12-16 09:25:47 -05:00
parent 2377fbfdf2
commit fe1a10d437
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/js/restore-theme.js
View File

@ -14,8 +14,4 @@ try {
cl.remove("light"); cl.remove("light");
cl.add("dark"); cl.add("dark");
} }
// TODO: fix real-time switching (works but bulb icon isn't updated)
// window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => e.matches && setDark(true));
// window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", (e) => e.matches && setDark(false));
} catch (error) {} } catch (error) {}

19
assets/js/src/components/ThemeToggle.js
View File

@ -1,14 +1,26 @@
import { h } from "preact"; import { h } from "preact";
import { useState, useEffect } from "preact/hooks"; import { useState, useEffect, useCallback } from "preact/hooks";
import { isDark, setDarkPref } from "../utils/theme.js"; import { isDark, getDarkPref, setDarkPref } from "../utils/theme.js";
// react components: // react components:
import BulbOn from "../assets/bulb-on.svg"; import BulbOn from "../assets/bulb-on.svg";
import BulbOff from "../assets/bulb-off.svg"; import BulbOff from "../assets/bulb-off.svg";
const ThemeToggle = () => { const ThemeToggle = () => {
// sync button up with theme state after initialization // sync button up with theme and preference states after initialization
const [dark, setDark] = useState(isDark()); const [dark, setDark] = useState(isDark());
const [saved, setSaved] = useState(!!getDarkPref());
// real-time switching between modes if preference isn't set (and it's supported by OS/browser)
const callback = useCallback((e) => setDark(e.matches), []);
useEffect(() => {
if (saved) {
// TODO: FIX THIS...
window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", callback, true);
} else {
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", callback, true);
}
}, [saved, callback]);
useEffect(() => { useEffect(() => {
// sets appropriate `<html class="...">` // sets appropriate `<html class="...">`
@ -19,6 +31,7 @@ const ThemeToggle = () => {
const handleToggle = () => { const handleToggle = () => {
// only update the local storage preference if the user explicitly presses the lightbulb // only update the local storage preference if the user explicitly presses the lightbulb
setDarkPref(!dark); setDarkPref(!dark);
setSaved(true);
// set theme to the opposite of current theme // set theme to the opposite of current theme
setDark(!dark); setDark(!dark);