fix: dark mode support for mailbox settings UI#2064
Merged
rnwood merged 1 commit intornwood:copilot/fix-order-of-deliver-messagesfrom Mar 3, 2026
Merged
Conversation
Replace hardcoded light-mode colors in mailbox card inline styles with Element Plus CSS variables that automatically adapt to dark mode. Affected elements: mailbox cards, header/source filter items, hint text, and empty state placeholders.
Merged
11 tasks
|
rnwood
changed the base branch from
master
to
copilot/fix-order-of-deliver-messages
rnwood
merged commit e4f87a8
into
rnwood:copilot/fix-order-of-deliver-messages
17 of 19 checks passed
rnwood
added a commit
that referenced
this pull request
Mar 3, 2026
…enticated user routing (#2061) * Initial plan * Add AuthenticatedUsers recipient pattern for flexible mailbox routing Co-authored-by: rnwood <1327895+rnwood@users.noreply.github.com> * Update UI and documentation for AuthenticatedUsers pattern Co-authored-by: rnwood <1327895+rnwood@users.noreply.github.com> * Add comprehensive tests for AuthenticatedUsers pattern Co-authored-by: rnwood <1327895+rnwood@users.noreply.github.com> * Clarify AuthenticatedUsers pattern documentation Co-authored-by: rnwood <1327895+rnwood@users.noreply.github.com> * Implement AuthenticatedUsers as mailbox property with comprehensive tests Co-authored-by: rnwood <1327895+rnwood@users.noreply.github.com> * Changes before error encountered Co-authored-by: rnwood <1327895+rnwood@users.noreply.github.com> * fix: dark mode support for mailbox settings UI (#2064) Replace hardcoded light-mode colors in mailbox card inline styles with Element Plus CSS variables that automatically adapt to dark mode. Affected elements: mailbox cards, header/source filter items, hint text, and empty state placeholders. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rnwood <1327895+rnwood@users.noreply.github.com> Co-authored-by: paszczus <paszczus@gmail.com>
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
2 participants
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.
Summary
We tested PR #2061 (AuthenticatedUsers mailbox property) on our deployment and the functionality works correctly - routing by authenticated user, header filters, and source filters all work as expected.
However, we noticed that the Mailboxes tab in Settings dialog has hardcoded light-mode colors in inline styles, which makes it look broken in dark mode (white cards on dark background, unreadable text).
This PR replaces hardcoded color values with Element Plus CSS variables that automatically adapt to the current theme:
#fafafa/#f5f7fa→var(--el-fill-color-light)#e4e7ed/#dcdfe6→var(--el-border-color)/var(--el-border-color-light)#606266/#909399→var(--el-text-color-secondary)/var(--el-text-color-placeholder)#ecf5ff→var(--el-color-primary-light-9)(header filter cards)#f0f9ff→var(--el-color-success-light-9)(source filter cards)#409eff/#67c23a→var(--el-color-primary)/var(--el-color-success)Inline styles were extracted to scoped CSS classes for cleaner code.
Before (dark mode):
Cards appear as white boxes on dark background with unreadable text.
After (dark mode):
Cards properly adapt to the dark theme using Element Plus built-in dark mode variables.
Related
Test plan