Listen to and share the music in the Atmosphere.
musicsky.up.railway.app/
nextjs
atproto
music
typescript
react
feat: add theme toggle
enough of light mode burning my eyes at night
+329
-2
+11
package-lock.json
+11
package-lock.json
···
19
19
"lucide-react": "^0.575.0",
20
20
"multiformats": "^13.4.2",
21
21
"next": "16.1.6",
22
+
"next-themes": "^0.4.6",
22
23
"radix-ui": "^1.4.3",
23
24
"react": "19.2.3",
24
25
"react-dom": "19.2.3",
···
9613
9614
"sass": {
9614
9615
"optional": true
9615
9616
}
9617
+
}
9618
+
},
9619
+
"node_modules/next-themes": {
9620
+
"version": "0.4.6",
9621
+
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
9622
+
"integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
9623
+
"license": "MIT",
9624
+
"peerDependencies": {
9625
+
"react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
9626
+
"react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
9616
9627
}
9617
9628
},
9618
9629
"node_modules/next/node_modules/postcss": {
+1
package.json
+1
package.json
+10
-2
src/app/layout.tsx
+10
-2
src/app/layout.tsx
···
1
1
import type { Metadata } from "next";
2
+
import { ThemeProvider } from "@/components/theme-provider";
2
3
import { Geist, Geist_Mono } from "next/font/google";
3
4
import "./globals.css";
4
5
···
23
24
children: React.ReactNode;
24
25
}>) {
25
26
return (
26
-
<html lang="en">
27
+
<html lang="en" suppressHydrationWarning>
27
28
<body
28
29
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
29
30
>
30
31
<div className="flex min-h-screen items-center justify-center bg-background">
31
-
{children}
32
+
<ThemeProvider
33
+
attribute="class"
34
+
defaultTheme="system"
35
+
enableSystem
36
+
disableTransitionOnChange
37
+
>
38
+
{children}
39
+
</ThemeProvider>
32
40
</div>
33
41
</body>
34
42
</html>
+11
src/components/theme-provider.tsx
+11
src/components/theme-provider.tsx
···
1
+
"use client";
2
+
3
+
import * as React from "react";
4
+
import { ThemeProvider as NextThemesProvider } from "next-themes";
5
+
6
+
export function ThemeProvider({
7
+
children,
8
+
...props
9
+
}: React.ComponentProps<typeof NextThemesProvider>) {
10
+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
11
+
}
+39
src/components/theme-toggle.tsx
+39
src/components/theme-toggle.tsx
···
1
+
"use client";
2
+
3
+
import { Moon, Sun } from "lucide-react";
4
+
import { useTheme } from "next-themes";
5
+
6
+
import { Button } from "@/components/ui/button";
7
+
import {
8
+
DropdownMenu,
9
+
DropdownMenuContent,
10
+
DropdownMenuItem,
11
+
DropdownMenuTrigger,
12
+
} from "@/components/ui/dropdown-menu";
13
+
14
+
export function ThemeToggle() {
15
+
const { setTheme } = useTheme();
16
+
17
+
return (
18
+
<DropdownMenu>
19
+
<DropdownMenuTrigger asChild>
20
+
<Button variant="outline" size="icon">
21
+
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
22
+
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
23
+
<span className="sr-only">Toggle theme</span>
24
+
</Button>
25
+
</DropdownMenuTrigger>
26
+
<DropdownMenuContent align="end">
27
+
<DropdownMenuItem onClick={() => setTheme("light")}>
28
+
Light
29
+
</DropdownMenuItem>
30
+
<DropdownMenuItem onClick={() => setTheme("dark")}>
31
+
Dark
32
+
</DropdownMenuItem>
33
+
<DropdownMenuItem onClick={() => setTheme("system")}>
34
+
System
35
+
</DropdownMenuItem>
36
+
</DropdownMenuContent>
37
+
</DropdownMenu>
38
+
);
39
+
}