this repo has no description
feat: dark mode
+38
-2
+1
package.json
+1
package.json
+14
pnpm-lock.yaml
+14
pnpm-lock.yaml
···
26
26
next:
27
27
specifier: 16.1.6
28
28
version: 16.1.6(@babel/core@7.29.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
29
+
next-themes:
30
+
specifier: ^0.4.6
31
+
version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
29
32
react:
30
33
specifier: 19.2.3
31
34
version: 19.2.3
···
1505
1508
negotiator@1.0.0:
1506
1509
resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
1507
1510
engines: {node: '>= 0.6'}
1511
+
1512
+
next-themes@0.4.6:
1513
+
resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
1514
+
peerDependencies:
1515
+
react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
1516
+
react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
1508
1517
1509
1518
next@16.1.6:
1510
1519
resolution: {integrity: sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==}
···
3336
3345
nanoid@3.3.11: {}
3337
3346
3338
3347
negotiator@1.0.0: {}
3348
+
3349
+
next-themes@0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
3350
+
dependencies:
3351
+
react: 19.2.3
3352
+
react-dom: 19.2.3(react@19.2.3)
3339
3353
3340
3354
next@16.1.6(@babel/core@7.29.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
3341
3355
dependencies:
+12
-2
src/app/layout.tsx
+12
-2
src/app/layout.tsx
···
1
1
import type { Metadata } from "next";
2
2
import "./globals.css";
3
3
import { Figtree } from "next/font/google";
4
+
import { ThemeProvider } from "@/components/theme-provider"
4
5
5
6
const figtree = Figtree({ subsets: ["latin"], variable: "--font-sans" });
6
7
···
15
16
children: React.ReactNode;
16
17
}>) {
17
18
return (
18
-
<html lang="en" className={`${figtree.variable} max-w-md mx-auto`}>
19
-
<body>{children}</body>
19
+
<html lang="en" className={`${figtree.variable} max-w-md mx-auto`} suppressHydrationWarning>
20
+
<body>
21
+
<ThemeProvider
22
+
attribute="class"
23
+
defaultTheme="system"
24
+
enableSystem
25
+
disableTransitionOnChange
26
+
>
27
+
{children}
28
+
</ThemeProvider>
29
+
</body>
20
30
</html>
21
31
);
22
32
}
+11
src/components/theme-provider.tsx
+11
src/components/theme-provider.tsx
···
1
+
"use client";
2
+
3
+
import { ThemeProvider as NextThemesProvider } from "next-themes";
4
+
import type * as React from "react";
5
+
6
+
export function ThemeProvider({
7
+
children,
8
+
...props
9
+
}: React.ComponentProps<typeof NextThemesProvider>) {
10
+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
11
+
}