From 5a3d3f5303343ad88ab1261034b4f87d4119743a Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Thu, 4 Aug 2022 12:13:31 +0000
Subject: [PATCH] css: Use variables for colors used to display message time.

This makes color changes easy to review and maintain in the
codebase.

This is also an attempt towards removing dark_theme.css
as we will only need to override color variables for these
elements in `body.dark-theme` in zulip.css without need of
overriding colors for any specific elements.
---
 static/styles/dark_theme.css |  8 +-------
 static/styles/zulip.css      | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css
index eb875b35b5..0376b3b5ae 100644
--- a/static/styles/dark_theme.css
+++ b/static/styles/dark_theme.css
@@ -378,8 +378,7 @@
     /* these are converting grey things to "new grey" */
     :disabled,
     input:not([type="radio"]):read-only,
-    textarea:read-only,
-    .recipient_row_date {
+    textarea:read-only {
         color: inherit;
         opacity: 0.5;
     }
@@ -520,11 +519,6 @@
         }
     }
 
-    /* Disable blue link styling for the message timestamp link. */
-    .message_time {
-        color: hsl(236, 33%, 90%);
-    }
-
     .emoji-popover .reaction:focus {
         box-shadow: 0 0 1px hsl(0, 0%, 98%);
     }
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index eea264bdc2..5de080d4c3 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -52,6 +52,20 @@ body,
 
 :root {
     color-scheme: light;
+
+    --color-message-time: hsl(0, 0%, 20%);
+    --color-recipient-row-date: hsl(0, 0%, 53%);
+}
+
+:root.dark-theme {
+    --color-message-time: hsl(236, 33%, 90%);
+    --color-recipient-row-date: hsl(236, 33%, 90%);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root.color-scheme-automatic {
+        @extend :root.dark-theme;
+    }
 }
 
 input,
@@ -901,7 +915,7 @@ td.pointer {
     opacity: 0.4;
     font-weight: 400;
     /* Disable blue link styling for the message timestamp link. */
-    color: hsl(0, 0%, 20%);
+    color: var(--color-message-time);
     transition: background-color 1.5s ease-in, color 1.5s ease-in;
 
     a& {
@@ -1161,7 +1175,7 @@ td.pointer {
 }
 
 .recipient_row_date {
-    color: hsl(0, 0%, 53%);
+    color: var(--color-recipient-row-date);
     font-size: 12px;
     font-weight: 600;
     padding: 3px 11px 2px 10px;