Skip to content

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

Open
ShashankFC wants to merge 1 commit into
theme-color-scheme-prefrom
theme-color-scheme-post
Open

scale-color $lightness must use $secondary for dark themes#4
ShashankFC wants to merge 1 commit into
theme-color-scheme-prefrom
theme-color-scheme-post

Conversation

@ShashankFC

@ShashankFC ShashankFC commented Feb 4, 2026

Copy link
Copy Markdown

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


EntelligenceAI PR Summary

This PR implements comprehensive dark mode support across 33 SCSS files by replacing static color scaling with the dark-light-choose() function.

  • Light mode continues using scaled $primary colors with original lightness values
  • Dark mode now uses scaled $secondary colors with inverted lightness percentages for proper contrast
  • Changes affect all major UI components: admin panels, topic lists, headers, login pages, user profiles, badges, buttons, modals, search results, and mobile views
  • Standardized .name selector lightness to 50% across user stylesheets
  • Ensures consistent visual experience and proper readability across both theme modes

@entelligence-ai-pr-reviews

Copy link
Copy Markdown

Walkthrough

This PR implements comprehensive dark mode support across the entire application by replacing static color scaling with dynamic theme-aware color selection. All SCSS files have been updated to use the dark-light-choose() function, which automatically selects appropriate colors based on the active theme. Light mode continues using scaled $primary colors, while dark mode now uses scaled $secondary colors with inverted lightness values to ensure proper contrast. The changes affect 33 files spanning admin interfaces, topic lists, headers, login pages, user profiles, badges, buttons, modals, and mobile views, creating a consistent visual experience across both light and dark themes.

Changes

File(s) Summary
app/assets/stylesheets/common/admin/admin_base.scss Enhanced admin interface theme support by replacing static color scaling with dark-light-choose() for all text, border, and background colors.
app/assets/stylesheets/common/base/_topic-list.scss
app/assets/stylesheets/desktop/topic-list.scss
app/assets/stylesheets/mobile/topic-list.scss
Updated topic list styling with theme-aware colors for table headers, cells, buttons, icons, excerpts, and date strings using dark-light-choose().
app/assets/stylesheets/common/base/discourse.scss Modified coldmap color classes (.coldmap-high, .coldmap-med, .coldmap-low) to support dark/light mode switching.
app/assets/stylesheets/common/base/header.scss
app/assets/stylesheets/desktop/header.scss
Enhanced header elements with dynamic theme colors for topic counts, notification icons, badges, and search results.
app/assets/stylesheets/common/base/login.scss
app/assets/stylesheets/desktop/login.scss
app/assets/stylesheets/mobile/login.scss
Implemented theme-aware color selection for login page text, links, and instruction labels.
app/assets/stylesheets/common/base/notification-options.scss Updated muted icon colors to support both light and dark themes with appropriate contrast.
app/assets/stylesheets/common/base/search.scss Enhanced search result styling with theme-aware colors for text, dates, and highlighted terms.
app/assets/stylesheets/common/base/share_link.scss Updated .date class to dynamically select colors based on active theme.
app/assets/stylesheets/common/base/topic-post.scss
app/assets/stylesheets/desktop/topic-post.scss
app/assets/stylesheets/mobile/topic-post.scss
Replaced static color scaling with theme-aware selection for links, icons, user titles, quotes, and metadata across all topic post elements.
app/assets/stylesheets/common/base/user-badges.scss Enhanced badge count and grant-count colors with dark-light-choose() for proper theme contrast.
app/assets/stylesheets/common/base/user.scss
app/assets/stylesheets/desktop/user.scss
app/assets/stylesheets/mobile/user.scss
Implemented theme-aware colors for usernames, names, titles, instructions, and icons. Standardized .name lightness to 50%.
app/assets/stylesheets/common/components/badges.css.scss Updated badge background and link colors to support both light and dark themes.
app/assets/stylesheets/common/components/buttons.css.scss Modified disabled button hover state to use theme-aware color selection.
app/assets/stylesheets/desktop/compose.scss
app/assets/stylesheets/mobile/compose.scss
Enhanced compose interface icons and status elements with dynamic theme colors.
app/assets/stylesheets/desktop/modal.scss
app/assets/stylesheets/mobile/modal.scss
Replaced static colors with theme-aware selection for modal footers, close buttons, message length indicators, and tag choosers.
app/assets/stylesheets/desktop/queued-posts.scss Updated timestamp span colors to support theme-aware selection.
app/assets/stylesheets/desktop/topic.scss
app/assets/stylesheets/mobile/topic.scss
Enhanced private message glyphs and reply indicators with dynamic theme colors.
app/assets/stylesheets/desktop/upload.scss
app/assets/stylesheets/mobile/upload.scss
Updated description and hint text colors to support both light and dark themes.
app/assets/stylesheets/embed.css.scss Modified new user link colors in embedded posts for theme-aware selection.

Sequence Diagram

This diagram shows the interactions between components:

sequenceDiagram
    participant Browser
    participant ThemeEngine as Theme Engine
    participant SCSS as SCSS Compiler
    participant DarkLight as dark-light-choose()
    participant ScaleColor as scale-color()
    participant CSS as Rendered CSS

    Browser->>ThemeEngine: Request page load
    ThemeEngine->>ThemeEngine: Detect user theme preference
    
    ThemeEngine->>SCSS: Compile stylesheets with theme context
    
    loop For each color property
        SCSS->>DarkLight: Evaluate dark-light-choose(light_value, dark_value)
        DarkLight->>ThemeEngine: Query current theme mode
        
        alt Light Mode
            ThemeEngine-->>DarkLight: Return "light"
            DarkLight->>ScaleColor: Process scale-color($primary, $lightness: X%)
            ScaleColor-->>DarkLight: Return lightened primary color
            DarkLight-->>SCSS: Return light mode color
        else Dark Mode
            ThemeEngine-->>DarkLight: Return "dark"
            DarkLight->>ScaleColor: Process scale-color($secondary, $lightness: Y%)
            ScaleColor-->>DarkLight: Return adjusted secondary color
            DarkLight-->>SCSS: Return dark mode color
        end
    end
    
    SCSS->>CSS: Generate final CSS with theme-appropriate colors
    CSS-->>Browser: Apply styles to UI elements
    
    Note over Browser,CSS: Colors now adapt to light/dark theme<br/>across admin, topics, headers, modals, etc.
Loading

🔗 Cross-Repository Impact Analysis

Enable automatic detection of breaking changes across your dependent repositories. → Set up now

Learn more about Cross-Repository Analysis

What It Does

  • Automatically identifies repositories that depend on this code
  • Analyzes potential breaking changes across your entire codebase
  • Provides risk assessment before merging to prevent cross-repo issues

How to Enable

  1. Visit Settings → Code Management
  2. Configure repository dependencies
  3. Future PRs will automatically include cross-repo impact analysis!

Benefits

  • 🛡️ Prevent breaking changes across repositories
  • 🔍 Catch integration issues before they reach production
  • 📊 Better visibility into your multi-repo architecture

▶️AI Code Reviews for VS Code, Cursor, Windsurf
Install the extension

Note for Windsurf Please change the default marketplace provider to the following in the windsurf settings:

Marketplace Extension Gallery Service URL: https://marketplace.visualstudio.com/_apis/public/gallery

Marketplace Gallery Item URL: https://marketplace.visualstudio.com/items

Entelligence.ai can learn from your feedback. Simply add 👍 / 👎 emojis to teach it your preferences. More shortcuts below

Emoji Descriptions:

  • ⚠️ Potential Issue - May require further investigation.
  • 🔒 Security Vulnerability - Fix to ensure system safety.
  • 💻 Code Improvement - Suggestions to enhance code quality.
  • 🔨 Refactor Suggestion - Recommendations for restructuring code.
  • ℹ️ Others - General comments and information.

Interact with the Bot:

  • Send a message or request using the format:
    @entelligenceai + *your message*
Example: @entelligenceai Can you suggest improvements for this code?
  • Help the Bot learn by providing feedback on its responses.
    @entelligenceai + *feedback*
Example: @entelligenceai Do not comment on `save_auth` function !

Also you can trigger various commands with the bot by doing
@entelligenceai command

The current supported commands are

  1. config - shows the current config
  2. retrigger_review - retriggers the review

More commands to be added soon.

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.

2 participants