add hardcoded theme-color fallback for old browsers

Author: mnyrop

site/_includes/partials/header.html

@@ -60,8 +60,8 @@
         </ul>
       </div>
       <!-- end big menu -->
-      <label aria-label="light/dark mode toggle switch" class="cursor-pointer grid place-items-center">
-        <input id="toggle-darkmode" type="checkbox" value="dark" class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"/>
+      <label id="toggle-darkmode" aria-label="light/dark mode toggle switch" class="cursor-pointer grid place-items-center">
+        <input type="checkbox" value="dark" class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"/>
         <svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <circle cx="12" cy="12" r="5"/>
           <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>

site/css/styles.css

@@ -73,3 +73,29 @@ details[open] > summary.meta-summary::before {
 .flickity-button:focus {
   box-shadow: none !important;
 }
+
+@supports not (color: oklch(0% 0 0)) { */
+  #toggle-darkmode {
+    display: none !important;
+  }
+  :root {
+    color-scheme: light;
+    --fallback-s: #975020;
+    --fallback-a: #007049;
+    --fallback-n: #EAE0CD;
+    --fallback-nc: #230616;
+    --fallback-bc: #230616;
+    --fallback-b1: #f5f0e6;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      color-scheme: dark;
+      --fallback-s: #C2845B;
+      --fallback-a: #61A88F;
+      --fallback-n: #33272e;
+      --fallback-nc: #e8e3da;
+      --fallback-bc: #E7DBC5;
+      --fallback-b1: #11030B;
+    }
+  }
+}

tailwind.config.js

@@ -15,9 +15,9 @@ module.exports = {
       {
         light: {
           ...require("daisyui/src/theming/themes")["light"],
-          "base-100": "#f5f0e6", /* alabaster */
+          "base-100": "#f5f0e6", // alabaster
           "base-content": "#230616", // dark purple
-          "accent": "#007049", // dartmouth green "#007A50", // dark spring green
+          "accent": "#007049", // dartmouth green
           "secondary": "#975020", // brown sugar
           "neutral": "#EAE0CD", // pearl
           "neutral-content": "#230616" // dark purple
@@ -31,7 +31,7 @@ module.exports = {
           "accent": "#61A88F", // zomp
           "secondary": "#C2845B", // brown sugar
           "neutral": "#33272e", // raisin black
-          "neutral-content": "#F3EDE2", // alabaster
+          "neutral-content": "#e8e3da" // alabaster
         },
       },
     ],