From a56b6829a26273626c93b3351fe1554e1bffbc2d Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Fri, 9 May 2025 17:37:11 +0200 Subject: [PATCH] feat: implements next-themes Adds `next-themes` to allow users to switch between light and dark themes. --- components.json | 2 +- package.json | 1 + src/app/layout.tsx | 15 +++++++++++++-- src/components/theme-provider.tsx | 11 +++++++++++ src/lib/utils.ts | 6 +++--- yarn.lock | 5 +++++ 6 files changed, 34 insertions(+), 6 deletions(-) create mode 100644 src/components/theme-provider.tsx diff --git a/components.json b/components.json index 421c026..23385eb 100644 --- a/components.json +++ b/components.json @@ -18,4 +18,4 @@ "hooks": "@/hooks" }, "iconLibrary": "lucide" -} \ No newline at end of file +} diff --git a/package.json b/package.json index e691f81..9617c76 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "lucide-react": "^0.508.0", "next": "15.3.2", "next-auth": "^5.0.0-beta.25", + "next-themes": "^0.4.6", "react": "^19.0.0", "react-dom": "^19.0.0", "tailwind-merge": "^3.2.0" diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 085d6cb..05f8659 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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 ( - - {children} + + + + {children} + + ); } diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx new file mode 100644 index 0000000..9bf53d8 --- /dev/null +++ b/src/components/theme-provider.tsx @@ -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) { + return {children}; +} diff --git a/src/lib/utils.ts b/src/lib/utils.ts index bd0c391..2819a83 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -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)); } diff --git a/yarn.lock b/yarn.lock index bedf1c2..bce919a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2632,6 +2632,11 @@ next-auth@^5.0.0-beta.25: dependencies: "@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: version "15.3.2" resolved "https://registry.yarnpkg.com/next/-/next-15.3.2.tgz#97510629e38a058dd154782a5c2ec9c9ab94d0d8"