Skip to content

Commit 007787a

Browse files
rishabh3562rishabh3562
authored
Merge pull request #41 from aryadharmadhikari/feat/dark-theme
feat: Add dark mode support and fix GitHub repository links
2 parents e7e70f5 + 196c37b commit 007787a

10 files changed

Lines changed: 83 additions & 43 deletions

File tree

‎.github/workflows/ci-cd-pipeline.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,9 @@ jobs:
321321
node-version: ${{ env.NODE_VERSION }}
322322
cache: 'npm'
323323

324+
- name: Install dependencies
325+
run: npm ci --prefer-offline
326+
324327
- name: Install Vercel CLI
325328
run: npm install --global vercel@latest
326329

‎app/globals.css‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,6 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--foreground-rgb: 0, 0, 0;
7-
--background-start-rgb: 214, 219, 220;
8-
--background-end-rgb: 255, 255, 255;
9-
}
10-
11-
@media (prefers-color-scheme: dark) {
12-
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
16-
}
17-
}
18-
195
@layer base {
206
:root {
217
--background: 0 0% 100%;
@@ -44,6 +30,7 @@
4430
--chart-5: 27 87% 67%;
4531
--radius: 0.5rem;
4632
}
33+
4734
.dark {
4835
--background: 0 0% 3.9%;
4936
--foreground: 0 0% 98%;
@@ -108,7 +95,7 @@
10895
}
10996

11097
.prose pre {
111-
background-color: rgb(var(--muted));
98+
background-color: hsl(var(--muted));
11299
padding: 1rem;
113100
border-radius: 0.5rem;
114101
}
@@ -120,12 +107,12 @@
120107

121108
.prose th,
122109
.prose td {
123-
border: 1px solid rgb(var(--border));
110+
border: 1px solid hsl(var(--border));
124111
padding: 0.5rem;
125112
}
126113

127114
.prose blockquote {
128-
border-left: 4px solid rgb(var(--primary));
115+
border-left: 4px solid hsl(var(--primary));
129116
padding-left: 1rem;
130117
font-style: italic;
131118
}

‎app/layout.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { Metadata } from "next";
33
import { Inter } from "next/font/google";
44
import { SiteHeader } from "@/components/site-header";
55
import { SiteFooter } from "@/components/site-footer";
6+
import { Providers } from "@/components/providers";
67

78
const inter = Inter({ subsets: ["latin"] });
89

@@ -18,13 +19,15 @@ export default function RootLayout({
1819
children: React.ReactNode;
1920
}) {
2021
return (
21-
<html lang="en">
22+
<html lang="en" suppressHydrationWarning>
2223
<body className={inter.className}>
23-
<div className="relative min-h-screen flex flex-col">
24-
<SiteHeader />
25-
<main className="flex-1">{children}</main>
26-
<SiteFooter />
27-
</div>
24+
<Providers>
25+
<div className="relative min-h-screen flex flex-col">
26+
<SiteHeader />
27+
<main className="flex-1">{children}</main>
28+
<SiteFooter />
29+
</div>
30+
</Providers>
2831
</body>
2932
</html>
3033
);

‎app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default function Home() {
7575
<ArrowRight className="ml-2 h-5 w-5" />
7676
</Button>
7777
</Link>
78-
<Link href="https://github.com" target="_blank">
78+
<Link href="https://github.com/rishabh3562/ToolBox" target="_blank">
7979
<Button size="lg" variant="outline" className="h-12 px-6">
8080
View on GitHub
8181
</Button>

‎components/providers.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use client";
2+
3+
import { ThemeProvider } from "next-themes";
4+
5+
export function Providers({ children }: { children: React.ReactNode }) {
6+
return (
7+
<ThemeProvider
8+
attribute="class"
9+
defaultTheme="system"
10+
enableSystem
11+
storageKey="devtools-theme"
12+
disableTransitionOnChange
13+
>
14+
{children}
15+
</ThemeProvider>
16+
);
17+
}

‎components/site-footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function SiteFooter() {
1313
</Link>
1414
. The source code is available on{" "}
1515
<Link
16-
href="https://github.com"
16+
href="https://github.com/rishabh3562/ToolBox"
1717
target="_blank"
1818
className="font-medium underline underline-offset-4"
1919
>
@@ -23,7 +23,7 @@ export function SiteFooter() {
2323
</p>
2424
</div>
2525
<div className="flex items-center space-x-4">
26-
<Link href="https://github.com" target="_blank">
26+
<Link href="https://github.com/rishabh3562/ToolBox" target="_blank">
2727
<Github className="h-5 w-5" />
2828
</Link>
2929
<Link href="https://twitter.com" target="_blank">

‎components/site-header.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
55
import { cn } from "@/lib/utils";
66
import { Button } from "@/components/ui/button";
77
import { Wrench, Github } from "lucide-react";
8+
import { ThemeToggle } from "./theme-toggle";
89

910
const navigation = [
1011
{ name: "Home", href: "/" },
@@ -40,8 +41,9 @@ export function SiteHeader() {
4041
</nav>
4142
</div>
4243
<div className="ml-auto flex items-center space-x-4">
44+
<ThemeToggle />
4345
<Button variant="outline" size="icon" asChild>
44-
<Link href="https://github.com" target="_blank">
46+
<Link href="https://github.com/rishabh3562/ToolBox" target="_blank">
4547
<Github className="h-4 w-4" />
4648
</Link>
4749
</Button>

‎components/theme-toggle.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import { Moon, Sun } from "lucide-react";
5+
import { useTheme } from "next-themes";
6+
7+
export function ThemeToggle() {
8+
const [mounted, setMounted] = React.useState(false);
9+
const { resolvedTheme, setTheme } = useTheme(); // Changed: use resolvedTheme
10+
11+
React.useEffect(() => {
12+
setMounted(true);
13+
}, []);
14+
15+
if (!mounted) {
16+
return null;
17+
}
18+
19+
return (
20+
<button
21+
onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")} // Changed: use resolvedTheme
22+
className="relative inline-flex h-10 w-10 items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
23+
aria-label="Toggle theme"
24+
>
25+
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
26+
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
27+
<span className="sr-only">Toggle theme</span>
28+
</button>
29+
);
30+
}

‎package-lock.json‎

Lines changed: 11 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@
4848
"@types/node": "20.6.2",
4949
"@types/react": "18.2.22",
5050
"@types/react-dom": "18.2.7",
51+
"@upstash/ratelimit": "^1.0.0",
52+
"@upstash/redis": "^1.25.1",
5153
"autoprefixer": "10.4.15",
5254
"class-variance-authority": "^0.7.0",
5355
"clsx": "^2.1.1",
@@ -78,9 +80,7 @@
7880
"tailwindcss-animate": "^1.0.7",
7981
"typescript": "5.2.2",
8082
"vaul": "^0.9.9",
81-
"zod": "^3.23.8",
82-
"@upstash/ratelimit": "^1.0.0",
83-
"@upstash/redis": "^1.25.1"
83+
"zod": "^3.23.8"
8484
},
8585
"devDependencies": {
8686
"@types/jest": "^29.5.0",

0 commit comments

Comments
 (0)