Reader: Fix comment colors (#23095)

wordpress-mobile · Apr 26, 2024 · 39a8bc5 · 39a8bc5
2 parents ad83ce4 + 40fa62c
commit 39a8bc5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 25 deletions.
diff --git a/WordPress/Classes/ViewRelated/Comments/ContentRenderer/WebCommentContentRenderer.swift b/WordPress/Classes/ViewRelated/Comments/ContentRenderer/WebCommentContentRenderer.swift
@@ -139,28 +139,27 @@ private extension WebCommentContentRenderer {
         ReaderDisplaySetting.customizationEnabled ? displaySetting.color.foreground : .text
     }
 
-    var highlightColor: UIColor {
-        ReaderDisplaySetting.customizationEnabled ? Constants.highlightColor : displaySetting.color.foreground
-    }
-
     var mentionBackgroundColor: UIColor {
-        ReaderDisplaySetting.customizationEnabled ? Constants.mentionBackgroundColor : .clear
+        guard ReaderDisplaySetting.customizationEnabled else {
+            return Constants.mentionBackgroundColor
+        }
+
+        return displaySetting.color == .system ? Constants.mentionBackgroundColor : displaySetting.color.secondaryBackground
     }
 
     var linkColor: UIColor {
         guard ReaderDisplaySetting.customizationEnabled else {
-            return highlightColor
+            return Constants.highlightColor
         }
 
-        return displaySetting.color == .system ? .muriel(color: .init(name: .blue)) : displaySetting.color.foreground
+        return displaySetting.color == .system ? Constants.highlightColor : displaySetting.color.foreground
     }
 
     var secondaryBackgroundColor: UIColor {
-        guard ReaderDisplaySetting.customizationEnabled,
-              displaySetting.color != .system else {
+        guard ReaderDisplaySetting.customizationEnabled else {
             return .secondarySystemBackground
         }
-        return displaySetting.color.border
+        return displaySetting.color.secondaryBackground
     }
 
     /// Cache the HTML template format. We only need read the template once.
@@ -229,8 +228,7 @@ private extension WebCommentContentRenderer {
         return """
         :root {
             --text-color: \(textColor.color(for: trait).cssRGBAString());
-            --text-secondary-color: \(displaySetting.color.secondaryForeground.color(for: trait).cssRGBAString())
-            --primary-color: \(highlightColor.color(for: trait).cssRGBAString());
+            --text-secondary-color: \(displaySetting.color.secondaryForeground.color(for: trait).cssRGBAString());
             --link-color: \(linkColor.color(for: trait).cssRGBAString());
             --mention-background-color: \(mentionBackgroundColor.color(for: trait).cssRGBAString());
             --background-secondary-color: \(secondaryBackgroundColor.color(for: trait).cssRGBAString());

diff --git a/WordPress/Classes/ViewRelated/Reader/Detail/WebView/reader.css b/WordPress/Classes/ViewRelated/Reader/Detail/WebView/reader.css
@@ -75,7 +75,6 @@ figure.wp-block-embed.is-type-video {
 
 /* Temporary override for Reader Customization */
 .reader-full-post__story-content blockquote {
-    color: var(--color-text) !important;
-    border-left: 3px solid var(--color-text) !important;
-    filter: brightness(250%);
+    color: var(--color-text);
+    border-left: 3px solid var(--color-neutral-50);
 }
diff --git a/WordPress/Classes/ViewRelated/Reader/Theme/ReaderDisplaySetting.swift b/WordPress/Classes/ViewRelated/Reader/Theme/ReaderDisplaySetting.swift
@@ -180,6 +180,17 @@ struct ReaderDisplaySetting: Codable, Equatable {
             }
         }
 
+        var secondaryBackground: UIColor {
+            switch self {
+            case .system:
+                return .secondarySystemBackground
+            case .evening, .oled, .hacker:
+                return foreground.withAlphaComponent(0.15) // slightly higher contrast for dark themes.
+            default:
+                return foreground.withAlphaComponent(0.1)
+            }
+        }
+
         var border: UIColor {
             switch self {
             case .system:

diff --git a/WordPress/Resources/HTML/richCommentStyle.css b/WordPress/Resources/HTML/richCommentStyle.css
@@ -27,19 +27,9 @@
     color-scheme: light dark;
 
     /* custom variables. */
-    --primary-color: rgba(6, 117, 196, 1);
-    --mention-background-color: rgba(2, 103, 255, .1);
     --monospace-font: ui-monospace, monospace;
 }
 
-/* overrides for dark color scheme. */
-@media(prefers-color-scheme: dark) {
-    :root {
-        --primary-color: rgba(57, 156, 227, 1);
-        --mention-background-color: rgba(2, 103, 255, .2);
-    }
-}
-
 /* disable WebKit text inflation algorithm to prevent text size increase on orientation change. */
 html {
     -webkit-text-size-adjust: none;