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

set <meta name="theme-color" ...> dynamically

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-01 12:11:15 -05:00
parent b5d039b9d6
commit c420967b4c
5 changed files with 54 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
import { useState, useEffect, useCallback } from "react";
import * as config from "../../lib/config";
import BulbOffIcon from "../icons/svg/bulb-off.svg";
import BulbOnIcon from "../icons/svg/bulb-on.svg";
@@ -13,13 +14,13 @@ export const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, p
// TODO: there's probably (definitely) a cleaner way to do this, maybe with react hooks..?
export const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
// sets appropriate `<html data-theme="...">` and color-scheme CSS properties
// sets appropriate `<html data-theme="...">`, `<meta name="color-scheme" ...>`, and color-scheme CSS property
export const updateDOM = (dark: boolean) => {
const root = document.documentElement;
const theme = dark ? "dark" : "light";
root.setAttribute("data-theme", theme);
root.style.colorScheme = theme;
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);
};
export default function ThemeToggle({ className = "" }) {