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

consistent use of arrow functions/default exports

Browse Source
This commit is contained in:
jake
2022-01-02 15:16:07 -05:00
parent cd5a1b191a
commit ca614e1a1a
34 changed files with 2956 additions and 2985 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/page-header/ThemeToggle.tsx
+8 -6
View File
@@ -6,15 +6,15 @@ import styles from "./ThemeToggle.module.scss";
// store preference in local storage
const storageKey = "dark_mode";
export const getDarkPref = () => localStorage.getItem(storageKey);
export const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, pref as unknown as string);
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..?
export const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
// sets appropriate `<html data-theme="...">`, `<meta name="color-scheme" ...>`, and color-scheme CSS property
export const updateDOM = (dark: boolean) => {
const updateDOM = (dark: boolean) => {
document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
document.documentElement.style.colorScheme = dark ? "dark" : "light";
document.head
@@ -22,7 +22,7 @@ export const updateDOM = (dark: boolean) => {
?.setAttribute("content", dark ? config.themeColorDark : config.themeColorLight);
};
export default function ThemeToggle({ className = "" }) {
const ThemeToggle = ({ className = "" }) => {
// sync button up with theme and preference states after initialization
const [dark, setDark] = useState(isDark());
const [saved, setSaved] = useState(!!getDarkPref());
@@ -66,4 +66,6 @@ export default function ThemeToggle({ className = "" }) {
{dark ? <BulbOffIcon className={`icon ${className}`} /> : <BulbOnIcon className={`icon ${className}`} />}
</button>
);
}
};
export default ThemeToggle;