fix: correction of dark mode contrast in various locations by nielsdrost7 · Pull Request #570 · InvoicePlane/InvoicePlane-v2

nielsdrost7 · 2026-06-26T07:59:31Z

Filament applies --gray-100 to .fi-sidebar-item.fi-active > .fi-sidebar-item-btn
(the child element), not the

container. All custom themes were only
overriding the container, leaving the near-white button visible over dark/colored
sidebars and making white text unreadable. Extend each theme's fi-active block to
also target > .fi-sidebar-item-btn, > .fi-icon, and > .fi-sidebar-item-label.

Addresses [BUG]: Active sidebar navigation item is unreadable due to light background #568

Summary by CodeRabbit

New Features
- Added updated gray color palettes for multiple company themes.
- Improved sidebar and menu styling for clearer active, hover, and focus states.
- Added separate build modes for development and production.
Bug Fixes
- Fixed text contrast in sidebar items, notifications, and user/tenant menus to improve readability.
- Made active and hovered sidebar items render more consistently across theme variants.
Chores
- Production builds now enable minification, while development builds stay faster and easier to inspect.

…emes Filament applies --gray-100 to .fi-sidebar-item.fi-active > .fi-sidebar-item-btn (the child <a> element), not the <li> container. All custom themes were only overriding the container, leaving the near-white button visible over dark/colored sidebars and making white text unreadable. Extend each theme's fi-active block to also target > .fi-sidebar-item-btn, > .fi-icon, and > .fi-sidebar-item-label. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017kszQmhdqv9E3RGvT8Q1Vv

yarn build → vite build --mode development → no minification, readable output yarn prod → vite build --mode production → minified output yarn dev → vite dev server (unchanged) vite.config.js now uses the function form of defineConfig to gate build.minify on whether mode === 'production'. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017kszQmhdqv9E3RGvT8Q1Vv

…ebars Three additional classes of the same root problem (Filament targeting child elements that the custom theme overrides don't reach): Nav item hover/focus: .fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover applies --gray-100 — near-white flash on every link hover in a dark/colored sidebar. Fix: override with a mid-shade hover color per theme. Group trigger hover/focus: .fi-sidebar-group-dropdown-trigger-btn:hover applies --gray-100 — same white flash on expand/collapse buttons. Notifications button: hover gets --gray-100; icon gets --gray-400; label gets --gray-700 — all wrong on a dark/colored sidebar. User menu trigger: .fi-sidebar .fi-user-menu-trigger .fi-icon has specificity 0,3,0 so Filament's --gray-400 beats the theme's .fi-sidebar .fi-icon (0,2,0). .fi-tenant-menu-trigger-text gets --gray-950 (near-black on dark sidebar). Fix: nest overrides inside .fi-sidebar to match the same 0,3,0 specificity, letting cascade order (theme CSS comes after vendor CSS) resolve it. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017kszQmhdqv9E3RGvT8Q1Vv

nielsdrost7 · 2026-06-26T09:25:27Z

@coderabbitai summary

@theme

Instead of only chasing individual --gray-* clashes with per-selector !important overrides, remap the entire --gray-* token scale per theme so every Filament component using var(--gray-*) gets the correct color automatically — including future components not yet patched. Two scopes per theme: :root — content-area neutral palette with the theme's hue family: Nord → Snow Storm (50) through Polar Night (950) Orange → warm off-white through dark warm brown Reddit → warm red-tinged off-white through dark red-brown Blue → cool blue-tinted off-white through deep navy IP → (skipped; primary is panel-defined, not file-defined) .fi-sidebar — inverted/sidebar-context scale so Filament's var(--gray-*) usages (hover bg, icon color, text color) all resolve correctly without needing a :where(.dark) class on the body: 50/100 → hover bg (theme mid-shade) 200 → active bg (theme dark shade) 300 → subtle border/divider 400–950 → white (fg on dark/colored sidebar) Nord uses var(--color-polarnight-*) / var(--color-snowstorm-*) references from its @theme block. InvoicePlane uses var(--color-primary-*). Blue uses var(--color-blue-*). Orange/Reddit use hex literals. Existing selector overrides are untouched and continue to work as explicit belt-and-suspenders for already-known cases. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017kszQmhdqv9E3RGvT8Q1Vv

The .fi-sidebar gray-token blocks were semantically incoherent: --gray-50 was set to a darker value than --gray-300, and the --gray-700/950 (body/strong text) mapped to white — inverting the 50=lightest → 950=darkest ordering that Filament and any future component relies on. The sidebar is also not a reliable scope for var() inheritance: portaled elements (dropdowns, modals) render on <body> and inherit from :root, not from .fi-sidebar. The :root content-area remaps and per-selector !important overrides remain. The selector overrides are the correct tool for the sidebar: explicit, scoped to exactly what they target, and don't depend on a semantically consistent neutral scale. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017kszQmhdqv9E3RGvT8Q1Vv

coderabbitai · 2026-06-26T18:49:27Z

📝 Walkthrough

Walkthrough

The company Filament themes remap gray tokens and tighten sidebar active, hover, and trigger styling across the blue, nord, orange, and reddit variants. The Vite setup also splits development and production build commands and enables minification only in production.

Changes

Sidebar theme overrides

Layer / File(s)	Summary
Gray token remaps `resources/css/filament/company/invoiceplane-blue.css`, `resources/css/filament/company/nord.css`, `resources/css/filament/company/orange.css`, `resources/css/filament/company/reddit.css`	`--gray-*` variables are remapped to theme-specific neutral palettes in the company theme stylesheets.
Active sidebar item states `resources/css/filament/company/invoiceplane-blue.css`, `resources/css/filament/company/invoiceplane.css`, `resources/css/filament/company/nord.css`, `resources/css/filament/company/orange.css`, `resources/css/filament/company/reddit.css`	Active sidebar item buttons now force theme backgrounds and white nested icon/label text, with related sidebar and menu overrides included in the nord and orange sections.
Hover, focus, and trigger text `resources/css/filament/company/invoiceplane.css`, `resources/css/filament/company/invoiceplane-blue.css`, `resources/css/filament/company/nord.css`, `resources/css/filament/company/orange.css`, `resources/css/filament/company/reddit.css`	URL-backed sidebar items, dropdown triggers, database notification buttons, and user menu triggers now apply theme-specific hover/focus backgrounds and white nested text where those selectors are defined.

Build mode split

Layer / File(s)	Summary
Build mode split `package.json`, `vite.config.js`	The build script runs Vite in development mode, `prod` runs Vite in production mode, and minification is enabled only when the Vite mode is production.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A rabbit hopped through styles so bright,
Gray tokens tuned from dawn to night.
Dev and prod now bound their way,
While sidebar tails stayed neat and gay.
🐰✨ Thump! The build hops clean today.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title is relevant to the styling contrast fix, though it is broader than the main sidebar/theme changes.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/nord-sidebar-active-contrast-e569ge

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

nielsdrost7 linked an issue Jun 26, 2026 that may be closed by this pull request

[BUG]: Active sidebar navigation item is unreadable due to light background #568

Open

claude added 2 commits June 26, 2026 08:06

InvoicePlane deleted a comment from coderabbitai Bot Jun 26, 2026

nielsdrost7 changed the title ~~fix: override Filament active sidebar button background across all themes~~ fix: correction of dark mode contrast in various locations Jun 30, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: correction of dark mode contrast in various locations#570

fix: correction of dark mode contrast in various locations#570
nielsdrost7 wants to merge 5 commits into
developfrom
claude/nord-sidebar-active-contrast-e569ge

nielsdrost7 commented Jun 26, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

nielsdrost7 commented Jun 26, 2026

Uh oh!

coderabbitai Bot commented Jun 26, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

nielsdrost7 commented Jun 26, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

nielsdrost7 commented Jun 26, 2026

Uh oh!

coderabbitai Bot commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nielsdrost7 commented Jun 26, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 26, 2026 •

edited

Loading