more lexxy darkmode fixes - #47
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds comprehensive dark mode support to the Lexxy editor by implementing CSS media query overrides and updating table styling to properly adapt to dark color schemes.
- Introduces dark mode color variables via
prefers-color-schememedia query - Updates table header and cell styling to use new dark-mode-aware CSS variables
- Ensures proper color inheritance and background colors throughout the editor components
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| app/assets/stylesheets/lexxy-variables.css | Adds dark mode CSS variable overrides for colors, including ink, accent, code token, and table colors with a new @media (prefers-color-scheme: dark) block |
| app/assets/stylesheets/lexxy-content.css | Updates table header styling to use the new --lexxy-color-table-header-bg variable for consistent dark mode support |
| app/assets/stylesheets/application.bootstrap.scss | Enhances table styling within lexxy editor contexts to properly apply dark mode colors, including header cells, regular cells, and selected states with explicit background color declarations |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| width: unset; | ||
| inline-size: calc(100% - 0.5ch); | ||
| margin: 0.25ch; | ||
|
|
There was a problem hiding this comment.
Remove trailing whitespace at the end of this line.
| --lexxy-color-ink: #e9ecef; | ||
| --lexxy-color-ink-medium: #adb5bd; | ||
| --lexxy-color-ink-light: #6c757d; | ||
| --lexxy-color-ink-lighter: #6c757d; |
There was a problem hiding this comment.
The variables --lexxy-color-ink-light and --lexxy-color-ink-lighter are both set to the same color value #6c757d. These variables should represent different lightness levels in the dark mode color scheme. Consider adjusting one of these values to maintain the intended color hierarchy, similar to how they differ in the light mode (lines 5-6).
| --lexxy-color-ink-lighter: #6c757d; | |
| --lexxy-color-ink-lighter: #868e96; |
No description provided.