[chore/themes] Tweak colors on new themes (#3397)

2 files changed, 42 insertions, 30 deletions

diff --git a/web/assets/themes/moonlight-hunt.css b/web/assets/themes/moonlight-hunt.css
index fefaaa5a8..630c7cd21 100644
--- a/web/assets/themes/moonlight-hunt.css
+++ b/web/assets/themes/moonlight-hunt.css
@@ -30,14 +30,10 @@
 
   /* Buttons */
   --bloodshot: linear-gradient(
-    var(--blood-red) 0%,
-    var(--feral-orange) 2%,
-    var(--bright-red) 5%,
-    var(--blood-red) 40%,
-    var(--blood-red) 60%,
-    var(--bright-red) 95%,
-    var(--feral-orange) 98%,
-    var(--blood-red) 100%
+    var(--bright-red),
+    var(--blood-red),
+    var(--blood-red),
+    var(--bright-red)
   );
   --button-bg: var(--bloodshot);
   --button-fg: var(--bleached-bone);
diff --git a/web/assets/themes/solarized-dark.css b/web/assets/themes/solarized-dark.css
index 99dc6ea1f..b89362a72 100644
--- a/web/assets/themes/solarized-dark.css
+++ b/web/assets/themes/solarized-dark.css
@@ -40,31 +40,31 @@
   --orange2: var(--red);
 
   /* Restyle basic colors to use Solarized */
-  --white1: var(--base02);
-  --white2: var(--base03);
-  --blue2: var(--base0);
+  --white1: var(--base03);
+  --white2: var(--base02);
+  --blue2: var(--base1);
   --blue3: var(--base1);
 
   /* Basic page styling (background + foreground) */
-  --bg: var(--base03);
+  --bg: var(--base02);
   --bg-accent: var(--base02);
   --fg-reduced: var(--base0);
-  --fg: var(--base1);
+  --fg: var(--base0);
 
   /* Profile page styling */
   --profile-bg: var(--white2);
 
   /* Solarize statuses */
-  --status-bg: var(--white1);
-  --status-focus-bg: var(--white1);
-  --status-info-bg: var(--white2);
-  --status-focus-info-bg: var(--white2);
+  --status-bg: var(--base03);
+  --status-focus-bg: var(--base03);
+  --status-info-bg: var(--base02);
+  --status-focus-info-bg: var(--base02);
 
   /* Used around statuses + other items */
-  --boxshadow-border: 0.1rem solid var(--base01);
+  --boxshadow-border: 0.15rem solid var(--base01);
 
-  --plyr-video-control-color: var(--fg);
-  --plyr-video-control-color-hover: var(--fg-reduced);
+  --plyr-video-control-color: var(--base1);
+  --plyr-video-control-color-hover: var(--base03);
 }
 
 @font-face {
@@ -83,6 +83,7 @@ html, body {
 /* Column headers */
 .col-header {
   border: var(--boxshadow-border);
+  color: var(--base1);
 }
 
 .profile .about-user .col-header {
@@ -90,20 +91,32 @@ html, body {
   margin-bottom: 0;
 }
 
+/* Instance title color */
+.page-header a h1 {
+  color: var(--base1);
+}
+
 /* Header card */
 .profile .profile-header {
   border: var(--boxshadow-border);
+  background: var(--base03);
 }
 
 /* Fiddle around with borders on about sections */
 .profile .about-user .fields,
 .profile .about-user .bio,
 .profile .about-user .accountstats {
+  background: var(--base03);
   border-left: var(--boxshadow-border);
   border-right: var(--boxshadow-border);
 }
 .profile .about-user .accountstats {
   border-bottom: var(--boxshadow-border);
+  color: var(--base0);
+}
+
+.profile .about-user .fields {
+  padding-top: 0;
 }
 
 /* Profile fields */
@@ -117,10 +130,11 @@ html, body {
 /* Status media */
 .status .media .media-wrapper {
   border: var(--boxshadow-border);
+  background: var(--base02);
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
-  color: var(--base01);
-  border: 0.2rem dashed var(--base01);
+  color: var(--base1);
+  border: 0.2rem dashed var(--base1);
 }
 .status .media .media-wrapper details video.plyr-video {
   background: transparent;
@@ -128,10 +142,11 @@ html, body {
 
 /* Status polls */
 .status .text .poll {
-  background-color: var(--white2);
+  background-color: var(--base03);
+  border: var(--boxshadow-border);
 }
 .status .text .poll .poll-info {
-  background-color: var(--white1);
+  background-color: var(--base03);
 }
 
 /* Code snippets */
@@ -153,23 +168,24 @@ button, .button,
 }
 
 .button {
-  color: var(--base0);
-  background: var(--base03);
+  color: var(--base1);
+  background: var(--base02);
   border: var(--boxshadow-border);
 }
 
 .button:hover {
-  color: var(--base1);
-  background: var(--base02);
+  color: var(--base0);
+  background: var(--base03);
   border: var(--boxshadow-border);
 }
 
 /* Ensure role badge readable */
 .profile .profile-header .basic-info .namerole .role.admin {
-  color: var(--base0);
+  color: var(--base1);
 }
 
-/* Distinguish bot icon from background */
+/* Distinguish bot icon */
 .profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
   border: var(--boxshadow-border);
+  color: var(--base1);
 }