From 1d99b6f1d992d8cba63992fd0646a0dae3ba8d0d Mon Sep 17 00:00:00 2001 From: Zhang ShengYan Date: Sat, 23 Nov 2024 16:14:35 +0800 Subject: [PATCH 1/2] feat: use next-themes --- docs/package-lock.json | 16 +++++++++ docs/package.json | 1 + docs/src/components/ThemeSelector.jsx | 26 ++++++-------- docs/src/pages/_app.jsx | 6 ++-- docs/src/pages/_document.jsx | 52 --------------------------- 5 files changed, 31 insertions(+), 70 deletions(-) diff --git a/docs/package-lock.json b/docs/package-lock.json index 09e4d29d85..d0c9e8d61e 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -20,6 +20,7 @@ "gh-pages": "^5.0.0", "next": "12.2.1", "next-plausible": "^3.2.0", + "next-themes": "^0.4.3", "postcss-focus-visible": "^6.0.4", "postcss-import": "^14.1.0", "prism-react-renderer": "^1.3.5", @@ -2936,6 +2937,15 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/next-themes": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.3.tgz", + "integrity": "sha512-nG84VPkTdUHR2YeD89YchvV4I9RbiMAql3GiLEQlPvq1ioaqPaIReK+yMRdg/zgiXws620qS1rU30TiWmmG9lA==", + "peerDependencies": { + "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" + } + }, "node_modules/next/node_modules/postcss": { "version": "8.4.5", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz", @@ -6310,6 +6320,12 @@ "integrity": "sha512-9PqFiVtD1kZO5gHFYTcgilHhg2WhMzD6I4NK/RUh9DGavD1N11IhNAvyGLFmvB3f4FtHC9IoAsauYDtQBt+riA==", "requires": {} }, + "next-themes": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.3.tgz", + "integrity": "sha512-nG84VPkTdUHR2YeD89YchvV4I9RbiMAql3GiLEQlPvq1ioaqPaIReK+yMRdg/zgiXws620qS1rU30TiWmmG9lA==", + "requires": {} + }, "node-releases": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz", diff --git a/docs/package.json b/docs/package.json index 7c04fa7067..0b4e79265b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,6 +23,7 @@ "gh-pages": "^5.0.0", "next": "12.2.1", "next-plausible": "^3.2.0", + "next-themes": "^0.4.3", "postcss-focus-visible": "^6.0.4", "postcss-import": "^14.1.0", "prism-react-renderer": "^1.3.5", diff --git a/docs/src/components/ThemeSelector.jsx b/docs/src/components/ThemeSelector.jsx index 0aecc9244e..5ca03f3e03 100644 --- a/docs/src/components/ThemeSelector.jsx +++ b/docs/src/components/ThemeSelector.jsx @@ -1,4 +1,5 @@ -import { useEffect, useState } from 'react' +import { useEffect } from 'react' +import { useTheme } from 'next-themes' import { Listbox } from '@headlessui/react' import clsx from 'clsx' @@ -53,31 +54,26 @@ function SystemIcon(props) { } export function ThemeSelector(props) { - let [selectedTheme, setSelectedTheme] = useState() + let { theme, setTheme } = useTheme() useEffect(() => { - if (selectedTheme) { - document.documentElement.setAttribute('data-theme', selectedTheme.value) - } else { - setSelectedTheme( - themes.find( - (theme) => - theme.value === document.documentElement.getAttribute('data-theme') - ) - ) + if (theme) { + document.documentElement.setAttribute('data-theme', theme) } - }, [selectedTheme]) + }, [theme]) return ( t.value === theme) } + onChange={(theme) => { + setTheme(theme.value) + }} {...props} > Theme - {selectedTheme?.name} + {theme} diff --git a/docs/src/pages/_app.jsx b/docs/src/pages/_app.jsx index 12a155c361..b121b99fb3 100644 --- a/docs/src/pages/_app.jsx +++ b/docs/src/pages/_app.jsx @@ -1,7 +1,7 @@ import Head from 'next/head' import { slugifyWithCounter } from '@sindresorhus/slugify' import PlausibleProvider from 'next-plausible' - +import { ThemeProvider } from 'next-themes' import Prism from 'prism-react-renderer/prism' ;(typeof global !== 'undefined' ? global : window).Prism = Prism @@ -155,7 +155,7 @@ export default function App({ Component, pageProps }) { : [] return ( - <> + {pageTitle} @@ -189,6 +189,6 @@ export default function App({ Component, pageProps }) { - + ) } diff --git a/docs/src/pages/_document.jsx b/docs/src/pages/_document.jsx index bc91f71cfb..8baf4689cd 100644 --- a/docs/src/pages/_document.jsx +++ b/docs/src/pages/_document.jsx @@ -1,61 +1,9 @@ import { Head, Html, Main, NextScript } from 'next/document' -const themeScript = ` - let mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') - - function updateTheme(savedTheme) { - let theme = 'system' - try { - if (!savedTheme) { - savedTheme = window.localStorage.theme - } - if (savedTheme === 'dark') { - theme = 'dark' - document.documentElement.classList.add('dark') - } else if (savedTheme === 'light') { - theme = 'light' - document.documentElement.classList.remove('dark') - } else if (mediaQuery.matches) { - document.documentElement.classList.add('dark') - } else { - document.documentElement.classList.remove('dark') - } - } catch { - theme = 'light' - document.documentElement.classList.remove('dark') - } - return theme - } - - function updateThemeWithoutTransitions(savedTheme) { - updateTheme(savedTheme) - document.documentElement.classList.add('[&_*]:!transition-none') - window.setTimeout(() => { - document.documentElement.classList.remove('[&_*]:!transition-none') - }, 0) - } - - document.documentElement.setAttribute('data-theme', updateTheme()) - - new MutationObserver(([{ oldValue }]) => { - let newValue = document.documentElement.getAttribute('data-theme') - if (newValue !== oldValue) { - try { - window.localStorage.setItem('theme', newValue) - } catch {} - updateThemeWithoutTransitions(newValue) - } - }).observe(document.documentElement, { attributeFilter: ['data-theme'], attributeOldValue: true }) - - mediaQuery.addEventListener('change', updateThemeWithoutTransitions) - window.addEventListener('storage', updateThemeWithoutTransitions) -` - export default function Document() { return ( -