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

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);

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);
 }

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 */

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);

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);

web/source/css/_colors.css

@@ -24,6 +24,8 @@
 
 /* Color definitions */
 
+/* Dark mode - default */
+
 /* Foreground */
 $white1: #fafaff; /* default text color, contrast >= 5.0 with all $grays */
 $white2: #b3b5c6; /* less important text, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */
@@ -94,7 +96,7 @@ $no-img-desc-fg: $gray1;
 
 $bg-sensitive: $gray1;
 
-$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
+$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0, 0, 0, 0.15);
 $boxshadow-border: 0.08rem solid $gray1;
 
 $avatar-border: $orange2;
@@ -129,4 +131,41 @@ $plyr-badge-background: $bg-accent;
 $plyr-video-controls-background: $bg-accent;
 $plyr-badge-text-color: $fg;
 $plyr-badge-border-radius: $br;
-$plyr-video-progress-buffered-background: $gray8;
+$plyr-video-progress-buffered-background: $gray8;
+
+/* Light mode */
+
+$white: #fafaff; /* we still use white for something */
+
+@media (prefers-color-scheme: light) {
+	:root {
+		$white1: #000000; /* default text color, contrast >= 5.0 with all $grays */
+		$white2: #59595F; /* less important text, can be used with $gray1 (8.5) ~ $gray5 (5.0) */
+
+		/* Background shades, contrast >= 5.0 with $white1 (#000000) */
+		$gray1: #ffffff;
+		$gray2: #f6f6f6;
+		$gray3: #ededed;
+		$gray4: #e4e4e4;
+		$gray5: #dbdbdb;
+		$gray6: #d2d2d2;
+		$gray7: #c9c9c9;
+		$gray8: #c0c0c0;
+
+		$orange1: #c75300; /* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.5)*/
+		$orange2: #bd4f00; /* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.5) */
+
+		$blue1: #247cb3; /* lighter blue for smaller elements (borders), can only be used with $gray1 (4.5) */
+		$blue2: #166ba0; /* all-round accent color, can be used with $gray1 (5.7), $gray2 (5.3), $gray3 (4.9), $gray4 (4.5) */
+		$blue3: #106193; /* hover/selected accent to $blue2, can be used with $gray1 (6.6), $gray2 (6.1), $gray3 (5.6), $gray4 (5.2), $gray5 (4.8) */
+
+		$error1: #ffc1c1; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (13.6), $white2 (4.5) */
+		$error2: #aa0000; /* Error background text, can be used with $error1 (5.0), $gray1 (7.7), $gray2 (7.1), $gray3 (6.62) */
+		$error3: #d93636; /* Error button background text, can be used with $white1 (4.53) */
+		$error-link: #abd4ff; /* Error link text, can be used with $error2 (5.56) */
+
+		$green1: #367400;
+
+		$info-bg: $blue1;
+	}
+}

web/source/css/index.css

@@ -70,6 +70,10 @@
 
 	.activitypub-logo {
 		background: $fg;
+		/* light mode */
+		@media (prefers-color-scheme: light) {
+			background: none;
+		}
 		box-shadow: $boxshadow;
 		border-radius: $br;	
 		max-width: 100%;

web/source/css/profile.css

@@ -298,6 +298,11 @@
 			*/
 			background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
 			background-size: 1.2rem 1.4rem;
+			/* light mode */
+			@media (prefers-color-scheme: light) {
+				background: linear-gradient(to right, $white 100%, transparent 0) no-repeat center center;
+				background-size: 1.2rem 1.4rem;
+			}
 		}
 	}