piotr.sliwa/t-convex-nextjs-saas
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: add next-themes

Browse source
This commit is contained in:
nxtkofi 2026-03-28 00:15:07 +01:00
parent 9ca3e289b3
commit 41fb8bbb51
5 changed files with 42 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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"
},

14
pnpm-lock.yaml
View file

@ -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

9
src/app/layout.tsx
View file

@ -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 (
<html lang="en" className="h-full antialiased">
<body className="min-h-full flex flex-col">
<NextIntlClientProvider>{children}</NextIntlClientProvider>
<body className="min-h-full flex flex-col" suppressHydrationWarning>
<NextIntlClientProvider>
<ThemeProvider>{children}</ThemeProvider>
</NextIntlClientProvider>
</body>
</html>
);

8
src/app/page.tsx
View file

@ -1,6 +1,12 @@
import { useTranslations } from "next-intl";
import { ThemeChanger } from "../components/core/ThemeChanger";
export default function Home() {
const t = useTranslations("HomePage");
return <h1>{t("title")}</h1>;
return (
<>
<h1>{t("title")}</h1>
<ThemeChanger />
</>
);
}

14
src/components/core/ThemeChanger.tsx Normal file
View file

@ -0,0 +1,14 @@
"use client";
import { useTheme } from "next-themes";
export const ThemeChanger = () => {
const { theme, setTheme } = useTheme();
return (
<div>
The current theme is: {theme}
<button onClick={() => setTheme("light")}>Light Mode</button>
<button onClick={() => setTheme("dark")}>Dark Mode</button>
</div>
);
};