DHBW-WE/MeetUp
5
0
Fork 0
Code Issues 7 Pull requests 5 Projects 1 Releases 5 Packages 1 Wiki Activity Actions

feat: implements next-themes

Browse source 
Adds `next-themes` to allow users to switch between light and dark themes.
This commit is contained in:
Maximilian Liebmann 2025-05-09 17:37:11 +02:00
parent b81210d2ea
commit a56b6829a2
6 changed files with 34 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components.json
View file

@ -18,4 +18,4 @@
"hooks": "@/hooks" "hooks": "@/hooks"
}, },
"iconLibrary": "lucide" "iconLibrary": "lucide"
} }

1
package.json
View file

@ -21,6 +21,7 @@
"lucide-react": "^0.508.0", "lucide-react": "^0.508.0",
"next": "15.3.2", "next": "15.3.2",
"next-auth": "^5.0.0-beta.25", "next-auth": "^5.0.0-beta.25",
"next-themes": "^0.4.6",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"tailwind-merge": "^3.2.0" "tailwind-merge": "^3.2.0"

15
src/app/layout.tsx
View file

@ -1,3 +1,5 @@
import { ThemeProvider } from '@/components/theme-provider';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import './globals.css'; import './globals.css';
@ -12,8 +14,17 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang='en'> <html lang='en' suppressHydrationWarning>
<body>{children}</body> <body>
<ThemeProvider
attribute='class'
defaultTheme='system'
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html> </html>
); );
} }

11
src/components/theme-provider.tsx Normal file
View file

@ -0,0 +1,11 @@
'use client';
import * as React from 'react';
import { ThemeProvider as NextThemesProvider } from 'next-themes';
export function ThemeProvider({
children,
...props
}: React.ComponentProps<typeof NextThemesProvider>) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

6
src/lib/utils.ts
View file

@ -1,6 +1,6 @@
import { clsx, type ClassValue } from "clsx" import { clsx, type ClassValue } from 'clsx';
import { twMerge } from "tailwind-merge" import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs));
} }

5
yarn.lock
View file

@ -2632,6 +2632,11 @@ next-auth@^5.0.0-beta.25:
dependencies: dependencies:
"@auth/core" "0.39.0" "@auth/core" "0.39.0"
next-themes@^0.4.6:
version "0.4.6"
resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.4.6.tgz#8d7e92d03b8fea6582892a50a928c9b23502e8b6"
integrity sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==
next@15.3.2: next@15.3.2:
version "15.3.2" version "15.3.2"
resolved "https://registry.yarnpkg.com/next/-/next-15.3.2.tgz#97510629e38a058dd154782a5c2ec9c9ab94d0d8" resolved "https://registry.yarnpkg.com/next/-/next-15.3.2.tgz#97510629e38a058dd154782a5c2ec9c9ab94d0d8"