Use next-theems from transitive dep (for now) (we need dark: prefix for Hero)

Author: hasparus

src/app/colors.css

@@ -24,18 +24,16 @@
   --color-neu-900: 75 15% 5%;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-neu-900: 0 0% 100%;
-    --color-neu-800: 75 57% 97%;
-    --color-neu-700: 75 15% 95%;
-    --color-neu-600: 77 14% 90%;
-    --color-neu-500: 76 14% 85%;
-    --color-neu-400: 77 14% 80%;
-    --color-neu-300: 74 14% 70%;
-    --color-neu-200: 76 15% 60%;
-    --color-neu-100: 76 15% 40%;
-    --color-neu-50: 77 14% 20%;
-    --color-neu-0: 75 15% 5%;
-  }
+html.dark {
+  --color-neu-900: 0 0% 100%;
+  --color-neu-800: 75 57% 97%;
+  --color-neu-700: 75 15% 95%;
+  --color-neu-600: 77 14% 90%;
+  --color-neu-500: 76 14% 85%;
+  --color-neu-400: 77 14% 80%;
+  --color-neu-300: 74 14% 70%;
+  --color-neu-200: 76 15% 60%;
+  --color-neu-100: 76 15% 40%;
+  --color-neu-50: 77 14% 20%;
+  --color-neu-0: 75 15% 5%;
 }

src/app/conf/2025/layout.tsx

@@ -6,7 +6,9 @@ import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
 import { NewFontsStyleTag } from "../../fonts"
 import "../../colors.css"
-import "../../typography.css"
+
+// @ts-expect-error: we want to import the same version as Nextra for the main page
+import { ThemeProvider } from "next-themes"
 
 export const metadata = {
   description:
@@ -54,7 +56,9 @@ export default function Layout({
         ]}
         is2025
       />
-      <div className="bg-neu-0 text-neu-900">{children}</div>
+      <ThemeProvider attribute="class">
+        <div className="bg-neu-0 text-neu-900">{children}</div>
+      </ThemeProvider>
       <Footer
         logo={
           <NextLink href="/conf/2025" className="nextra-logo text-white">