Merged
Conversation
- Fix Cyberpunk theme: invisible chat messages due to missing --color-msg-text - Fix selected channel: black-on-black text in navigation menu - Fix user message contrast: poor readability in Cyberpunk and Sunset themes - Add --color-msg-text variable to all themes for consistent message styling - Add --color-menu-selected variable to fix selected channel visibility - Fix CSS specificity issue preventing user message colors from applying - Improve avatar display by adding default account icon 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a comprehensive theme system for the chat application, enabling users to select from six distinct visual themes (Mass Effect, Cyberpunk, Forest, Ocean, Sunset, and Monochrome) with persistence across sessions. The implementation transitions from SASS variables to CSS custom properties for dynamic theming and includes UI improvements such as a default user avatar icon and enhanced theme selector styling.
Key changes include:
- Implementation of a complete theme system with six predefined themes using CSS custom properties
- Addition of theme persistence using browser localStorage with automatic loading/saving
- UI enhancements including a theme selector dropdown in the navigation menu and default user avatar
Reviewed Changes
Copilot reviewed 17 out of 19 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Client/sass/variables.scss | Converts SASS variables to CSS custom properties for dynamic theming |
| src/Client/sass/themes/*.scss | Defines six theme configurations with color schemes and styling variables |
| src/Client/sass/app.scss | Imports theme system and removes hardcoded avatar background color |
| src/Client/sass/menu.scss | Adds theme selector UI and updates styling to use CSS custom properties |
| src/Client/sass/chat.scss | Updates message styling to use theme-aware color variables |
| src/Client/App/*.fs | Implements theme state management, persistence, and theme switching logic |
| src/Client/NavMenu/View.fs | Adds theme selector component to navigation menu |
| src/Client/UserAvatar/View.fs | Adds default user avatar icon for users without profile images |
Files not reviewed (1)
- .idea/.idea.fschat/.idea/vcs.xml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a theme system for the chat application, allowing users to select and persist different visual themes. It includes the implementation of six distinct themes, a theme selector UI, logic for saving and restoring the selected theme, and updates to use CSS variables for styling.
UI improvements:
Cleanup: