css: Move out background-color hsl(0deg 0% 0% / 20%) out of dark_theme.

Fixes part of #35881.

web/styles/app_components.css

@@ -431,7 +431,7 @@ input.settings_text_input {
 .grey-box {
     margin: 0;
     padding: 5px 10px;
-    background-color: var(--color-background-modal-bar);
+    background-color: var(--color-background-grey-box);
     border: 1px solid var(--color-border-modal-bar);
     border-radius: 4px;
 
@@ -439,7 +439,7 @@ input.settings_text_input {
 }
 
 .white-box {
-    background-color: hsl(0deg 0% 100%);
+    background-color: var(--color-background-white-box);
     border: 1px solid hsl(0deg 0% 87%);
 }
 
@@ -823,8 +823,14 @@ input.settings_text_input {
         }
     }
 
-    tbody > tr:nth-child(odd) > td {
-        background-color: var(--color-background-modal);
+    tbody > tr:nth-child(odd) {
+        td {
+            background-color: var(--color-background-modal);
+        }
+
+        th {
+            background-color: var(--color-background-tbody-th-odd);
+        }
     }
 
     /* Force the actions column to use the minimum space necessary */

web/styles/app_variables.css

@@ -1023,6 +1023,11 @@
         0 0 2px hsl(3deg 57% 33%),
         0 0 2px hsl(3deg 73% 74%)
     );
+    --color-background-white-box: light-dark(
+        hsl(0deg 0% 100%),
+        hsl(0deg 0% 0% / 20%)
+    );
+    --color-background-grey-box: light-dark(#f5f5f5, hsl(0deg 0% 0% / 20%));
 
     /* Recent view */
     --recent-view-max-avatars: 4;
@@ -1560,7 +1565,18 @@
         hsl(0deg 0% 20%),
         hsl(236deg 33% 90%)
     );
-
+    --color-background-stream-email: light-dark(
+        hsl(0deg 0% 98%),
+        hsl(0deg 0% 0% / 20%)
+    );
+    --color-background-integration-url: light-dark(
+        transparent,
+        hsl(0deg 0% 0% / 20%)
+    );
+    --color-background-tbody-th-odd: light-dark(
+        transparent,
+        hsl(0deg 0% 0% / 20%)
+    );
     /* Markdown colors */
     --color-background-rendered-markdown-thead: light-dark(
         hsl(0deg 0% 93%),

web/styles/dark_theme.css

@@ -180,15 +180,6 @@
         background-color: hsl(228deg 11% 17%);
     }
 
-    & .overlay-messages-header,
-    .grey-box,
-    .white-box,
-    .stream-email,
-    #generate-integration-url-modal .integration-url,
-    .table-striped tbody tr:nth-child(odd) th {
-        background-color: hsl(0deg 0% 0% / 20%);
-    }
-
     .table-striped tbody tr:nth-child(even) td {
         border-color: hsl(0deg 0% 0% / 20%);
         background-color: color-mix(

web/styles/settings.css

@@ -2325,6 +2325,7 @@ label.preferences-radio-choice-label {
 
     .integration-url {
         font-family: "Source Code Pro", monospace;
+        background-color: var(--color-background-integration-url);
         padding: 10px;
         font-size: 0.85rem;
         border: 1px solid hsl(0deg 0% 87%);

web/styles/subscriptions.css

@@ -27,7 +27,7 @@
     font-family: "Source Code Pro", monospace;
     padding: 10px;
     font-size: 0.85em; /* 13.6px at 16px/em (previously 0.85rem) */
-    background-color: hsl(0deg 0% 98%);
+    background-color: var(--color-background-stream-email);
     border: 1px solid hsl(0deg 0% 87%);
     border-radius: 4px;
 }