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

@@ -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>