From 893ba1504e7530f3cd9002b85766bafd81c37a16 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 9 Jun 2025 22:05:05 +0100
Subject: [PATCH] Fix dark mode in Chromium

---
 themes/opdavies/templates/email-signup-form.html.twig         | 2 +-
 themes/opdavies/templates/field--body.html.twig               | 2 +-
 themes/opdavies/templates/menu--main.html.twig                | 2 +-
 themes/opdavies/templates/menu-local-task.html.twig           | 2 +-
 themes/opdavies/templates/menu-local-tasks.html.twig          | 4 ++--
 .../opdavies/templates/node--podcast-episode--full.html.twig  | 2 +-
 themes/opdavies/templates/node--podcast-episode.html.twig     | 2 +-
 themes/opdavies/templates/page.html.twig                      | 4 ++--
 .../templates/views-view--daily-email-archive.html.twig       | 2 +-
 .../opdavies/templates/views-view--podcast-episodes.html.twig | 2 +-
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/themes/opdavies/templates/email-signup-form.html.twig b/themes/opdavies/templates/email-signup-form.html.twig
index c9216b704..5581286e5 100644
--- a/themes/opdavies/templates/email-signup-form.html.twig
+++ b/themes/opdavies/templates/email-signup-form.html.twig
@@ -77,7 +77,7 @@
         </div>
 
         <footer class="px-4 mt-4 text-center">
-          <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']
+          <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-zinc-400 prose-code:before:content-[''] prose-code:after:content-['']
     ">
             <p>Not sure? <a href="/archive">Browse the archive →</a></p>
           </div>
diff --git a/themes/opdavies/templates/field--body.html.twig b/themes/opdavies/templates/field--body.html.twig
index ecb8eedc4..80b5fccf6 100644
--- a/themes/opdavies/templates/field--body.html.twig
+++ b/themes/opdavies/templates/field--body.html.twig
@@ -45,7 +45,7 @@
 %}
 
 {%
-  set prose_classes = "prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-[''] prose-pre:bg-gray-200 prose-pre:text-black prose-pre:rounded-none prose-code:bg-gray-200"
+  set prose_classes = "prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-zinc-400 prose-code:before:content-[''] prose-code:after:content-[''] prose-pre:bg-zinc-200 prose-pre:text-black prose-pre:rounded-none prose-code:bg-zinc-200"
 %}
 
 {% if label_hidden %}
diff --git a/themes/opdavies/templates/menu--main.html.twig b/themes/opdavies/templates/menu--main.html.twig
index 721a56f12..5dfd896ec 100644
--- a/themes/opdavies/templates/menu--main.html.twig
+++ b/themes/opdavies/templates/menu--main.html.twig
@@ -36,7 +36,7 @@
     {% for item in items %}
       <li{{ item.attributes }}>
         {{ link(item.title, item.url, {
-          class: 'mx-3 mb-3 text-base block underline md:text-lg dark:text-white hover:no-underline link dark:hover:text-blue-400 hover:text-gray-900',
+          class: 'mx-3 mb-3 text-base block underline md:text-lg dark:text-white hover:no-underline link dark:hover:text-blue-400 hover:text-zinc-900',
         }) }}
 
         {% if item.below %}
diff --git a/themes/opdavies/templates/menu-local-task.html.twig b/themes/opdavies/templates/menu-local-task.html.twig
index 86d953712..939f27874 100644
--- a/themes/opdavies/templates/menu-local-task.html.twig
+++ b/themes/opdavies/templates/menu-local-task.html.twig
@@ -19,7 +19,7 @@
 {% set isActive = element['#active'] %}
 
 {% set classes = [
-  'inline-block px-4 py-3 border-b-2 rounded-t-lg hover:text-blue-primary hover:border-blue-primary dark:hover:text-gray-300',
+  'inline-block px-4 py-3 border-b-2 rounded-t-lg hover:text-blue-primary hover:border-blue-primary dark:hover:text-zinc-300',
   isActive ? 'text-blue-primary border-blue-primary' : 'border-transparent',
 ] %}
 
diff --git a/themes/opdavies/templates/menu-local-tasks.html.twig b/themes/opdavies/templates/menu-local-tasks.html.twig
index e2ccab128..9688de360 100644
--- a/themes/opdavies/templates/menu-local-tasks.html.twig
+++ b/themes/opdavies/templates/menu-local-tasks.html.twig
@@ -14,14 +14,14 @@
  */
 #}
 {% if primary %}
-  <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
+  <div class="text-sm font-medium text-center text-zinc-500 border-b border-zinc-200 dark:text-zinc-400 dark:border-zinc-700">
     <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
     <ul class="flex flex-wrap -mb-px">{{ primary }}</ul>
   </div>
 {% endif %}
 
 {% if secondary %}
-  <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
+  <div class="text-sm font-medium text-center text-zinc-500 border-b border-zinc-200 dark:text-zinc-400 dark:border-zinc-700">
     <h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
     <ul class="flex flex-wrap -mb-px">{{ secondary }}</ul>
   </div>
diff --git a/themes/opdavies/templates/node--podcast-episode--full.html.twig b/themes/opdavies/templates/node--podcast-episode--full.html.twig
index 8bb5cf238..d17799c5d 100644
--- a/themes/opdavies/templates/node--podcast-episode--full.html.twig
+++ b/themes/opdavies/templates/node--podcast-episode--full.html.twig
@@ -69,7 +69,7 @@
   {% endif %}
   {{ title_suffix }}
 
-  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-zinc-400 prose-code:before:content-[''] prose-code:after:content-['']">
     {% if display_submitted %}
       <div class="my-2 text-base">
         {% set created = node.getCreatedTime() %}
diff --git a/themes/opdavies/templates/node--podcast-episode.html.twig b/themes/opdavies/templates/node--podcast-episode.html.twig
index 03b51cfe4..daa3df11c 100644
--- a/themes/opdavies/templates/node--podcast-episode.html.twig
+++ b/themes/opdavies/templates/node--podcast-episode.html.twig
@@ -69,7 +69,7 @@
   {% endif %}
   {{ title_suffix }}
 
-  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-zinc-400 prose-code:before:content-[''] prose-code:after:content-['']">
     {% if display_submitted %}
       <div class="my-2 text-base">
         {% set created = node.getCreatedTime() %}
diff --git a/themes/opdavies/templates/page.html.twig b/themes/opdavies/templates/page.html.twig
index c2c8c41e5..7dea7787a 100644
--- a/themes/opdavies/templates/page.html.twig
+++ b/themes/opdavies/templates/page.html.twig
@@ -45,7 +45,7 @@
  * @ingroup themeable
  */
 #}
-<div class="min-h-screen font-sans text-base font-light md:text-xl dark:text-white text-grey-900 selection:bg-blue-primary selection:text-white dark:bg-grey-900 dark:selection:bg-blue-primary dark:selection:text-white">
+<div class="min-h-screen font-sans text-base font-light md:text-xl dark:text-white text-zinc-900 selection:bg-blue-primary selection:text-white dark:bg-zinc-900 dark:selection:bg-blue-primary dark:selection:text-white">
   <div class="wrapper py-4 px-4 mx-auto max-w-xl">
     <header class="flex flex-col justify-between items-center md:flex-row">
       <div class="flex flex-col justify-between items-center md:flex-row">
@@ -106,7 +106,7 @@
               <img src="/assets/images/social-avatar.jpg" alt="Picture of Oliver" class="my-0 w-16 h-16 rounded-full ring-[3px] ring-blue-primary dark:ring-white">
             </div>
 
-            <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-[''] ">
+            <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-zinc-400 prose-code:before:content-[''] prose-code:after:content-['']">
               <p>I'm an certified Drupal Triple Expert with 18 years of experience, a Drupal core contributor, <a href="/presentations">public speaker</a>, <a href="https://www.youtube.com/@opdavies/streams">live streamer</a>, and host of the <a href="/podcast">Beyond Blocks podcast</a>.</p>
             </div>
           </div>
diff --git a/themes/opdavies/templates/views-view--daily-email-archive.html.twig b/themes/opdavies/templates/views-view--daily-email-archive.html.twig
index bf3be1beb..b0657c82b 100644
--- a/themes/opdavies/templates/views-view--daily-email-archive.html.twig
+++ b/themes/opdavies/templates/views-view--daily-email-archive.html.twig
@@ -42,7 +42,7 @@
   {{ title }}
   {{ title_suffix }}
 
-  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-zinc-400 prose-code:before:content-[''] prose-code:after:content-['']">
     {% if header %}
       <header>
         {{ header }}
diff --git a/themes/opdavies/templates/views-view--podcast-episodes.html.twig b/themes/opdavies/templates/views-view--podcast-episodes.html.twig
index a0d988fc9..a12f9f8c1 100644
--- a/themes/opdavies/templates/views-view--podcast-episodes.html.twig
+++ b/themes/opdavies/templates/views-view--podcast-episodes.html.twig
@@ -44,7 +44,7 @@
 
   <div>
     {% if header %}
-      <header class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+      <header class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-zinc-400 prose-code:before:content-[''] prose-code:after:content-['']">
         {{ header }}
       </header>
     {% endif %}