Skip to content

fix: add dark background color for .q-drawer in dark mode#249

Open
AmoghParmar wants to merge 1 commit into
moqui:masterfrom
AmoghParmar:fix/dark-theme-drawer-overlap
Open

fix: add dark background color for .q-drawer in dark mode#249
AmoghParmar wants to merge 1 commit into
moqui:masterfrom
AmoghParmar:fix/dark-theme-drawer-overlap

Conversation

@AmoghParmar

Copy link
Copy Markdown

Summary

Fixes the dark mode drawer overlap issue reported in #248.

When the dark theme (body--dark) is active, the .q-drawer component lacks a background color override, causing it to appear transparent and overlap/blend with other content on horizontal scroll.

Fix

Added a dark background color override for the drawer in WebrootVue.qvt.css, right alongside the existing .body--dark .q-menu rule:

.body--dark .q-drawer {
    background-color: black;
}

File Changed

base-component/webroot/screen/webroot/css/WebrootVue.qvt.css

Related Issue

Closes #248

@AmoghParmar AmoghParmar force-pushed the fix/dark-theme-drawer-overlap branch from efebf68 to 7e50282 Compare June 16, 2026 10:50
Fixes the drawer overlap issue in dark mode by adding an explicit
background-color override for .q-drawer when the dark theme is active.

Closes moqui#248
@AmoghParmar AmoghParmar force-pushed the fix/dark-theme-drawer-overlap branch from 7e50282 to a04d2be Compare June 16, 2026 10:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

Bug: Navigation drawers have transparent background in Dark Theme, causing text overlap on horizontal scroll

1 participant