scale-color $lightness must use $secondary for dark themes

[hussam789]

User description

PR 7

---

PR Type

Enhancement

---

Description

• Replace scale-color($primary, $lightness: X%) with dark-light-choose() for dark theme support

• Use scale-color($secondary, $lightness: Y%) as fallback for dark themes

• Ensure consistent lightness values: secondary lightness = 100 - primary lightness

• Apply changes across 30+ stylesheet files for comprehensive theme compatibility

---

Diagram Walkthrough

flowchart LR
  A["scale-color with lightness"] -->|"wrapped in"| B["dark-light-choose"]
  B -->|"light theme"| C["scale-color primary"]
  B -->|"dark theme"| D["scale-color secondary"]
  C --> E["Consistent styling"]
  D --> E

Loading

File Walkthrough

Relevant files

Enhancement

32 files admin_base.scss Wrap scale-color lightness with dark-light-choose                +8/-8      _topic-list.scss Add dark theme support to topic list colors                            +6/-6      discourse.scss Update coldmap color scale for dark themes                              +3/-3      header.scss Apply dark-light-choose to header elements                              +5/-5      login.scss Add dark theme colors to login form                                            +2/-2      notification-options.scss Update muted notification icon color                                          +1/-1      search.scss Add dark theme support to search results                                  +3/-3      share_link.scss Update share link date color styling                                          +1/-1      topic-post.scss Apply dark theme to post metadata colors                                  +6/-6      user-badges.scss Add dark theme support to badge colors                                      +2/-2      user.scss Update user profile text colors for themes                              +3/-3      badges.css.scss Apply dark-light-choose to badge styling                                  +2/-2      buttons.css.scss Update disabled button hover color                                              +1/-1      compose.scss Add dark theme to reply-to indicator                                          +1/-1      header.scss Update search link blurb colors                                                    +2/-2      login.scss Apply dark theme to login page                                                      +2/-2      modal.scss Add dark theme support to modal elements                                  +6/-6      queued-posts.scss Update queued post info color                                                        +1/-1      topic-list.scss Apply dark theme to topic list styling                                      +8/-8      topic-post.scss Add dark theme to post controls and metadata                          +16/-16  topic.scss Update topic title and reply colors                                            +2/-2      upload.scss Add dark theme to upload descriptions                                        +1/-1      user.scss Apply dark theme to user profile page                                        +6/-6      embed.css.scss Update embedded post new user color                                            +1/-1      compose.scss Add dark theme to mobile compose area                                        +4/-4      login.scss Apply dark theme to mobile login                                                  +2/-2      modal.scss Update mobile modal message length color                                  +1/-1      topic-list.scss Add dark theme to mobile topic list                                            +4/-4      topic-post.scss Apply dark theme to mobile post styling                                    +8/-8      topic.scss Update mobile topic private message glyph                                +1/-1      upload.scss Add dark theme to mobile upload selector                                  +1/-1      user.scss Apply dark theme to mobile user profile                                    +5/-5

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Not Applicable: The PR only modifies SCSS presentation rules (theme colors) without adding or changing any critical system actions or logging, so audit trail compliance cannot be evaluated from this diff alone. Referred Code th, td { line-height: 1.25; text-align: left; vertical-align: middle; } th { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); font-weight: normal; font-size: 1em; button i.fa {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));} } td { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); font-size: 1em; } .main-link { font-size: 1.143em; ... (clipped 10 lines)
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Not Applicable: The changes are limited to styling (color selection using dark-light-choose) and do not introduce logic with failure points; error handling cannot be assessed from SCSS changes. Referred Code color: $secondary; } } // the default for table cells in topic list // is scale-color($primary, $lightness: 50%) // numbers get dimmer as they get colder .coldmap-high { color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)) !important; } .coldmap-med { color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)) !important; } .coldmap-low { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important; }
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Not Applicable: Only stylesheet color changes are present; no input handling or data flow is modified in this diff, so security validation cannot be determined from the changes shown. Referred Code margin-left: 56px; width: 701px; } &.top.topic-body { padding-left: 0; padding-right: 0; } .post-date { color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); } .fa-arrow-up, .fa-arrow-down { margin-left: 5px; } .reply:first-of-type .row { border-top: none; } .topic-meta-data { position: relative; } .topic-meta-data h5 { position: absolute; z-index: 1; font-size: 0.929em; a { font-weight: bold; ... (clipped 5 lines)

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Abstract the repetitive color scaling logic Create a new Sass function, such as theme-scale-color($lightness), to encapsulate the repetitive dark-light-choose logic. This will reduce code duplication and centralize theme-related color scaling. Examples: app/assets/stylesheets/common/admin/admin_base.scss [506] color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); app/assets/stylesheets/common/base/topic-list.scss [48] Solution Walkthrough: Before: // In file1.scss .some-element { color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); } // In file2.scss .another-element { border-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); } // ... repeated in dozens of files After: // In a central mixins/functions file @function theme-scale-color($lightness) { @return dark-light-choose( scale-color($primary, $lightness: $lightness), scale-color($secondary, $lightness: 100% - $lightness) ); } // In file1.scss .some-element { color: theme-scale-color(40%); } // In file2.scss .another-element { border-color: theme-scale-color(75%); } Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a highly repetitive pattern introduced across many files and proposes an abstraction that would significantly improve code maintainability and readability.	High
Possible issue	Fix incorrect color in dark mode Correct the color for the topic metadata link in dark mode and restore the original light mode color. The current implementation uses incorrect lightness values for both themes. app/assets/stylesheets/desktop/topic-post.scss [285-293] .topic-meta-data h5 { position: absolute; z-index: 1; font-size: 0.929em; a { font-weight: bold; - color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); + color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); } } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that the lightness value for the dark theme color is likely incorrect, and also points out an unintended change to the light theme color, which could cause visual regression.	Medium
	Correct inconsistent color in dark mode Correct the dark mode color for .custom-message-length in the mobile stylesheet to match the desktop version. The current implementation uses an incorrect lightness value, causing visual inconsistency. app/assets/stylesheets/mobile/modal.scss [100-104] .custom-message-length { margin: -10px 0 10px 20px; - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); font-size: 85%; } Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies an inconsistency between the mobile and desktop dark theme implementations for .custom-message-length, proposing a fix that aligns them and improves visual consistency.	Medium
	Fix inconsistent color in dark mode Align the h3 color in the mobile stylesheet with the desktop version. The current mobile implementation uses an incorrect lightness value, causing visual inconsistency. app/assets/stylesheets/mobile/topic-post.scss [179-186] h3 { margin-bottom: 4px; margin-top: 0; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose(scale-color($primary, $lightness: 20%), scale-color($secondary, $lightness: 80%)); line-height: 23px; font-weight: normal; font-size: 1em; } Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that the mobile h3 color was changed incorrectly, diverging from its original value and the corresponding desktop implementation, and proposes a fix to restore consistency.	Medium
More