From 6e19e17ca475d4653d26f03ec875193e9c5bbf48 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 8 Dec 2025 17:46:10 -0600
Subject: [PATCH] Need to account for theme setting when using
 `prefers-color-scheme: dark`

---
 app/assets/stylesheets/bar.css          |  8 +++++++-
 app/assets/stylesheets/base.css         |  8 +++++++-
 app/assets/stylesheets/buttons.css      |  8 +++++++-
 app/assets/stylesheets/card-columns.css |  8 +++++++-
 app/assets/stylesheets/cards.css        |  8 +++++++-
 app/assets/stylesheets/circled-text.css |  8 +++++++-
 app/assets/stylesheets/inputs.css       |  8 +++++++-
 app/assets/stylesheets/lexxy.css        |  9 ++++++++-
 app/assets/stylesheets/markdown.css     |  9 ++++++++-
 app/assets/stylesheets/nav.css          |  8 +++++++-
 app/assets/stylesheets/reactions.css    |  9 ++++++++-
 app/assets/stylesheets/syntax.css       | 18 +++++++++++++++++-
 app/assets/stylesheets/trays.css        |  9 ++++++++-
 13 files changed, 105 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/bar.css
index 86183ccb0..e13badb7b 100644
--- a/app/assets/stylesheets/bar.css
+++ b/app/assets/stylesheets/bar.css
@@ -19,10 +19,16 @@
     view-transition-name: bar;
     z-index: var(--z-bar);
 
-    @media (prefers-color-scheme: dark) {
+    html[data-theme="dark"] & {
       border-block: 1px solid var(--color-ink-lighter);
     }
 
+    @media (prefers-color-scheme: dark) {
+      html:not([data-theme]) & {
+        border-block: 1px solid var(--color-ink-lighter);
+      }
+    }
+
     &:has(.bar__placeholder[hidden]) {
       padding-inline: 1ch;
     }
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 31c4180e1..05d2b016e 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -55,9 +55,15 @@
   ::selection {
     background: var(--color-selected);
 
-    @media (prefers-color-scheme: dark) {
+    html[data-theme="dark"] & {
       background-color: var(--color-selected-dark);
     }
+
+    @media (prefers-color-scheme: dark) {
+      html:not([data-theme]) & {
+        background-color: var(--color-selected-dark);
+      }
+    }
   }
 
   :where(ul, ol):where([role="list"]) {
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 274d80ceb..4ee5f199e 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -27,10 +27,16 @@
       }
     }
 
-    @media (prefers-color-scheme: dark) {
+    html[data-theme="dark"] & {
       --btn-hover-brightness: 1.25;
     }
 
+    @media (prefers-color-scheme: dark) {
+      html:not([data-theme]) & {
+        --btn-hover-brightness: 1.25;
+      }
+    }
+
     &[disabled],
     &:has([disabled]),
     [disabled] &[type=submit],
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index ac690ac30..19084f65c 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -179,9 +179,15 @@
       outline: var(--focus-ring-size) solid var(--color-selected-dark);
       outline-offset: var(--focus-ring-offset);
 
-      @media (prefers-color-scheme: dark) {
+      html[data-theme="dark"] & {
         outline-color: oklch(var(--lch-blue-medium));
       }
+
+      @media (prefers-color-scheme: dark) {
+        html:not([data-theme]) & {
+          outline-color: oklch(var(--lch-blue-medium));
+        }
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 9fe9c6601..3fb0a7f4d 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -27,10 +27,16 @@
     text-align: start;
     z-index: 1;
 
-    @media (prefers-color-scheme: dark) {
+    html[data-theme="dark"] & {
       box-shadow: 0 0 0 1px var(--color-ink-lighter);
     }
 
+    @media (prefers-color-scheme: dark) {
+      html:not([data-theme]) & {
+        box-shadow: 0 0 0 1px var(--color-ink-lighter);
+      }
+    }
+
     .popup {
       inline-size: 260px;
     }
diff --git a/app/assets/stylesheets/circled-text.css b/app/assets/stylesheets/circled-text.css
index 9c3e87f48..dcb971d51 100644
--- a/app/assets/stylesheets/circled-text.css
+++ b/app/assets/stylesheets/circled-text.css
@@ -12,9 +12,15 @@
       opacity: 0.5;
       mix-blend-mode: multiply;
 
-      @media (prefers-color-scheme: dark) {
+      html[data-theme="dark"] & {
         mix-blend-mode: screen;
       }
+
+      @media (prefers-color-scheme: dark) {
+        html:not([data-theme]) & {
+          mix-blend-mode: screen;
+        }
+      }
     }
 
     span::before,
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index 109bfbb26..366983d00 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -113,10 +113,16 @@
     background-repeat: no-repeat;
     text-align: start;
 
-    @media (prefers-color-scheme: dark) {
+    html[data-theme="dark"] & {
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
     }
 
+    @media (prefers-color-scheme: dark) {
+      html:not([data-theme]) & {
+        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
+      }
+    }
+
     option {
       background-color: var(--color-canvas);
       color: var(--color-ink);
diff --git a/app/assets/stylesheets/lexxy.css b/app/assets/stylesheets/lexxy.css
index e3f8f8cbd..a0100ca1b 100644
--- a/app/assets/stylesheets/lexxy.css
+++ b/app/assets/stylesheets/lexxy.css
@@ -188,10 +188,17 @@
     padding: 0.5em 1.8em 0.5em 1.2em;
     text-align: start;
 
-    @media (prefers-color-scheme: dark) {
+    html[data-theme="dark"] & {
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
     }
 
+    @media (prefers-color-scheme: dark) {
+      html:not([data-theme]) & {
+        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
+      }
+    }
+
+
     option {
       background-color: var(--color-canvas);
       color: var(--color-ink);
diff --git a/app/assets/stylesheets/markdown.css b/app/assets/stylesheets/markdown.css
index 5dfac832c..f6aef0e39 100644
--- a/app/assets/stylesheets/markdown.css
+++ b/app/assets/stylesheets/markdown.css
@@ -24,8 +24,15 @@
       }
     }
 
-    @media (prefers-color-scheme: dark) {
+    html[data-theme="dark"] & {
       filter: invert(1);
     }
+
+    @media (prefers-color-scheme: dark) {
+      html:not([data-theme]) & {
+        filter: invert(1);
+      }
+    }
+
   }
 }
diff --git a/app/assets/stylesheets/nav.css b/app/assets/stylesheets/nav.css
index bcbe83088..bcc60c85e 100644
--- a/app/assets/stylesheets/nav.css
+++ b/app/assets/stylesheets/nav.css
@@ -23,9 +23,15 @@
           background: var(--color-ink-lighter);
         }
 
-        @media (prefers-color-scheme: dark) {
+        html[data-theme="dark"] & {
           --input-background: var(--color-ink-lighter);
         }
+
+        @media (prefers-color-scheme: dark) {
+          html:not([data-theme]) & {
+            --input-background: var(--color-ink-lighter);
+          }
+        }
       }
     }
 
diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index ed6187bae..797e9a7cb 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -95,9 +95,16 @@
       &:not(.expanded):hover {
         filter: brightness(var(--reaction-hover-brightness));
 
-        @media (prefers-color-scheme: dark) {
+        html[data-theme="dark"] & {
           --reaction-hover-brightness: 1.25;
         }
+
+        @media (prefers-color-scheme: dark) {
+          html:not([data-theme]) & {
+            --reaction-hover-brightness: 1.25;
+          }
+        }
+
       }
     }
   }
diff --git a/app/assets/stylesheets/syntax.css b/app/assets/stylesheets/syntax.css
index 7ddc2cf42..7da03d67b 100644
--- a/app/assets/stylesheets/syntax.css
+++ b/app/assets/stylesheets/syntax.css
@@ -14,7 +14,7 @@
     --markup-deleted: lch(39.64 68.17 31.45);
 
     /* Redefine named color values for dark mode */
-    @media (prefers-color-scheme: dark) {
+    html[data-theme="dark"] {
       --keyword: lch(67.63 58.99 30.64);
       --entity: lch(75.13 46.73 306.74);
       --constant: lch(74.9 39.71 255.53);
@@ -28,6 +28,22 @@
       --markup-deleted: lch(73.8% 65 29.18);
     }
 
+    @media (prefers-color-scheme: dark) {
+      html:not([data-theme]) {
+        --keyword: lch(67.63 58.99 30.64);
+        --entity: lch(75.13 46.73 306.74);
+        --constant: lch(74.9 39.71 255.53);
+        --string: lch(74.9 39.71 255.53);
+        --variable: lch(76.17 61.1 61.97);
+        --comment: lch(60.83 6.66 254.46);
+        --entity-tag: lch(83.65 59.31 141.61);
+        --markup-heading: lch(47.93 71.67 280.72);
+        --markup-list: lch(83.84 57.9 85.03);
+        --markup-inserted: lch(83.65 59.31 141.61);
+        --markup-deleted: lch(73.8% 65 29.18);
+      }
+    }
+
     color: var(--color-ink);
 
     .w {
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 46c4b74b7..3cefc1ecc 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -300,9 +300,16 @@
         border-radius: 0;
       }
 
-      @media (prefers-color-scheme: dark) {
+      html[data-theme="dark"] & {
         box-shadow: 0 0 0 1px var(--color-ink-lighter);
       }
+
+      @media (prefers-color-scheme: dark) {
+        html:not([data-theme]) & {
+          box-shadow: 0 0 0 1px var(--color-ink-lighter);
+        }
+      }
+
     }
 
     .card__background {