diff --git a/components/contact/ContactForm.tsx b/components/contact/ContactForm.tsx index 17dce021..f3fb3e9e 100644 --- a/components/contact/ContactForm.tsx +++ b/components/contact/ContactForm.tsx @@ -1,4 +1,5 @@ import { useState } from "react"; +import { useTheme } from "next-themes"; import HCaptcha from "@hcaptcha/react-hcaptcha"; import { CheckOcticon, XOcticon } from "../icons/octicons"; import { SendIcon } from "../icons"; @@ -6,6 +7,7 @@ import { SendIcon } from "../icons"; import styles from "./ContactForm.module.scss"; const ContactForm = () => { + const { resolvedTheme } = useTheme(); // status/feedback: const [status, setStatus] = useState({ success: false, message: "" }); // keep track of fetch: @@ -106,6 +108,7 @@ const ContactForm = () => { true} // this is allegedly optional but a function undefined error is thrown without it /> diff --git a/components/mdxComponents.tsx b/components/mdxComponents.tsx index 61a08013..5e795b27 100644 --- a/components/mdxComponents.tsx +++ b/components/mdxComponents.tsx @@ -1,6 +1,7 @@ import dynamic from "next/dynamic"; import Link from "next/link"; import Image from "next/image"; +import { useTheme } from "next-themes"; import type { LinkProps } from "next/link"; import type { ImageProps } from "next/image"; @@ -57,6 +58,7 @@ const CustomCode = (props: any) => { const CustomTweet = (props: { id: string }) => { const TweetEmbed = dynamic(() => import("react-tweet-embed")); + const { resolvedTheme } = useTheme(); return ( { options={{ dnt: true, align: "center", + theme: resolvedTheme === "dark" ? "dark" : "light", }} /> ); diff --git a/components/page-header/Menu.tsx b/components/page-header/Menu.tsx index 0e41134d..31effc2d 100644 --- a/components/page-header/Menu.tsx +++ b/components/page-header/Menu.tsx @@ -1,5 +1,5 @@ -import dynamic from "next/dynamic"; import Link from "next/link"; +import ThemeToggle from "./ThemeToggle"; import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons"; import styles from "./Menu.module.scss"; @@ -27,9 +27,6 @@ const links = [ }, ]; -// ensure the theme toggle isn't evaluated server-side -const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false }); - const Menu = () => (