How to change colour of right-click menu borders?

[Zabooby]

How to I change the border colour of right-click menus? Is there an option in the Firefox color addon for this?

[black7375]

I moved to discussions to separate bugs and usage inquiries.

---

Add to userChrome.css file: (Compatible code considering the Firefox version)

html#main-window menupopup:not(.in-menulist) {
  --menu-border-color: red !important;
  --panel-border-color: var(--menu-border-color) !important;
}

[Zabooby]

Thank you for the solution and sorry for opening an issue, I didn't know about the discussions page. However I right clicked in the history sidebar and the border doesn't apply there. Is there any other right click menus where this border won't apply?

Also (related question) I remember seeing a css theme a while back that somehow matches the theme selected to the library window, right now you can apply themes but the library window stays the default dark/light theme. Any plans to match themes?

[black7375]

I know that I can't match the color of the selected theme.
Can you tell me the link?

I want to add it to the v7.5.0 version.

[Zabooby]

That's the problem, I can't remember where I saw it. I'm pretty sure it was on GitHub I'll try and find it and post the link here.

Also if you look at the original screenshot at the top of this post, is it possible to also change the colour of the horizontal separators?

[black7375]

Of course.
The Firefox version is updated, and I found an incompatible part and just patched it. 9204e1c

You may be using an unpatched version, so use the following.

html#main-window menupopup:not(.in-menulist) menuseparator {
 --menu-border-color: red !important;
 border-top: 1px solid var(--menu-border-color) !important;
}

[Zabooby]

Thanks I used the unpatched version for now and it works.

Ok so here is what I found for customising the Library window:

GitHub links:

This one seems to be the most promising: https://github.com/PROxZIMA/Sweet-Pop#library
Here is another, if you scroll down they were able to change the text colour: https://github.com/Guerra24/Firefox-UWP-Style
This one is really old, but has been linked alot on Reddit when library customisations was talked about: https://github.com/overdodactyl/ShadowFox

Reddit links, keep in mind a few are quite old so the code might not work anymore:

Styling library: https://www.reddit.com/r/FirefoxCSS/comments/kwj04q/problems_styling_library_treechildren/ --- https://www.reddit.com/r/FirefoxCSS/comments/qok4uw/styling_other_windows/
Text in library: https://www.reddit.com/r/FirefoxCSS/comments/hpg3yx/trying_customize_library_text/
Colours: https://www.reddit.com/r/FirefoxCSS/comments/dxj7z8/how_to_change_the_colors_in_library/ --- https://www.reddit.com/r/FirefoxCSS/comments/p3unki/library_colors_suddenly_and_randomly_changed/ --- https://www.reddit.com/r/firefox/comments/f38zd1/library_colors_havent_matched_theme_for_years/
Misc: https://www.reddit.com/r/FirefoxCSS/comments/cpigll/library_icons_panel_color_scrollbar_and_secure/ --- https://www.reddit.com/r/FirefoxCSS/comments/nyz6fe/css_for_the_separators_in_the_library_and_border/

I missed out a lot of posts but if you want to check them out click here.

Not related to the library but I think adding this would be great to unify the selected theme, https://www.reddit.com/r/FirefoxCSS/comments/o0s2ez/css_for_changing_the_background_color_of_the/

Hope all of these links help!

[black7375]

Thank you for looking for a variety of examples.

Oh, this is more complicated than we thought.
As far as know, browser main window and library window are completely separated.
Unfortunately, it means that the theme information for the browser is not provide to library window.
However, userChrome.css, unlike Browser theme, is applied to all windows.
All the themes just seem to work by forcibly specifying colors.

As a result, we only use proton design color.
https://github.com/black7375/Firefox-UI-Fix/blob/master/src/library/_proton.scss

The compromise is to expose the css variable so that users can customize it.
Like this:

:root {
  --uc-menu-border-color: red;
}

[Zabooby]

So to be clear, the way you will implement it is by adding the library css variables to the userchrome.css file so users can customise it to their liking? How many variables are there?

[Zabooby]

Damn that's a lot of variables, do you plan on adding information on what each of them do to the wiki and when do you plan on releasing the next version?

Also how would I change the colour of horizontal separators for drop-down menus like the one for settings?

[Zabooby]

This is a generalized sample. https://github.com/black7375/Firefox-UI-Fix/blob/master/src/theme/_proton_color.scss

I also noticed that the bookmark drop-down now has two separators instead of one, I think the css above made a second separator.

[black7375]

I'am patch for bookmark popup 3fda00e

Use

:root {
  --panel-separator-color: red !important;
}

html#main-window menupopup:not(.in-menulist, [placespopup]) menuseparator,
toolbarbutton menupopup[placespopup] menuseparator::before {
  --menu-border-color: red !important;
}

[Zabooby]

Thank you for all the help, now my custom theme is consistent across the whole ui (apart from the library window)! Also thanks for making the best css theme for firefox, can't wait to see what you do next!

[Zabooby]

I'am patch for bookmark popup 3fda00e

Use

:root {
  --panel-separator-color: red !important;
}

html#main-window menupopup:not(.in-menulist, [placespopup]) menuseparator,
toolbarbutton menupopup[placespopup] menuseparator::before {
  --menu-border-color: red !important;
}

Sorry to bother you again but I found another separator in the url bar while opening #517. Is there a way to change the colour?