jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-07-22 21:55:57 -04:00
Code Issues Activity

rename resolvedTheme -> activeTheme

Browse Source
This commit is contained in:
jake
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
components/Captcha/Captcha.tsx
+2 -2
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}
/>
)}
components/Comments/Comments.tsx
+2 -2
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>
);
components/Layout/Layout.tsx
+2 -2
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}>
components/ThemeScript/ThemeScript.tsx
+2 -2
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));
components/ThemeToggle/ThemeToggle.tsx
+8 -8
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}
/>
components/TweetEmbed/TweetEmbed.tsx
+2 -2
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,
}}
/>