Skip to content

Conversation

@akshayutture-augment
Copy link

@akshayutture-augment akshayutture-augment commented Nov 14, 2025

Test 7

Summary by CodeRabbit

Release Notes

  • Style
    • Updated color styling throughout the interface to better utilize both primary and secondary theme colors. This enhances visual consistency and improves contrast across different theme configurations for text, icons, badges, and other UI elements.

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


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

@akshayutture-augment
Copy link
Author

@coderabbitai review

@akshayutture-augment
Copy link
Author

@coderabbitai review

@coderabbitai
Copy link

coderabbitai bot commented Nov 21, 2025

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai
Copy link

coderabbitai bot commented Nov 21, 2025

Walkthrough

This pull request systematically replaces color computations across SCSS stylesheets, transitioning from single-primary color scaling via scale-color($primary, $lightness: X%) to a dual-color selection using dark-light-choose(scale-color($primary, $lightness: X%), scale-color($secondary, $lightness: Y%)). The changes affect approximately 25 stylesheet files with no modifications to HTML structure, JavaScript logic, or component behavior.

Changes

Cohort / File(s) Change Summary
Admin & Core Base Styles
app/assets/stylesheets/common/admin/admin_base.scss, app/assets/stylesheets/common/base/discourse.scss
Color declarations for descriptions, help text, borders, badges, and metadata updated from single-scale primary to dark-light-choose blending primary and secondary colors.
Base Topic & Content Styles
app/assets/stylesheets/common/base/topic-list.scss, app/assets/stylesheets/common/base/topic-post.scss, app/assets/stylesheets/common/base/share_link.scss
Topic excerpts, date text, links, and via-email states updated to use dark-light-choose with primary-secondary color pairs instead of fixed primary scales.
Base UI & Navigation Styles
app/assets/stylesheets/common/base/header.scss, app/assets/stylesheets/common/base/login.scss, app/assets/stylesheets/common/base/notification-options.scss, app/assets/stylesheets/common/base/search.scss, app/assets/stylesheets/common/base/user-badges.scss, app/assets/stylesheets/common/base/user.scss
Icon colors, notification badges, login text, search highlights, and user badge counts transitioned to dark-light-choose for improved contrast.
Component Styles
app/assets/stylesheets/common/components/badges.css.scss, app/assets/stylesheets/common/components/buttons.css.scss
Badge notification backgrounds and button text colors updated to dual-color selection logic.
Desktop Theme Styles
app/assets/stylesheets/desktop/compose.scss, app/assets/stylesheets/desktop/header.scss, app/assets/stylesheets/desktop/login.scss, app/assets/stylesheets/desktop/modal.scss, app/assets/stylesheets/desktop/queued-posts.scss, app/assets/stylesheets/desktop/topic-list.scss, app/assets/stylesheets/desktop/topic-post.scss, app/assets/stylesheets/desktop/topic.scss, app/assets/stylesheets/desktop/upload.scss, app/assets/stylesheets/desktop/user.scss
Comprehensive color updates across reply hints, search blurbs, modal text, post info, topic icons, and user-related elements using dark-light-choose pattern.
Embed Styles
app/assets/stylesheets/embed.css.scss
New user link colors updated to dark-light-choose with primary and secondary variants.
Mobile Theme Styles
app/assets/stylesheets/mobile/compose.scss, app/assets/stylesheets/mobile/login.scss, app/assets/stylesheets/mobile/modal.scss, app/assets/stylesheets/mobile/topic-list.scss, app/assets/stylesheets/mobile/topic-post.scss, app/assets/stylesheets/mobile/topic.scss, app/assets/stylesheets/mobile/upload.scss, app/assets/stylesheets/mobile/user.scss
Mobile-specific color calculations for draft status, form instructions, message length hints, topic icons, and user interface elements converted to dark-light-choose dual-color selection.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Areas requiring attention:

  • Lightness value pairing consistency: Verify that secondary lightness values (Y%) are appropriately inverse or complementary to primary values (X%) across all 25+ files to ensure intended contrast (e.g., primary 75% paired with secondary 25%)
  • Edge cases in modal and form styling: Modal color declarations span multiple selectors with varying lightness combinations; cross-reference modal.scss (desktop/mobile) for consistency
  • Mobile vs. Desktop parity: Ensure mobile and desktop variants apply similar lightness logic despite separate file definitions (e.g., compose.scss, user.scss, topic-post.scss pairs)
  • Theme verification: Test the final rendered colors in both light and dark theme modes to confirm dark-light-choose logic produces expected contrast and readability

Poem

🐰 Colors dance in shades so fine,

Primary and secondary entwine,

Dark and light, a balance sought,

Twenty-five files gently wrought,

Themes now choose their finest hue! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and specifically describes the main change: replacing scale-color lightness calculations to use secondary colors for dark themes across multiple SCSS files.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch theme-color-scheme-post

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7554b5e and d38c4d5.

📒 Files selected for processing (32)
  • app/assets/stylesheets/common/admin/admin_base.scss (8 hunks)
  • app/assets/stylesheets/common/base/_topic-list.scss (4 hunks)
  • app/assets/stylesheets/common/base/discourse.scss (1 hunks)
  • app/assets/stylesheets/common/base/header.scss (4 hunks)
  • app/assets/stylesheets/common/base/login.scss (2 hunks)
  • app/assets/stylesheets/common/base/notification-options.scss (1 hunks)
  • app/assets/stylesheets/common/base/search.scss (1 hunks)
  • app/assets/stylesheets/common/base/share_link.scss (1 hunks)
  • app/assets/stylesheets/common/base/topic-post.scss (4 hunks)
  • app/assets/stylesheets/common/base/user-badges.scss (2 hunks)
  • app/assets/stylesheets/common/base/user.scss (1 hunks)
  • app/assets/stylesheets/common/components/badges.css.scss (2 hunks)
  • app/assets/stylesheets/common/components/buttons.css.scss (1 hunks)
  • app/assets/stylesheets/desktop/compose.scss (1 hunks)
  • app/assets/stylesheets/desktop/header.scss (1 hunks)
  • app/assets/stylesheets/desktop/login.scss (2 hunks)
  • app/assets/stylesheets/desktop/modal.scss (5 hunks)
  • app/assets/stylesheets/desktop/queued-posts.scss (1 hunks)
  • app/assets/stylesheets/desktop/topic-list.scss (5 hunks)
  • app/assets/stylesheets/desktop/topic-post.scss (13 hunks)
  • app/assets/stylesheets/desktop/topic.scss (1 hunks)
  • app/assets/stylesheets/desktop/upload.scss (1 hunks)
  • app/assets/stylesheets/desktop/user.scss (4 hunks)
  • app/assets/stylesheets/embed.css.scss (1 hunks)
  • app/assets/stylesheets/mobile/compose.scss (3 hunks)
  • app/assets/stylesheets/mobile/login.scss (2 hunks)
  • app/assets/stylesheets/mobile/modal.scss (1 hunks)
  • app/assets/stylesheets/mobile/topic-list.scss (4 hunks)
  • app/assets/stylesheets/mobile/topic-post.scss (7 hunks)
  • app/assets/stylesheets/mobile/topic.scss (1 hunks)
  • app/assets/stylesheets/mobile/upload.scss (1 hunks)
  • app/assets/stylesheets/mobile/user.scss (3 hunks)
🔇 Additional comments (55)
app/assets/stylesheets/desktop/upload.scss (1)

19-21: Verify the lightness value for secondary color in dark themes.

The change correctly implements the dark-light-choose() pattern with scale-color($primary, $lightness: 50%) for light mode and scale-color($secondary, $lightness: 50%) for dark mode. However, using identical lightness values (50%) for both primary and secondary may not produce optimal contrast or visual consistency in dark themes.

Since the PR title emphasizes "$secondary for dark themes," confirm that:

  1. The 50% lightness value is appropriate for the secondary color to maintain readability and visual hierarchy in dark themes.
  2. This lightness value is consistent with other similar color transitions across the ~25 files mentioned in the PR summary, or if secondary colors use different lightness adjustments in different contexts.
app/assets/stylesheets/desktop/topic.scss (2)

60-64: Implements dark theme color selection correctly.

The change introduces dual-color selection for .private-message-glyph with appropriate lightness adjustments for contrast: primary +75% for light themes, secondary -25% for dark themes.


67-78: Approve changes; verify lightness values for contrast.

The change updates a.reply-new to use secondary color in dark themes while maintaining consistent lightness (50%) across both variants, aligning with the PR objective to support dual-color selection.

Please verify that the lightness values (50% for both primary and secondary) provide sufficient visual contrast and readability in both light and dark theme contexts. Since this change affects a clickable link element, ensure the color meets accessibility standards for text contrast in both theme variants.

app/assets/stylesheets/common/base/notification-options.scss (1)

2-2: Code change is valid and correctly implements the dual-color theme pattern.

Verification confirms:

  • The dark-light-choose() function is properly defined in app/assets/stylesheets/common/foundation/variables.scss:46 and available throughout the codebase.
  • The change correctly applies the pattern: primary color at 40% lightness for light theme, secondary at 60% for dark theme.
  • Lightness values vary contextually across ~155 uses in the codebase (50-50 for balanced contrast, 10-90 for high contrast, etc.), indicating this variation is intentional per UI element requirements rather than inconsistent application.

The code is correct and ready to merge.

app/assets/stylesheets/desktop/queued-posts.scss (1)

14-14: Code change approved.

The dark-light-choose() function is a standard SCSS function provided by Discourse core and is properly defined in the codebase. The change correctly applies the dual-color selection pattern for dark theme support, using identical lightness values (50% for both primary and secondary), which is consistent with similar color selections throughout the codebase.

app/assets/stylesheets/common/components/buttons.css.scss (1)

60-60: Pattern is consistent with established codebase conventions.

The change follows the PR objective of transitioning to dark-light-choose for theme-aware colors. The lightness values (70% for light theme, 30% for dark theme) match the same pattern used in 12+ other places throughout the stylesheet files (embed.css.scss, modal.scss, topic-post.scss, badges.css.scss, and others), indicating this is an intentional, established choice in the codebase rather than an arbitrary value.

No accessibility tests were found in the codebase to validate contrast programmatically, so confirm that the visual rendering meets your WCAG standards before merging.

app/assets/stylesheets/embed.css.scss (1)

88-90: Verify dark-light-choose is properly defined in theme utilities.

The color composition looks sound—complementary lightness values (70% for primary, 30% for secondary) should provide good visual contrast across themes. However, verify that the dark-light-choose SCSS function is available and correctly resolves based on the active theme.

app/assets/stylesheets/desktop/login.scss (2)

15-19: Theme-aware login link color is well-chosen.

Lightness values (35% primary / 65% secondary) provide appropriate contrast between light and dark themes for login links.


46-50: Balanced color choice for instruction labels.

The 50%/50% split provides neutral midpoint coloring for instructions across both theme variants.

app/assets/stylesheets/mobile/upload.scss (1)

9-11: Balanced color for upload description text.

The 50%/50% lightness split is appropriate for descriptive text styling.

app/assets/stylesheets/common/base/search.scss (1)

26-39: Thoughtful color differentiation for search results.

The consistent 40%/60% pairing for regular search text (.blurb, .date) and the stronger 25%/75% contrast for .search-highlight demonstrates good UX thinking—highlighted terms stand out more prominently than surrounding text.

app/assets/stylesheets/mobile/topic.scss (1)

34-34: Clear icon coloring across themes.

The 75%/25% lightness split ensures the private message glyph remains visually prominent and readable in both light and dark themes.

app/assets/stylesheets/desktop/compose.scss (1)

336-342: Consistent theme-aware icon coloring.

The 50%/50% balanced lightness pair is appropriate for the reply-to icon, and this change aligns with existing dark-light-choose usage elsewhere in the file (e.g., lines 68, 75, 85).

app/assets/stylesheets/common/base/user.scss (1)

117-130: Well-structured user profile text hierarchy.

The consistent 30%/70% pair for username and name elements provides visual prominence, while the 50%/50% neutral pair for the title creates appropriate hierarchy. This reflects thoughtful design for user card styling.

app/assets/stylesheets/common/base/share_link.scss (1)

59-63: Neutral date styling in share link popup.

The 50%/50% lightness pair maintains consistency with similar secondary text styling patterns elsewhere in the codebase.

app/assets/stylesheets/desktop/header.scss (1)

52-61: Color scheme update applied correctly.

Both color properties follow the dual-color dark-light-choose pattern consistently, with semantically appropriate lightness values for the search blurb and highlight contrast.

app/assets/stylesheets/common/base/discourse.scss (1)

75-82: Thermal color map update maintains inverse lightness strategy.

The coldmap color updates intentionally use inverse lightness values (70%/30%, 60%/40%, 50%/50%) for appropriate thermal display contrast between light and dark themes. !important flags are preserved correctly.

app/assets/stylesheets/common/base/user-badges.scss (1)

62-62: Badge color updates follow consistent dual-color pattern.

Both color properties correctly implement dark-light-choose with contextually appropriate lightness values (equal at 50% for count, inverse at 40%/60% for grant-count).

Also applies to: 97-97

app/assets/stylesheets/common/base/login.scss (1)

39-39: Login form color scheme updated correctly.

Both color properties follow the dual-color pattern with appropriate lightness values: neutral (50%/50%) for helper text and inverse (35%/65%) for login button links.

Also applies to: 54-54

app/assets/stylesheets/mobile/user.scss (1)

115-115: Mobile user page color updates maintain consistent secondary-text styling.

All five color property updates correctly implement the dual-color pattern with balanced 50%/50% lightness values for instructions, notification icons, group member info, and user field controls—appropriate for secondary text across light and dark themes.

Also applies to: 489-489, 497-497, 503-503, 580-580

app/assets/stylesheets/desktop/user.scss (1)

59-59: Desktop user page color updates maintain consistency across all secondary-text elements.

All six color properties correctly implement the dual-color pattern with balanced 50%/50% lightness values, creating consistent styling for instructions, table headings, notification icons, group member details, and form controls—aligning with the mobile user page updates.

Also applies to: 173-173, 514-514, 522-522, 527-527, 603-603

app/assets/stylesheets/desktop/topic-post.scss (1)

34-34: Topic-post color updates demonstrate thoughtful context-aware theming.

All 15+ color property changes correctly implement dark-light-choose with carefully selected lightness values:

  • Neutral secondary text (50%/50%) for dates, metadata, and secondary indicators
  • Medium contrast (60%/40%, 75%/25%) for interactive elements and badges
  • High contrast (20%/80%, 70%/30%) for emphasis and primary actions

The variation in lightness values shows intentional, context-appropriate design for post controls, metadata, topic maps, and buttons.

Also applies to: 81-81, 113-113, 126-126, 278-278, 291-291, 294-294, 321-321, 329-329, 342-342, 382-382, 416-416, 896-897, 941-941, 958-958

app/assets/stylesheets/mobile/login.scss (1)

17-17: Mobile login colors aligned with base login stylesheet.

Both color properties correctly implement dark-light-choose with values matching common/base/login.scss: darker links (35%/65%) and neutral instruction text (50%/50%), ensuring consistent styling across login variants.

Also applies to: 45-45

app/assets/stylesheets/mobile/modal.scss (1)

102-102: ✓ Approved. Color scheme pattern is correctly applied with inverse lightness values (30%+70%=100%).

app/assets/stylesheets/common/components/badges.css.scss (2)

239-239: ✓ Approved. Badge notification background properly themed with 70%/30% inverse lightness split for better contrast across light/dark themes.


285-285: ✓ Approved. Badge posts link color correctly updated with 40%/60% inverse lightness pattern.

app/assets/stylesheets/desktop/topic-list.scss (4)

39-42: ✓ Approved. Icon colors (.fa-thumb-tack, .fa-bookmark) correctly themed with balanced 50%/50% lightness for visual consistency.


51-55: ✓ Approved. Table header and cell coloring properly updated with consistent 50%/50% inverse lightness pattern.


135-144: ✓ Approved. Post action colors and links correctly styled with uniform 50%/50% lightness ratio for balanced theme support.


223-227: ✓ Approved. Featured topic styling (icons and links) properly themed with consistent 50%/50% lightness pairing.

app/assets/stylesheets/mobile/topic-post.scss (4)

49-49: ✓ Approved. Interactive element colors (.button, .reply-to-tab, .topic-map headings) consistently themed with balanced 50%/50% lightness.

Also applies to: 151-151, 182-190


247-247: ✓ Approved. Numeric indicators properly themed with 20%/80% inverse lightness for appropriate visual hierarchy and emphasis.


270-270: ✓ Approved. Domain text correctly styled with 75%/25% lightness ratio to achieve muted, secondary appearance.


442-442: ✓ Approved. Admin and new-user styling properly themed with appropriate lightness ratios (50%/50% and 70%/30%) for visual distinction.

Also applies to: 498-498

app/assets/stylesheets/mobile/compose.scss (3)

36-36: ✓ Approved. Draft status color correctly updated to use dual primary/secondary theming with 75%/25% inverse lightness, improving consistency across light/dark themes.


51-51: ✓ Approved. Toggler icon color properly themed with balanced 50%/50% lightness for consistent visibility.


168-168: ✓ Approved. Disabled input field styling correctly updated with 75%/25% inverse lightness ratio for appropriate muted appearance.

Also applies to: 172-172

app/assets/stylesheets/mobile/topic-list.scss (2)

75-75: ✓ Approved. Table cell and icon colors consistently themed with balanced 50%/50% lightness for mobile topic-list view.

Also applies to: 95-95, 146-146


209-209: ✓ Approved. Category footer figure text properly styled with 10%/90% extreme inverse lightness for high-contrast emphasis on author metadata.

app/assets/stylesheets/desktop/modal.scss (4)

50-50: ✓ Approved. Modal hint and counter text colors properly themed with 70%/30% inverse lightness for muted secondary appearance.

Also applies to: 94-94


67-67: ✓ Approved. Close button color correctly styled with 35%/65% inverse lightness for balanced visibility across themes.


117-117: ✓ Approved. Badge list links properly themed with 50%/50% normal state and 40%/60% hover state for appropriate visual hierarchy and interaction feedback.

Also applies to: 121-121


131-131: ✓ Approved. Cannot-delete warning text correctly styled with 60%/40% inverse lightness for appropriate emphasis.

app/assets/stylesheets/common/admin/admin_base.scss (6)

385-386: Verify dark-light-choose() function semantics and lightness percentage selection.

The changes systematically apply dark-light-choose() with complementary lightness adjustments. Confirm that the function's argument order (primary first, secondary second) aligns with the intended theme behavior, and that the 50% / 50% symmetric adjustment for description text produces the desired visual result in both light and dark themes.


506-506: Verify lightness percentage strategy for badge help text.

Line 506 uses 40% / 60% lightness (inverse) compared to similar text colors elsewhere (e.g., line 385 uses 50% / 50%). Confirm this choice is intentional and produces appropriate contrast in both themes, especially for help text readability in badge sections.


524-524: Verify border color contrast for badge actions section.

Line 524 applies an 80% / 20% split to a border, which differs from other border colors in the file (e.g., lines 577 and 600 use 75% / 25%). Confirm these variations are intentional and that the border remains visible in both light and dark theme modes.


577-577: Confirm duplicate border color patterns are intentional.

Lines 577 (.ac-wrap border) and 600 (.select2-choices border) both use identical 75% / 25% lightness adjustments. Verify this pattern is intentional and consistently applied across similar UI components.

Also applies to: 600-600


726-726: Consistent treatment of .description color styling.

Both line 385 (.desc) and line 726 (.description) use the same symmetric 50% / 50% lightness adjustment. Verify these are distinct selectors and that the duplication is intentional (.desc in settings, .description in customize area).


1294-1294: Verify consistency of staff action logs styling.

Lines 1294 (filter button background) and 1331 (border-bottom) both use 75% / 25% lightness adjustment. This pattern aligns with badge and group styling elsewhere in the file, suggesting consistent treatment. Confirm the background-color and border-color use the same values intentionally.

Also applies to: 1331-1331

app/assets/stylesheets/common/base/header.scss (2)

195-196: Clarify intent of differing icon color adjustments in notifications dropdown.

Line 195 applies .fa color with symmetric 50% / 50% lightness, while line 196 applies .icon color with inverse 30% / 70% lightness. Confirm whether these are:

  • Different display contexts (e.g., one for light theme, one for dark)
  • Intentionally distinct icon styles with different contrast requirements
  • Mutually exclusive states that don't appear together

If .fa and .icon are never shown simultaneously, the divergence is acceptable.


153-153: Consistent treatment of text colors across dropdowns.

Lines 153 (topics count), 301 (category badge), and 332 (topic statuses) all use symmetric 50% / 50% lightness adjustment for text, which provides balanced color in both light and dark themes. This consistency is appropriate for readable UI labels.

Also applies to: 301-301, 332-332

app/assets/stylesheets/common/base/topic-post.scss (3)

15-15: Verify lightness adjustments for link and icon emphasis in post headers.

Lines 15, 21, and 55 apply decreasing-primary lightness (30%, 40%, 30%) to links and icons. This inverse pattern suggests these elements are de-emphasized compared to standard text. Confirm this visual hierarchy is intentional:

  • Line 15: username link (30/70)
  • Line 21: user status icon (40/60)
  • Line 55: quote title link (30/70)

If these should be equally prominent with other text colors, consider using the symmetric 50/50 pattern used on line 24.

Also applies to: 21-21, 55-55


24-24: Good: Balanced emphasis for user title text.

Line 24 applies symmetric 50% / 50% lightness to .new_user, .user-title, and .user-title a elements, providing balanced color in both light and dark themes. This is appropriate for primary metadata display.


71-71: Confirm intentional reversal of lightness for decorative controls.

Lines 71 and 159 apply inverse 70% / 30% lightness (opposite of link patterns on lines 15, 55), making these elements more visible/prominent compared to links. Verify this is intentional:

  • Line 71: quote-controls (quote/reply buttons)
  • Line 159: via-email metadata

If decorative controls should receive the same de-emphasis as links, consider unifying to the 30/70 pattern. If they warrant higher prominence, document this visual hierarchy for maintainability.

Also applies to: 159-159

app/assets/stylesheets/common/base/_topic-list.scss (1)

48-48: Apply dual-color theming consistently across all primary color scales.

The changes correctly replace scale-color($primary, $lightness: ...) with dark-light-choose(scale-color($primary, $lightness: X%), scale-color($secondary, $lightness: Y%)) to support dark/light theme variants. However, verify that the lightness asymmetry is intentional: lines 48, 55, 69, and 301 use (50%, 50%), while line 246 uses (60%, 40%). This asymmetry may be intentional to balance visual appearance across themes, but ensure it's consistent with the design intent.

Also applies to: 51-51, 55-55, 69-69, 246-246, 301-301


Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants