Tailwind: add dark theme

app/layout.tsx

@@ -1,7 +1,8 @@
+import { ThemeProvider } from '@/components/theme-provider';
 import { cn } from '@/lib/utils';
 import { NextIntlClientProvider } from 'next-intl';
-import { getLocale, getMessages } from 'next-intl/server';
 import './globals.css';
+import { getLocale, getMessages } from 'next-intl/server';
 import { Inter } from 'next/font/google';
 
 const inter = Inter({ subsets: ['latin', 'cyrillic'] });
@@ -21,7 +22,17 @@ export default async function RootLayout({ children }: { readonly children: Reac
           'mx-auto min-h-screen max-w-2xl bg-background px-6 py-12 antialiased sm:py-24',
         )}
       >
-        <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
+        <NextIntlClientProvider messages={messages}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            disableTransitionOnChange
+            enableSystem
+            // forcedTheme="dark"
+          >
+            {children}
+          </ThemeProvider>
+        </NextIntlClientProvider>
       </body>
     </html>
   );

app/page.tsx

@@ -23,7 +23,7 @@ export async function generateMetadata({ params: { locale } }: Parameters): Prom
 
 export default function HomePage() {
   return (
-    <main className="">
+    <main>
       <NeonGradientCard neonColors={{ firstColor: '#ae00ff2b', secondColor: '#0011ff55' }}>
         <div className="flex flex-col justify-between gap-y-5">
           <Person />

components/theme-provider.tsx

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

eslint.config.mjs

@@ -11,6 +11,7 @@ export default [
     ignores: ['**/.next/**'],
     rules: {
       '@next/next/no-duplicate-head': 'off',
+      'canonical/filename-match-regex': 0,
       'import/extensions': [
         'error',
         'never',

package.json

@@ -14,6 +14,7 @@
     "lucide-react": "^0.468.0",
     "next": "15.0.4",
     "next-intl": "^3.26.0",
+    "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sharp": "^0.33.5",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       next-intl:
         specifier: ^3.26.0
         version: 3.26.0(next@15.0.4(@babel/core@7.25.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)
+      next-themes:
+        specifier: ^0.4.4
+        version: 0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react:
         specifier: ^19.0.0
         version: 19.0.0
@@ -2686,6 +2689,12 @@ packages:
       next: ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
 
+  next-themes@0.4.4:
+    resolution: {integrity: sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   next@15.0.4:
     resolution: {integrity: sha512-nuy8FH6M1FG0lktGotamQDCXhh5hZ19Vo0ht1AOIQWrYJLP598TIUagKtvJrfJ5AGwB/WmDqkKaKhMpVifvGPA==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -6792,6 +6801,11 @@ snapshots:
       react: 19.0.0
       use-intl: 3.26.0(react@19.0.0)
 
+  next-themes@0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   next@15.0.4(@babel/core@7.25.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@next/env': 15.0.4