jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 01:06:40 -04:00
Code Issues Activity

rename resolvedTheme -> activeTheme

Browse Source
This commit is contained in:
Jake Jarvis
2022-05-04 10:48:41 -04:00
parent ef3071dd99
commit d67428b043
8 changed files with 38 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/Captcha/Captcha.tsx
View File

@ -22,7 +22,7 @@ export type CaptchaProps = {
const Captcha = ({ size = "normal", theme, className, ...rest }: CaptchaProps) => {
const hasMounted = useHasMounted();
const { resolvedTheme } = useTheme();
const { activeTheme } = useTheme();
return (
<div className={className}>
@ -32,7 +32,7 @@ const Captcha = ({ size = "normal", theme, className, ...rest }: CaptchaProps) =
reCaptchaCompat={false}
tabIndex={0}
size={size}
theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
theme={theme || (activeTheme === "dark" ? "dark" : "light")}
{...rest}
/>
)}

4
components/Comments/Comments.tsx
View File

@ -18,7 +18,7 @@ export type CommentsProps = ComponentProps<typeof Wrapper> & {
};
const Comments = ({ title, ...rest }: CommentsProps) => {
const { resolvedTheme } = useTheme();
const { activeTheme } = useTheme();
// TODO: use custom `<Loading />` spinner component during suspense
return (
@ -29,7 +29,7 @@ const Comments = ({ title, ...rest }: CommentsProps) => {
mapping="specific"
reactionsEnabled="1"
emitMetadata="0"
theme={resolvedTheme === "dark" ? "dark" : "light"}
theme={activeTheme === "dark" ? "dark" : "light"}
/>
</Wrapper>
);

4
components/Layout/Layout.tsx
View File

@ -33,13 +33,13 @@ export type LayoutProps = ComponentProps<typeof Flex> & {
};
const Layout = ({ container = true, children, ...rest }: LayoutProps) => {
const { resolvedTheme } = useTheme();
const { activeTheme } = useTheme();
return (
<>
<Head>
{/* dynamically set browser theme color to match the background color; default to light for SSR */}
<meta name="theme-color" content={themeColors[resolvedTheme === "dark" ? "dark" : "light"]} />
<meta name="theme-color" content={themeColors[activeTheme === "dark" ? "dark" : "light"]} />
</Head>
<Flex {...rest}>

4
components/ThemeScript/ThemeScript.tsx
View File

@ -1,13 +1,13 @@
import { useMemo } from "react";
import { minify } from "uglify-js";
import { clientScript } from "./client";
import { darkModeQuery, themeStorageKey, themeClassNames } from "../../lib/config/themes";
import { themeClassNames, themeStorageKey } from "../../lib/config/themes";
const ThemeScript = () => {
const minified = useMemo(() => {
// since the client function will end up being injected as a plain dumb string, we need to set dynamic values here:
const functionString = String(clientScript)
.replace('"__MEDIA_QUERY__"', `"${darkModeQuery}"`)
.replace('"__MEDIA_QUERY__"', `"(prefers-color-scheme: dark)"`)
.replace('"__STORAGE_KEY__"', `"${themeStorageKey}"`)
.replace('"__CLASS_NAMES__"', JSON.stringify(themeClassNames));

16
components/ThemeToggle/ThemeToggle.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, memo } from "react";
import { useEffect, useId, memo } from "react";
import { useMedia } from "react-use";
import { useSpring, animated, Globals } from "@react-spring/web";
import { useTheme } from "../../hooks/use-theme";
@ -19,17 +19,17 @@ const Button = styled("button", {
});
export type ThemeToggleProps = {
id?: string;
className?: string;
};
const ThemeToggle = ({ id = "nav", className }: ThemeToggleProps) => {
const ThemeToggle = ({ className }: ThemeToggleProps) => {
const hasMounted = useHasMounted();
const { activeTheme, setTheme } = useTheme();
const prefersReducedMotion = useMedia("(prefers-reduced-motion: reduce)", false);
const { resolvedTheme, setTheme } = useTheme();
const maskId = useId(); // SSR-safe ID to cross-reference areas of the SVG
// default to light since `resolvedTheme` might be undefined
const safeTheme = resolvedTheme === "dark" ? "dark" : "light";
// default to light since `activeTheme` might be undefined
const safeTheme = activeTheme === "dark" ? "dark" : "light";
// accessibility: skip animation if user prefers reduced motion
useEffect(() => {
@ -120,7 +120,7 @@ const ThemeToggle = ({ id = "nav", className }: ThemeToggleProps) => {
}}
className={className}
>
<mask id={`moon-mask-${id}`}>
<mask id={`mask-${maskId}`}>
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<animated.circle
r="9"
@ -135,7 +135,7 @@ const ThemeToggle = ({ id = "nav", className }: ThemeToggleProps) => {
cx="12"
cy="12"
fill="currentColor"
mask={`url(#moon-mask-${id})`}
mask={`url(#mask-${maskId})`}
// @ts-ignore
style={centerCircleProps}
/>

4
components/TweetEmbed/TweetEmbed.tsx
View File

@ -8,7 +8,7 @@ export type TweetEmbedProps = {
};
const TweetEmbed = ({ id, options }: TweetEmbedProps) => {
const { resolvedTheme } = useTheme();
const { activeTheme } = useTheme();
return (
<TwitterTweetEmbed
@ -16,7 +16,7 @@ const TweetEmbed = ({ id, options }: TweetEmbedProps) => {
options={{
dnt: true,
align: "center",
theme: resolvedTheme === "dark" ? "dark" : "light",
theme: activeTheme === "dark" ? "dark" : "light",
...options,
}}
/>

42
contexts/ThemeContext.tsx
View File

@ -1,20 +1,16 @@
import { createContext, useCallback, useEffect, useState } from "react";
import { useLocalStorage, useMedia } from "react-use";
import { darkModeQuery, themeStorageKey } from "../lib/config/themes";
import { themeStorageKey } from "../lib/config/themes";
import type { Context, PropsWithChildren } from "react";
export const ThemeContext: Context<{
/** Update the theme manually. */
setTheme?: (theme: string) => void;
/** The user's website theme setting ("light" or "dark", or undefined if unset). */
preferredTheme?: string;
/**
* If the theme setting is undefined, this returns whether the system preference resolved to "light" or "dark". If the
* preference is set, the value is identical to `preferredTheme`.
*
* Note to self: you probably want this.
* If the user's theme preference is unset, this returns whether the system preference resolved to "light" or "dark".
* If the user's theme preference is set, the preference is returned instead, regardless of their system's theme.
*/
resolvedTheme?: string;
activeTheme?: "light" | "dark";
/** Update the theme manually and save to local storage. */
setTheme?: (theme: string) => void;
}> = createContext({});
// provider used once in _app.tsx to wrap entire app
@ -27,12 +23,13 @@ export const ThemeProvider = ({
[themeName: string]: string;
};
}>) => {
// keep track of if/when the user has set their theme *here*:
// keep track of if/when the user has set their theme *on this site*
const [preferredTheme, setPreferredTheme] = useLocalStorage(themeStorageKey, null, { raw: true });
// save the end result no matter how we got there (by preference or by system):
const [resolvedTheme, setResolvedTheme] = useState("");
// keep track of changes to the user's OS/browser dark mode setting
const [systemTheme, setSystemTheme] = useState("");
// hook into system `prefers-dark-mode` setting
const isSystemDark = useMedia(darkModeQuery, false);
// https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query
const isSystemDark = useMedia("(prefers-color-scheme: dark)", false);
// get the theme names (light, dark) via passed-in classnames' keys
const themeNames = Object.keys(classNames);
@ -54,28 +51,31 @@ export const ThemeProvider = ({
// listen for changes in OS preference
useEffect(() => {
const systemTheme = isSystemDark ? "dark" : "light";
// translate boolean to theme string
const systemResolved = isSystemDark ? "dark" : "light";
// keep track of the resolved theme whether or not we change it below
setResolvedTheme(systemTheme);
// keep track of the system theme whether or not we override it manually
setSystemTheme(systemResolved);
// only actually change the theme if preference is unset (and *don't* save new theme to storage)
if (!preferredTheme || !themeNames.includes(preferredTheme)) {
changeTheme(systemTheme, false);
changeTheme(systemResolved, false);
}
}, [changeTheme, themeNames, preferredTheme, isSystemDark]);
// color-scheme handling (tells browser how to render built-in elements like forms, scrollbars, etc.)
useEffect(() => {
// only "light" and "dark" are valid here
const colorScheme = ["light", "dark"].includes(preferredTheme) ? preferredTheme : resolvedTheme;
// https://web.dev/color-scheme/#the-color-scheme-css-property
const colorScheme = ["light", "dark"].includes(preferredTheme) ? preferredTheme : systemTheme;
document.documentElement.style?.setProperty("color-scheme", colorScheme);
}, [preferredTheme, resolvedTheme]);
}, [preferredTheme, systemTheme]);
return (
<ThemeContext.Provider
value={{
activeTheme: themeNames.includes(preferredTheme) ? preferredTheme : systemTheme,
setTheme: useCallback(
(theme: string) => {
// force save to local storage
@ -83,8 +83,6 @@ export const ThemeProvider = ({
},
[changeTheme]
),
preferredTheme: themeNames.includes(preferredTheme) ? preferredTheme : undefined,
resolvedTheme: themeNames.includes(preferredTheme) ? preferredTheme : resolvedTheme,
}}
>
{children}

3
lib/config/themes.ts
View File

@ -12,8 +12,5 @@ export const themeColors = {
dark: darkTheme.colors.backgroundOuter?.value,
};
// https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query
export const darkModeQuery = "(prefers-color-scheme: dark)";
// local storage key
export const themeStorageKey = "preferred-theme";