Skip to content

Commit 6937dde

Browse files
yanCodeyanCode
committed
feat: use next-theme
1 parent 94ed4e0 commit 6937dde

File tree

5 files changed

+31
-70
lines changed

5 files changed

+31
-70
lines changed

‎docs/package-lock.json

+16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"gh-pages": "^5.0.0",
2424
"next": "12.2.1",
2525
"next-plausible": "^3.2.0",
26+
"next-themes": "^0.4.3",
2627
"postcss-focus-visible": "^6.0.4",
2728
"postcss-import": "^14.1.0",
2829
"prism-react-renderer": "^1.3.5",

‎docs/src/components/ThemeSelector.jsx

+11-15
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { useEffect, useState } from 'react'
1+
import { useEffect } from 'react'
2+
import { useTheme } from 'next-themes'
23
import { Listbox } from '@headlessui/react'
34
import clsx from 'clsx'
45

@@ -53,31 +54,26 @@ function SystemIcon(props) {
5354
}
5455

5556
export function ThemeSelector(props) {
56-
let [selectedTheme, setSelectedTheme] = useState()
57+
let { theme, setTheme } = useTheme();
5758

5859
useEffect(() => {
59-
if (selectedTheme) {
60-
document.documentElement.setAttribute('data-theme', selectedTheme.value)
61-
} else {
62-
setSelectedTheme(
63-
themes.find(
64-
(theme) =>
65-
theme.value === document.documentElement.getAttribute('data-theme')
66-
)
67-
)
60+
if (theme) {
61+
document.documentElement.setAttribute('data-theme', theme)
6862
}
69-
}, [selectedTheme])
63+
}, [theme])
7064

7165
return (
7266
<Listbox
7367
as="div"
74-
value={selectedTheme}
75-
onChange={setSelectedTheme}
68+
value={themes.find((t) => t.value === theme) }
69+
onChange={(theme) => {
70+
setTheme(theme.value)
71+
}}
7672
{...props}
7773
>
7874
<Listbox.Label className="sr-only">Theme</Listbox.Label>
7975
<Listbox.Button className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5">
80-
<span className="sr-only">{selectedTheme?.name}</span>
76+
<span className="sr-only">{theme}</span>
8177
<LightIcon className="hidden h-4 w-4 fill-sky-400 [[data-theme=light]_&]:block" />
8278
<DarkIcon className="hidden h-4 w-4 fill-sky-400 [[data-theme=dark]_&]:block" />
8379
<LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />

‎docs/src/pages/_app.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Head from 'next/head'
22
import { slugifyWithCounter } from '@sindresorhus/slugify'
33
import PlausibleProvider from 'next-plausible'
4-
4+
import { ThemeProvider } from 'next-themes'
55
import Prism from 'prism-react-renderer/prism'
66
;(typeof global !== 'undefined' ? global : window).Prism = Prism
77

@@ -155,7 +155,7 @@ export default function App({ Component, pageProps }) {
155155
: []
156156

157157
return (
158-
<>
158+
<ThemeProvider attribute="class" defaultTheme="system">
159159
<PlausibleProvider domain="anchor-lang.com" trackOutboundLinks={true}>
160160
<Head>
161161
<title>{pageTitle}</title>
@@ -189,6 +189,6 @@ export default function App({ Component, pageProps }) {
189189
<Component {...pageProps} />
190190
</Layout>
191191
</PlausibleProvider>
192-
</>
192+
</ThemeProvider>
193193
)
194194
}

‎docs/src/pages/_document.jsx

-52
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,9 @@
11
import { Head, Html, Main, NextScript } from 'next/document'
22

3-
const themeScript = `
4-
let mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
5-
6-
function updateTheme(savedTheme) {
7-
let theme = 'system'
8-
try {
9-
if (!savedTheme) {
10-
savedTheme = window.localStorage.theme
11-
}
12-
if (savedTheme === 'dark') {
13-
theme = 'dark'
14-
document.documentElement.classList.add('dark')
15-
} else if (savedTheme === 'light') {
16-
theme = 'light'
17-
document.documentElement.classList.remove('dark')
18-
} else if (mediaQuery.matches) {
19-
document.documentElement.classList.add('dark')
20-
} else {
21-
document.documentElement.classList.remove('dark')
22-
}
23-
} catch {
24-
theme = 'light'
25-
document.documentElement.classList.remove('dark')
26-
}
27-
return theme
28-
}
29-
30-
function updateThemeWithoutTransitions(savedTheme) {
31-
updateTheme(savedTheme)
32-
document.documentElement.classList.add('[&_*]:!transition-none')
33-
window.setTimeout(() => {
34-
document.documentElement.classList.remove('[&_*]:!transition-none')
35-
}, 0)
36-
}
37-
38-
document.documentElement.setAttribute('data-theme', updateTheme())
39-
40-
new MutationObserver(([{ oldValue }]) => {
41-
let newValue = document.documentElement.getAttribute('data-theme')
42-
if (newValue !== oldValue) {
43-
try {
44-
window.localStorage.setItem('theme', newValue)
45-
} catch {}
46-
updateThemeWithoutTransitions(newValue)
47-
}
48-
}).observe(document.documentElement, { attributeFilter: ['data-theme'], attributeOldValue: true })
49-
50-
mediaQuery.addEventListener('change', updateThemeWithoutTransitions)
51-
window.addEventListener('storage', updateThemeWithoutTransitions)
52-
`
53-
543
export default function Document() {
554
return (
565
<Html className="antialiased [font-feature-settings:'ss01']" lang="en">
576
<Head>
58-
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
597
</Head>
608
<body className="bg-white dark:bg-slate-900">
619
<Main />

0 commit comments

Comments
 (0)