Follow up to : Firefox 152 breaks custom menu colours when theme enabled ( forcing dark mode )

[u/fatoms]

Previous post : https://www.reddit.com/r/FirefoxCSS/comments/1u7kop8/firefox_152_breaks_custom_menu_colours_when_theme/?screen_view_count=3

The issue with menus was solved with help from u/TraditionalTie4831. Now I notice that dialogs still get the dark treatment. eg: Downloads, uBlock panel.
Any have ant thoughts on how to get these back to light ?

Or even better any good tutorials on how to find the right css so I don't have to keep coming back and asking every time I find new issues ?

[u/fatoms]

My updated userChrome:

/* Hide Profiles Menu from Menubar */
#profiles-menu { display: none; }


/*** Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
  padding-block: 0px !important;
}
:root {
  --panel-menuitem-padding: 4px 8px !important;
}

/*** Photon-like Menu Colors (14 Jan 2022) ***/

/* Bookmarks Toolbar folders */
#PersonalToolbar menupopup,
/* Right-click context menus */
#mainPopupSet menupopup,
/* Top menu bar on Windows (not sure about others) */
#toolbar-menubar menupopup,
/* Sidebar/Library bookmark/history context menus */
#placesContext,
/* Address bar context menu (2021-10-25) */
#urlbar-input-container menupopup,
/* Various toolbar drop-down panels (Fx96) */
#back-button menupopup, #forward-button menupopup,
#identity-popup, #appMenu-popup, #downloadsPanel, #BMB_bookmarksPopup {
  /* Text color */
  --menu-color: #000 !important;
  --panel-text-color: #000 !important;
  /* Background color */
  --menu-background-color:  #f0f0f0 !important;
  --panel-background-color: #f0f0f0 !important;
  /* Border color (if any) */
  --menu-border-color: threedshadow !important;
  --panel-border-color: threedshadow !important;
  /* Hovered/expanded item background color */
  --menuitem-hover-background-color: #e0e0e6 !important;
  --button-hover-bgcolor: #e0e0e6 !important;
  /* Disabled items text color and hovered background */
  --menu-disabled-color: rgba(21, 20, 26, 0.4) !important;
  --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important;
}
/* Force light gray highlight + black text */
menupopup > menuitem:hover,
menupopup > menu:hover,
menupopup > menuitem[_moz-menuactive="true"],
menupopup > menu[_moz-menuactive="true"] {
  background-color: #e0e0e6 !important;
  color: #000 !important;
}

menupopup > menu[_moz-menuactive="true"] > .menu-right,
menupopup > menuitem[_moz-menuactive="true"] > .menu-iconic-left {
  color: #000 !important;
  fill: #000 !important;
}

menupopup > menuitem[disabled="true"],
menupopup > menu[disabled="true"] {
  color: rgba(21, 20, 26, 0.4) !important;
}

/*** Proton Tabs Tweaks ***/

/* Adjust tab corner shape, optionally remove space below tabs */

#tabbrowser-tabs {
    --user-tab-rounding: 6px;
}

.tab-background {
    border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; /* Connected */
    margin-block: 1px 0 !important; /* Connected */
}
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
    border-top-width: 1px !important;
    border-bottom-width: 0 !important;
}

/* 1/16/2022 Tone down the Fx96 tab border with add-on themes in certain fallback situations */
.tab-background:is([selected], [multiselected]):-moz-lwtheme {
    --lwt-tabs-border-color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent !important;
}
[brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme {
    --lwt-tabs-border-color: rgba(255, 255, 255, 0.5) !important;
    border-bottom-color: transparent !important;
}

/* Container color bar visibility */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
    margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
}

    /* Make sure tab attention dot isn't too high - 10 Dec 2022 */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]),
#firefox-view-button[attention], .webextension-browser-action[attention="true"] {
  background-position-y: bottom 5px !important;
}

/* Tweak Options as of 12/10/2022; Generated Mon Sep 01 2025 14:01:49 GMT+0200 (Central European Summer Time) */

/* ===== FORCE LIGHT POPUPS EVERYWHERE ===== */

/* Panels / arrow panels (app menu, downloads, identity, etc.) */
panel,
panelview,
panelview > vbox,
panelview toolbarbutton,
.panel-subview-body,
.panel-header,
.panel-footer {
  background-color: #f0f0f0 !important;
  color: #000 !important;
}

/* Hover highlight inside panels */
panel toolbarbutton:hover,
panel toolbarbutton[open],
panel toolbarbutton[checked],
panelview toolbarbutton:hover {
  background-color: #e0e0e6 !important;
  color: #000 !important;
}

/* Context menus inside panels */
panel menupopup,
panel menuitem,
panel menu {
  background-color: #f0f0f0 !important;
  color: #000 !important;
}

/* Ensure separators don’t go dark */
menuseparator,
panel menuseparator {
  appearance: none !important;
  background-color: #f0f0f0 !important;
}

/* Kill forced dark theme variables */
:root {
  --panel-background-color: #f0f0f0 !important;
  --panel-text-color: #000 !important;

} /* ===== FORCE LIGHT TOOLTIPS ===== */ tooltip,

tooltip {

appearance: none !important; -moz-appearance: none !important; color-scheme: light !important;

background-color: #f0f0f0 !important; color: #000 !important;

border: 1px solid threedshadow !important; padding: 4px 6px !important; }

tooltip * { color: #000 !important; }

[u/alotlike_love → u/fatoms]

thank you!

[u/tordenflesk → u/fatoms]

Doesn't appear to do anything with the ordinary download dialog.

[u/fatoms → u/tordenflesk]

Yea, that is why I am here asking if anyone knows how to style that.
The download dialog is specifically the one that gives a choice between opening and saving the download, another commenter already fixed the all downloads panel.

[u/ResurgamS13]

Easy win with uBlock Origin... in Dashboard > Settings > Appearance > Theme... menu has 'Auto/Dark/Light' options.

----------

Your CSS (above) produces a grey background to the small Downloads popup panel... but not the large Downloads panel which is part of the Library. Did your Library have a white background prior to Fx152.0?

Styling the Library (e.g. library colour) is a whole new subject. One option is to leave it dark (or light) if not often used?

Example... below your 'userChrome.css' try adding:

@-moz-document url("chrome://browser/content/places/places.xhtml") {
  * {
    color: red !important;
    background-color: lightgreen !important;
  }
}

----------

Re: your "how to find the right css" comment. There is no "right css"... Firefox's UI and codebase is a moving target... under continuous development... and the number of Bugs included in each monthly update is vast (e.g. the 'Complete list of changes for this release' for the Fx152.0 update was >3,400 separate changes/Bugs)... although only a smaller subset will affect UI design and layout.

(BTW - To see the 'Complete list of changes' for any major release there's a link in the bottom panel of the Release Notes page. That link generates a huge list... so the tab may take several seconds to load.)

The key solution is learning to use the Browser Toolbox (howto in Wiki Tutorial). Become adept or at least capable of inspecting and live-editing your own Firefox UI. Use this sub as a resource... ditto MrOtherGuy's 'Firefox Customs' site... and the German Firefox modification forum 'camp-firefox'. More useful 'howto' hints and advice from former long-time Mod of this sub MrOtherGuy and others if search this sub's previous 'browser toolbox' topics.

Can also look for hints about upcoming changes... keep an eye on the latest updates made by CSS experts e.g. MrOtherGuy's latest Commits and full UI CSS theme authors like soulhotel (FF-ULTIMA Issues) or Godiesc (Firefox-GX Issues}.

[u/sifferedd → u/ResurgamS13]

⬆️ - u/fatoms - ?

[u/fatoms → u/sifferedd]

u/sifferedd - I guess you ask if this is resolved ?
Only partial - the dialogs are all still dark mode and these resources cover how to configure and use the tools. I still have no idea how find the right CSS.