feat: dark mode across all blocks, header, posts, 404

src/app/(frontend)/globals.css

@@ -726,11 +726,23 @@ html:not([data-theme]) {
    ─────────────────────────────────────────────────────────────────────── */
 
 @media (prefers-color-scheme: dark) {
+  /* Prevent the browser from applying its own dark mode color transforms to buttons */
+  .fd-btn-primary,
+  .fd-btn-primary-dark,
+  .fd-btn-secondary,
+  .fd-btn-secondary-dark,
+  .fd-btn-navy,
+  .fd-btn-mint {
+    color-scheme: light;
+  }
+
+  /* fd-btn-primary: hover must not go navy-on-navy (sections are now dark) */
   .fd-btn-primary:hover {
     background-color: #ffffff;
     color: var(--color-fd-navy);
   }
 
+  /* fd-btn-secondary: navy text/border is invisible on dark sections */
   .fd-btn-secondary {
     color: #ffffff;
     border-color: #ffffff;

src/app/(frontend)/not-found.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import type { Metadata } from 'next'
 import { FDButton } from '@/components/FDButton'
 
-
 export const metadata: Metadata = {
   title: '404 – Sidan hittades inte | Fiber Direkt',
   description: 'Sidan du letar efter verkar ha kopplats bort.',
@@ -10,7 +9,7 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <main className="min-h-[calc(100vh-80px)] bg-white flex items-center overflow-hidden">
+    <main className="min-h-[calc(100vh-80px)] bg-white dark:bg-fd-navy flex items-center overflow-hidden">
       <div className="max-w-[1200px] mx-auto px-6 md:px-8 w-full pt-8 pb-16 md:pt-12 md:pb-20">
         <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
 
@@ -18,25 +17,25 @@ export default function NotFound() {
           <div className="flex flex-col items-start gap-6 lg:gap-8 flex-1">
 
             {/* Error code badge */}
-            <div className="inline-flex items-center gap-2 bg-fd-navy/10 rounded-full px-4 py-2">
+            <div className="inline-flex items-center gap-2 bg-fd-navy/10 dark:bg-white/10 rounded-full px-4 py-2">
               <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
-              <span className="font-joey text-fd-small text-fd-navy/60 tracking-widest uppercase">
+              <span className="font-joey text-fd-small text-fd-navy/60 dark:text-white/60 tracking-widest uppercase">
                 Felkod 404
               </span>
             </div>
 
             {/* Heading */}
             <div className="flex flex-col gap-3">
-              <h1 className="font-joey-heavy text-fd-display text-fd-navy leading-none">
+              <h1 className="font-joey-heavy text-fd-display text-fd-navy dark:text-fd-yellow leading-none">
                 Oops!
               </h1>
-              <p className="font-joey-medium text-fd-h2 text-fd-navy max-w-[460px] leading-snug">
+              <p className="font-joey-medium text-fd-h2 text-fd-navy dark:text-white max-w-[460px] leading-snug">
                 Vi kan inte hitta sidan du letar efter.
               </p>
             </div>
 
             {/* Body */}
-            <p className="font-joey text-fd-body-lg text-fd-navy/60 max-w-[420px]">
+            <p className="font-joey text-fd-body-lg text-fd-navy/60 dark:text-white/60 max-w-[420px]">
               Det verkar som kabeln kopplades bort någonstans längs vägen.
               Prova att gå tillbaka till startsidan.
             </p>
@@ -53,11 +52,11 @@ export default function NotFound() {
           <div className="hidden lg:flex flex-1 items-center justify-center w-full max-w-[380px] lg:max-w-none">
             <div className="relative w-full max-w-[460px]">
 
-<svg
+              <svg
                 viewBox="0 0 1536 1024"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
-                className="w-full h-auto relative opacity-90"
+                className="w-full h-auto relative opacity-90 dark:opacity-40"
                 aria-hidden="true"
               >
                 <path
@@ -65,6 +64,7 @@ export default function NotFound() {
                   fill="#0E2338"
                   fillRule="evenodd"
                   opacity="0.85"
+                  className="dark:fill-white"
                 />
               </svg>