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",
"next": "^13.0.6-canary.1",
"next-mdx-remote": "^4.2.0",
"next-progress": "^2.2.0",
"next-themes": "^0.2.1",
"next-themes": "npm:@wits/next-themes@latest",
"react": "^18.2.0",
"react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0",

View File

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

View File

@@ -1,5 +1,5 @@
import { ServerThemeProvider } from 'next-themes';
import type { PropsWithChildren } from 'react';
import { Providers } from './providers';
import '@unocss/reset/tailwind.css';
import '../styles/inter.css';
@@ -9,11 +9,19 @@ import '../styles/main.css';
export default function RootLayout({ children }: PropsWithChildren) {
return (
<html lang="en">
<head />
<body className="dark:bg-dark-800 bg-white">
<Providers>{children}</Providers>
</body>
</html>
<ServerThemeProvider
attribute="class"
defaultTheme="system"
disableTransitionOnChange
value={{
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';
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 { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
import { VscSearch } from '@react-icons/all-files/vsc/VscSearch';
import { Button } from 'ariakit/button';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTheme } from 'next-themes';
// import { useTheme } from 'next-themes';
import { Fragment, useEffect, useMemo, useState } from 'react';
import { useCmdK } from '~/contexts/cmdK';
import { useNav } from '~/contexts/nav';
@@ -17,9 +17,9 @@ export function Header() {
const pathname = usePathname();
// eslint-disable-next-line @typescript-eslint/unbound-method
const { setOpened } = useNav();
const { resolvedTheme, setTheme } = useTheme();
// const { resolvedTheme, setTheme } = useTheme();
const dialog = useCmdK();
const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
// const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
useEffect(() => {
@@ -111,13 +111,13 @@ export function Header() {
>
<VscGithubInverted size={24} />
</Button>
<Button
{/* <Button
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"
onClick={() => toggleTheme()}
>
<VscColorMode size={24} />
</Button>
</Button> */}
</div>
</div>
</div>

View File

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