From 218097539a283f5e42f5e5c4d7df696126ee96ad Mon Sep 17 00:00:00 2001 From: Travis Fischer Date: Fri, 15 Apr 2022 21:57:29 -0400 Subject: [PATCH] feat: replace use-dark-mode with next-themes --- components/Footer.tsx | 10 +- components/NotionPage.tsx | 6 +- components/NotionPageHeader.tsx | 12 +- components/PageSocial.module.css | 2 +- package.json | 2 +- pages/_app.tsx | 9 +- pages/_document.tsx | 45 - site.config.ts | 24 +- styles/notion.css | 22 +- styles/prism-theme.css | 18 +- yarn.lock | 7183 ++++++++++++++---------------- 11 files changed, 3474 insertions(+), 3859 deletions(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index bbda13b..f7dae2e 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import useDarkMode from '@fisch0920/use-dark-mode' +import { useTheme } from 'next-themes' import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter' import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu' import { FaGithub } from '@react-icons/all-files/fa/FaGithub' @@ -14,14 +14,14 @@ import styles from './styles.module.css' export const FooterImpl: React.FC = () => { const [hasMounted, setHasMounted] = React.useState(false) - const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' }) + const { setTheme, resolvedTheme } = useTheme() const onToggleDarkMode = React.useCallback( (e) => { e.preventDefault() - darkMode.toggle() + setTheme(resolvedTheme === 'light' ? 'dark' : 'light') }, - [darkMode] + [resolvedTheme, setTheme] ) React.useEffect(() => { @@ -41,7 +41,7 @@ export const FooterImpl: React.FC = () => { onClick={onToggleDarkMode} title='Toggle dark mode' > - {darkMode.value ? : } + {resolvedTheme === 'dark' ? : } )} diff --git a/components/NotionPage.tsx b/components/NotionPage.tsx index 5c5d909..9cebf54 100644 --- a/components/NotionPage.tsx +++ b/components/NotionPage.tsx @@ -6,7 +6,7 @@ import cs from 'classnames' import { useRouter } from 'next/router' import { useSearchParam } from 'react-use' import BodyClassName from 'react-body-classname' -import useDarkMode from '@fisch0920/use-dark-mode' +import { useTheme } from 'next-themes' import { PageBlock } from 'notion-types' import { Tweet, TwitterContextProvider } from 'react-static-tweets' @@ -189,7 +189,7 @@ export const NotionPage: React.FC = ({ // lite mode is for oembed const isLiteMode = lite === 'true' - const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' }) + const { resolvedTheme } = useTheme() const siteMapPageUrl = React.useMemo(() => { const params: any = {} @@ -284,7 +284,7 @@ export const NotionPage: React.FC = ({ rootPageId={site.rootNotionPageId} rootDomain={site.domain} fullPage={!isLiteMode} - darkMode={darkMode.value} + darkMode={resolvedTheme === 'dark'} previewImages={!!recordMap.preview_images} showCollectionViewDropdown={false} showTableOfContents={showTableOfContents} diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx index c38a9a5..89d039c 100644 --- a/components/NotionPageHeader.tsx +++ b/components/NotionPageHeader.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import cs from 'classnames' -import useDarkMode from '@fisch0920/use-dark-mode' +import { useTheme } from 'next-themes' import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline' import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp' @@ -14,14 +14,18 @@ import styles from './styles.module.css' export const NotionPageHeader: React.FC<{ block: types.CollectionViewPageBlock | types.PageBlock }> = ({ block }) => { - const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' }) const [hasMounted, setHasMounted] = React.useState(false) + const { resolvedTheme, setTheme } = useTheme() const { components, mapPageUrl } = useNotionContext() React.useEffect(() => { setHasMounted(true) }, []) + const onToggleTheme = React.useCallback(() => { + setTheme(resolvedTheme === 'light' ? 'dark' : 'light') + }, [resolvedTheme, setTheme]) + if (navigationStyle === 'default') { return
} @@ -62,8 +66,8 @@ export const NotionPageHeader: React.FC<{ }) .filter(Boolean)} -
- {hasMounted && darkMode.value ? ( +
+ {hasMounted && resolvedTheme === 'dark' ? ( ) : ( diff --git a/components/PageSocial.module.css b/components/PageSocial.module.css index bb16f8d..37ff001 100644 --- a/components/PageSocial.module.css +++ b/components/PageSocial.module.css @@ -68,7 +68,7 @@ fill: var(--bg-color); } -:global(.dark-mode) .action:hover svg { +:global([data-theme='dark']) .action:hover svg { fill: var(--fg-color); } diff --git a/package.json b/package.json index ee50cfd..ccaee4a 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "test:prettier": "prettier '**/*.{js,jsx,ts,tsx}' --check" }, "dependencies": { - "@fisch0920/use-dark-mode": "^2.4.0", "@keyvhq/core": "^1.6.9", "@keyvhq/redis": "^1.6.10", "@react-icons/all-files": "^4.1.0", @@ -38,6 +37,7 @@ "lqip-modern": "^1.2.0", "next": "^12.1.1", "next-api-og-image": "^2.2.1", + "next-themes": "^0.1.1", "node-fetch": "^2.6.1", "notion-client": "^6.11.0", "notion-types": "^6.11.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index 5ae9c80..5e02617 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -23,8 +23,9 @@ import 'styles/notion.css' import 'styles/prism-theme.css' import * as React from 'react' -import { useRouter } from 'next/router' import * as Fathom from 'fathom-client' +import { useRouter } from 'next/router' +import { ThemeProvider } from 'next-themes' import posthog from 'posthog-js' import { bootstrap } from 'lib/bootstrap-client' @@ -63,5 +64,9 @@ export default function App({ Component, pageProps }) { } }, [router.events]) - return + return ( + + + + ) } diff --git a/pages/_document.tsx b/pages/_document.tsx index 0ed2dcb..9dfba43 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -20,51 +20,6 @@ export default class MyDocument extends Document { -