From 41fb8bbb51b9e8d1b33baa5c146f9dcfb6570f7e Mon Sep 17 00:00:00 2001 From: nxtkofi Date: Sat, 28 Mar 2026 00:15:07 +0100 Subject: [PATCH] feat: add next-themes --- package.json | 1 + pnpm-lock.yaml | 14 ++++++++++++++ src/app/layout.tsx | 9 ++++++--- src/app/page.tsx | 8 +++++++- src/components/core/ThemeChanger.tsx | 14 ++++++++++++++ 5 files changed, 42 insertions(+), 4 deletions(-) create mode 100644 src/components/core/ThemeChanger.tsx 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} + + +
+ ); +};