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

15
src/app/layout.tsx
View file

@ -1,3 +1,5 @@
import { ThemeProvider } from '@/components/theme-provider';
import type { Metadata } from 'next';
import './globals.css';
@ -12,8 +14,17 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang='en'>
<body>{children}</body>
<html lang='en' suppressHydrationWarning>
<body>
<ThemeProvider
attribute='class'
defaultTheme='system'
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</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 { twMerge } from "tailwind-merge"
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
return twMerge(clsx(inputs));
}