fix: next-themes

This commit is contained in:
iCrawl
2022-11-30 02:22:00 +01:00
parent 6bcebd4867
commit b0f9b9c344
6 changed files with 42 additions and 61 deletions

View File

@@ -56,8 +56,7 @@
"meilisearch": "^0.30.0", "meilisearch": "^0.30.0",
"next": "^13.0.6-canary.1", "next": "^13.0.6-canary.1",
"next-mdx-remote": "^4.2.0", "next-mdx-remote": "^4.2.0",
"next-progress": "^2.2.0", "next-themes": "npm:@wits/next-themes@latest",
"next-themes": "^0.2.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-custom-scrollbars-2": "^4.5.0", "react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",

View File

@@ -1,5 +1,6 @@
'use client'; 'use client';
// import { ThemeProvider } from 'next-themes';
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
import { CmdKProvider } from '~/contexts/cmdK'; import { CmdKProvider } from '~/contexts/cmdK';
import { NavProvider } from '~/contexts/nav'; import { NavProvider } from '~/contexts/nav';
@@ -7,7 +8,20 @@ import { NavProvider } from '~/contexts/nav';
export function Providers({ children }: PropsWithChildren) { export function Providers({ children }: PropsWithChildren) {
return ( return (
<NavProvider> <NavProvider>
<CmdKProvider>{children}</CmdKProvider> <CmdKProvider>
{/* <ThemeProvider
attribute="class"
cookieName="theme"
defaultTheme="system"
disableTransitionOnChange
value={{
light: 'light',
dark: 'dark',
}}
> */}
{children}
{/* </ThemeProvider> */}
</CmdKProvider>
</NavProvider> </NavProvider>
); );
} }

View File

@@ -1,5 +1,5 @@
import { ServerThemeProvider } from 'next-themes';
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
import { Providers } from './providers';
import '@unocss/reset/tailwind.css'; import '@unocss/reset/tailwind.css';
import '../styles/inter.css'; import '../styles/inter.css';
@@ -9,11 +9,19 @@ import '../styles/main.css';
export default function RootLayout({ children }: PropsWithChildren) { export default function RootLayout({ children }: PropsWithChildren) {
return ( return (
<html lang="en"> <ServerThemeProvider
<head /> attribute="class"
<body className="dark:bg-dark-800 bg-white"> defaultTheme="system"
<Providers>{children}</Providers> disableTransitionOnChange
</body> value={{
</html> light: 'light',
dark: 'dark',
}}
>
<html lang="en">
<head />
<body className="dark:bg-dark-800 bg-white">{children}</body>
</html>
</ServerThemeProvider>
); );
} }

View File

@@ -1,20 +0,0 @@
'use client';
import { ThemeProvider } from 'next-themes';
import type { PropsWithChildren } from 'react';
export function Providers({ children }: PropsWithChildren) {
return (
<ThemeProvider
attribute="class"
defaultTheme="system"
disableTransitionOnChange
value={{
light: 'light',
dark: 'dark',
}}
>
{children}
</ThemeProvider>
);
}

View File

@@ -1,14 +1,14 @@
'use client'; 'use client';
import { FiCommand } from '@react-icons/all-files/fi/FiCommand'; import { FiCommand } from '@react-icons/all-files/fi/FiCommand';
import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode'; // import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted'; import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
import { VscMenu } from '@react-icons/all-files/vsc/VscMenu'; import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
import { VscSearch } from '@react-icons/all-files/vsc/VscSearch'; import { VscSearch } from '@react-icons/all-files/vsc/VscSearch';
import { Button } from 'ariakit/button'; import { Button } from 'ariakit/button';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import { useTheme } from 'next-themes'; // import { useTheme } from 'next-themes';
import { Fragment, useEffect, useMemo, useState } from 'react'; import { Fragment, useEffect, useMemo, useState } from 'react';
import { useCmdK } from '~/contexts/cmdK'; import { useCmdK } from '~/contexts/cmdK';
import { useNav } from '~/contexts/nav'; import { useNav } from '~/contexts/nav';
@@ -17,9 +17,9 @@ export function Header() {
const pathname = usePathname(); const pathname = usePathname();
// eslint-disable-next-line @typescript-eslint/unbound-method // eslint-disable-next-line @typescript-eslint/unbound-method
const { setOpened } = useNav(); const { setOpened } = useNav();
const { resolvedTheme, setTheme } = useTheme(); // const { resolvedTheme, setTheme } = useTheme();
const dialog = useCmdK(); const dialog = useCmdK();
const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light'); // const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState(''); const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
useEffect(() => { useEffect(() => {
@@ -111,13 +111,13 @@ export function Header() {
> >
<VscGithubInverted size={24} /> <VscGithubInverted size={24} />
</Button> </Button>
<Button {/* <Button
aria-label="Toggle theme" aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px" className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
onClick={() => toggleTheme()} onClick={() => toggleTheme()}
> >
<VscColorMode size={24} /> <VscColorMode size={24} />
</Button> </Button> */}
</div> </div>
</div> </div>
</div> </div>

View File

@@ -2419,8 +2419,7 @@ __metadata:
meilisearch: ^0.30.0 meilisearch: ^0.30.0
next: ^13.0.6-canary.1 next: ^13.0.6-canary.1
next-mdx-remote: ^4.2.0 next-mdx-remote: ^4.2.0
next-progress: ^2.2.0 next-themes: "npm:@wits/next-themes@latest"
next-themes: ^0.2.1
prettier: ^2.8.0 prettier: ^2.8.0
prettier-plugin-tailwindcss: ^0.2.0 prettier-plugin-tailwindcss: ^0.2.0
react: ^18.2.0 react: ^18.2.0
@@ -15543,26 +15542,14 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"next-progress@npm:^2.2.0": "next-themes@npm:@wits/next-themes@latest":
version: 2.2.0 version: 0.2.12
resolution: "next-progress@npm:2.2.0" resolution: "@wits/next-themes@npm:0.2.12"
dependencies:
nprogress: ^0.2.0
peerDependencies:
next: ">=6.0.0"
react: ">=16.0.0"
checksum: ef0e2c66c6990a6d0cf20c28896461ab32a3322972d52f3cb3ee2d2d58bdc2b620a402b1d7df9e0340b230d9ec9a9457584871ea0b8b890b1fc334d1886d2b97
languageName: node
linkType: hard
"next-themes@npm:^0.2.1":
version: 0.2.1
resolution: "next-themes@npm:0.2.1"
peerDependencies: peerDependencies:
next: "*" next: "*"
react: "*" react: "*"
react-dom: "*" react-dom: "*"
checksum: ebc248b956138e73436c4ed0a0f0a877a0a48a33156db577029b8b8469e48b5c777d61abf2baeb75953378febea74e067a4869ff90b4a3e94fce123289b862ba checksum: fe3d0c78d67da86b1374c2f069096d6710bdda5f519ed2eb506f616372e4bfaad2281998a33efcae4b61e5a1e48bdaba6e0b006b296daf9a1211efcb77da2e88
languageName: node languageName: node
linkType: hard linkType: hard
@@ -15923,13 +15910,6 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"nprogress@npm:^0.2.0":
version: 0.2.0
resolution: "nprogress@npm:0.2.0"
checksum: 66b7bec5d563ecf2d1c3d2815e6d5eb74ed815eee8563e0afa63d3f185ab1b9cf2ddd97e1ded263b9995c5019d26d600320e849e50f3747984daa033744619dc
languageName: node
linkType: hard
"nth-check@npm:^2.0.0, nth-check@npm:^2.0.1": "nth-check@npm:^2.0.0, nth-check@npm:^2.0.1":
version: 2.1.1 version: 2.1.1
resolution: "nth-check@npm:2.1.1" resolution: "nth-check@npm:2.1.1"