Ensure dark mode is forced

src/app/[locale]/layout.tsx

@@ -24,8 +24,9 @@ export default async function LocaleLayout({
       <NextIntlClientProvider messages={messages}>
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
-          enableSystem
+          defaultTheme="dark"
+          enableSystem={false}
+          forcedTheme="dark"
           disableTransitionOnChange
         >
           <div className="min-h-screen flex flex-col">

src/app/not-found.tsx

@@ -5,8 +5,9 @@ export default function NotFound() {
   return (
     <ThemeProvider
       attribute="class"
-      defaultTheme="system"
-      enableSystem
+      defaultTheme="dark"
+      enableSystem={false}
+      forcedTheme="dark"
       disableTransitionOnChange
     >
       <div className="flex flex-col min-h-[90vh] p-12 justify-center items-center">

src/components/Header.tsx

@@ -113,7 +113,13 @@ const Header = ({ navItems }: HeaderProps) => {
                 <span className="flex items-center gap-2">
                   <span>{item.label}</span>
                   {navIconByHref[item.href] ? (
-                    <span className="material-symbols-outlined text-[1.4rem]! leading-none text-[#00A3E0] group-hover:text-[#EEE5E5]">
+                    <span
+                      className={`material-symbols-outlined text-[1.4rem]! leading-none ${
+                        isActive
+                          ? "text-black"
+                          : "text-[#00A3E0] group-hover:text-[#EEE5E5]"
+                      }`}
+                    >
                       {navIconByHref[item.href]}
                     </span>
                   ) : null}