fix(theme): update theme handling and improve CSS variant matching

- Changed theme state management to use resolvedTheme for accurate theme detection
- Updated CSS custom variant for dark mode to align with next-themes attribute usage
- Adjusted import path for route types to ensure compatibility with Next.js updates

Author: z0ffy

components/theme.tsx

@@ -4,12 +4,12 @@ import Sun from './icons/sun';
 import { useTheme } from 'next-themes';
 
 const Theme = () => {
-  const { theme, setTheme } = useTheme();
+  const { setTheme, resolvedTheme } = useTheme();
 
   if (process.env.theme !== 'both') return <></>;
 
   return (
-    theme === 'light'
+    resolvedTheme === 'light'
       ? <Moon width="2em" height="2em" onClick={() => setTheme('dark')}/>
       : <Sun width="2em" height="2em" onClick={() => setTheme('light')}/>
   );

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

styles/globals.css

@@ -1,6 +1,7 @@
 @import 'tailwindcss';
 
-@custom-variant dark (&:is([data-theme="dark"] *));
+/* Match next-themes `attribute="class"` (html.dark) */
+@custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
   --font-*: initial;