diff --git a/package.json b/package.json
index 928e274..0eb3991 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"convex": "^1.34.0",
"next": "16.2.1",
"next-intl": "^4.8.3",
+ "next-themes": "^0.4.6",
"react": "19.2.4",
"react-dom": "19.2.4"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 56bb192..fa93294 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
next-intl:
specifier: ^4.8.3
version: 4.8.3(next@16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+ next-themes:
+ specifier: ^0.4.6
+ version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
react:
specifier: 19.2.4
version: 19.2.4
@@ -1942,6 +1945,12 @@ packages:
typescript:
optional: true
+ next-themes@0.4.6:
+ resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+ peerDependencies:
+ react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
next@16.2.1:
resolution: {integrity: sha512-VaChzNL7o9rbfdt60HUj8tev4m6d7iC1igAy157526+cJlXOQu5LzsBXNT+xaJnTP/k+utSX5vMv7m0G+zKH+Q==}
engines: {node: '>=20.9.0'}
@@ -4241,6 +4250,11 @@ snapshots:
transitivePeerDependencies:
- '@swc/helpers'
+ next-themes@0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+ dependencies:
+ react: 19.2.4
+ react-dom: 19.2.4(react@19.2.4)
+
next@16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
dependencies:
'@next/env': 16.2.1
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2893d74..720d6a9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,11 @@
import type { Metadata } from "next";
import "./globals.css";
import { NextIntlClientProvider } from "next-intl";
+import { ThemeProvider } from "next-themes";
export const metadata: Metadata = {
title: "SaaS Template",
- description: "Create SaaS in 1 day!",
+ description: "Create SaaS in a day!",
};
export default function RootLayout({
@@ -14,8 +15,10 @@ export default function RootLayout({
}>) {
return (
-
- {children}
+
+
+ {children}
+
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5571720..2601391 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,12 @@
import { useTranslations } from "next-intl";
+import { ThemeChanger } from "../components/core/ThemeChanger";
export default function Home() {
const t = useTranslations("HomePage");
- return {t("title")}
;
+ return (
+ <>
+ {t("title")}
+
+
+ );
}
diff --git a/src/components/core/ThemeChanger.tsx b/src/components/core/ThemeChanger.tsx
new file mode 100644
index 0000000..fccc20a
--- /dev/null
+++ b/src/components/core/ThemeChanger.tsx
@@ -0,0 +1,14 @@
+"use client";
+import { useTheme } from "next-themes";
+
+export const ThemeChanger = () => {
+ const { theme, setTheme } = useTheme();
+
+ return (
+
+ The current theme is: {theme}
+
+
+
+ );
+};