[feature/frontend] add light mode color scheme of base css, adapt to prefers-color-scheme (#3765)

5 files changed, 30 insertions, 0 deletions

diff --git a/web/assets/themes/blurple-light.css b/web/assets/themes/blurple-light.css
index 5076ba9cc..eb45ffb30 100644
--- a/web/assets/themes/blurple-light.css
+++ b/web/assets/themes/blurple-light.css
@@ -23,6 +23,10 @@
   --blue2: var(--blurple5);
   --blue3: var(--blurple6);
 
+  /* Use hardcoded grey as gray get restyled in light mode */
+  --gray1: #2a2b2f;
+  --gray2: #35363b;
+
   /* Basic page styling (background + foreground) */
   --bg: var(--blurple1);
   --bg-accent: var(--white2);
diff --git a/web/assets/themes/brutalist-dark.css b/web/assets/themes/brutalist-dark.css
index baccaa046..4cf8cd655 100644
--- a/web/assets/themes/brutalist-dark.css
+++ b/web/assets/themes/brutalist-dark.css
@@ -63,6 +63,13 @@ html, body {
 .profile .profile-header .basic-info .avatar-image-wrapper {
   border: var(--single-border);
 }
+
+.profile .statuses .rss-icon .fa {
+  /* enforce dark mode style */
+  background: linear-gradient(to right, var(--almost-black) 100%, transparent 0) no-repeat center center;
+  background-size: 1.2rem 1.4rem;
+}
+
 .status .status-header > address > a .avatar {
   border: var(--single-border);
 }
diff --git a/web/assets/themes/midnight-trip.css b/web/assets/themes/midnight-trip.css
index d817d56ae..29c143abc 100644
--- a/web/assets/themes/midnight-trip.css
+++ b/web/assets/themes/midnight-trip.css
@@ -17,6 +17,10 @@
   --blue1: var(--acid-green-dark);
   --blue2: var(--acid-green-light);
   --blue3: var(--acid-green);
+
+  /* enforce dark mode style */
+  --white1: #fafaff;
+  --white2: #b3b5c6;
 }
 
 /* Main page background */
diff --git a/web/assets/themes/rain-forest.css b/web/assets/themes/rain-forest.css
index 3a890ef64..62763cec3 100644
--- a/web/assets/themes/rain-forest.css
+++ b/web/assets/themes/rain-forest.css
@@ -34,6 +34,9 @@
   /* dark blues */
   --gray2: #29485A; /* black forest blue */
   --gray4: #2B3246; /* vintage dark blue */
+  /* enforce dark mode style */
+  --white1: #fafaff;
+  --white2: #b3b5c6;
   /*  statuses */
   --status-bg: var(--dgreen1);
   --status-focus-bg: var(--dgreen1);
@@ -87,6 +90,12 @@ box-shadow: none; /* no "glow" for buttons */
   border-top: 0.1rem solid var(--sunny);
 }
 
+/* RSS icon */
+.profile .statuses .rss-icon .fa {
+  background: linear-gradient(to right, var(--gray2) 100%, transparent 0) no-repeat center center;
+  background-size: 1.2rem 1.4rem;
+}
+
 /* Block quotes */
 blockquote {
   background-color: var(--quotebg);
diff --git a/web/assets/themes/soft.css b/web/assets/themes/soft.css
index 05923d91d..691558bee 100644
--- a/web/assets/themes/soft.css
+++ b/web/assets/themes/soft.css
@@ -18,6 +18,12 @@
   --orange2: var(--blue1);
   --br: 0.8rem;
   --br-inner: 0.4rem; 
+  /* Use hardcoded grey as gray get re-styled in light mode */
+  --white1: #fafaff;
+  --gray1: #2a2b2f;
+  --gray2: #35363b;
+  --gray3: #45464e;
+  --gray8: #696a75;
 
   /* Basic page styling (background + foreground) */
   --bg: var(--soft-pink);