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

[ShashankFC]

User description

Test 7

Summary by CodeRabbit

Release Notes

• Style
  • Enhanced color rendering throughout the interface to improve visual contrast and support for light and dark themes. Colors now dynamically adjust based on your selected theme for better readability and visual consistency across all UI components, including buttons, links, badges, headers, notifications, modals, login forms, and user profiles.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

---

Replicated from ai-code-review-evaluation/discourse-coderabbit#7

---

CodeAnt-AI Description

Use secondary color for scaled text in dark themes to improve readability

What Changed

• Many UI text and badge colors that previously used scaled primary tones now switch to the secondary color when the dark theme is active, making dim or muted text readable in dark mode.
• A wide range of components updated: topic lists, headers, modals, login screens, buttons, badges, post metadata, user/profile pages, admin panels, and mobile styles now choose secondary-based scaling for dark themes.
• Small UI elements (icons, date strings, counts, hints) retain their intended muted appearance in light mode but maintain sufficient contrast in dark mode.

Impact

✅ Clearer text in dark theme
✅ More consistent badge and icon contrast across themes
✅ Fewer unreadable muted labels in dark mode

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[ShashankFC]

@CodeAnt-AI: review

[codeant-ai]

CodeAnt AI is running the review.

[codeant-ai]

Sequence Diagram

The PR updates many stylesheet rules so scaled colors use dark-light-choose(..., ...) — ensuring components use a secondary-based scaled color for dark themes. The diagram shows the high-level flow from theme selection to stylesheet color choice and UI rendering.

sequenceDiagram
    participant User
    participant ThemeManager
    participant Stylesheets
    participant Browser

    User->>ThemeManager: Selects light or dark theme
    ThemeManager->>Stylesheets: Provide current theme context
    Stylesheets->>Stylesheets: Use dark-light-choose(scale-color(primary...), scale-color(secondary...))
    Stylesheets-->>Browser: Emit computed CSS (colors vary by theme)
    Browser-->>User: Render UI with appropriate scaled colors

Loading

---

Generated by CodeAnt AI

[codeant-ai]

Nitpicks 🔍

🔒 No security issues identified

⚡ Recommended areas for review Inconsistent lightness mapping Some dark/light pairs use different lightness values (for example 20% paired with 80%, 75% paired with 25%). If the intent is to present equivalent perceived brightness across themes, using mismatched lightness values may unintentionally reduce contrast or invert expected emphasis in dark mode. Verify each pair for intended contrast. Consistency of icon/text color choices Multiple controls and small UI elements (post-date, arrows, badges) now use dark-light-choose with varying lightness values. Verify these consistent choices don't unintentionally change hierarchy (e.g., an important action becoming visually muted in one theme). Partial migration Most $primary usages were updated, but there are still lingering direct scale-color($primary, ...) usages (e.g., badge/category areas). Run a targeted grep to ensure all $primary color usages that need dark-theme fallbacks were updated consistently. Contrast verification Several replacements use asymmetric lightness pairs (for example 30%/70% and 40%/60%) for links and icons. Verify these produce acceptable contrast ratios in both light and dark themes (especially for smaller UI elements like icons). Inconsistent theme color logic Many places replace scale-color($primary, $lightness: ...) with dark-light-choose(scale-color($primary,...), scale-color($secondary,...)) but the paired lightness values vary across occurrences (40/60, 75/25, 80/20, etc.). This can produce inconsistent perceived contrast between light/dark themes — verify each pairing yields the intended visual parity and accessibility contrast.

[codeant-ai]

CodeAnt AI finished running the review.