Hello!
I use Firefox on Arch Linux, with Openbox as my window manager. I’ve been experiencing several issues since the release of Firefox 143.0.3, which I didn’t have with the previous minor version 143.0.2. However, I haven’t made any changes to my Firefox theme for several months; nor have I modified my GTK-4 theme.
First of all, in my custom CSS file (userChrome.css), I defined a section for light themes and a section for dark themes, like this:
@media (prefers-color-scheme: light) {
... (some CSS tags are here)...
}
@media (prefers-color-scheme: dark) {
... (some CSS tags are here)...
}
My full CSS is available here.
But now, only the light theme is applied. My Firefox theme is the “Systeme theme - auto”; I haven’t changed it. I can force the display of dark theme CSS tags by changing the theme in the Firefox settings and selecting the Dark theme, but why has this changed? My GTK-4 theme is still a dark theme, so why does the default theme only apply light theme tags?
On the other hand, the code in my userChrome.css file that relates to the address bar no longer works. This code is as follows:
#urlbar[breakout][breakout-extend] {
margin-left: 0 !important;
width: var(--urlbar-width) !important;
margin-top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
}
.urlbarView-row { padding: 2px 1px !important; }
#urlbar-background { animation: none !important; }
.urlbar-input-container {
padding: 1px !important;
height: var(--urlbar-height) !important;
}
#identity-icon { margin-block: var(--urlbar-icon-padding); }
.urlbarView > .search-one-offs:not([hidden]) { padding-block: 0 !important; }
#urlbar-background, #searchbar, .findbar-textbox { box-shadow: none !important; }
.urlbar-input::placeholder, .searchbar-textbox::placeholder, .findbar-textbox::placeholder { color: color-mix(in srgb, currentColor 70%, transparent) !important; }
#urlbar[open] > #urlbar-background { border-color: Highlight !important; }
#urlbar-results {
max-height: 239px;
overflow-y: auto;
scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
scrollbar-width: thin;
padding: 0 !important;
margin: 4px 0 5px 0;
}
.urlbarView-row-inner { padding-block: 1px !important; }
.urlbarView-no-wrap { position: relative; }
#urlbar[searchmode] > .urlbarView { display: none !important; }
.urlbarView-row-inner { flex-wrap: wrap !important; }
.urlbarView-no-wrap {
max-width: 100% !important;
flex-basis: 100%;
}
.urlbarView-row[has-url]:not([type="switchtab"]) .urlbarView-title-separator { display: none; }
.urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) { margin-left: var(--urlbarView-second-line-indent); }
.urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) { margin-right: var(--urlbarView-second-line-indent); }
How can I fix it?
Many thanks in advance for your help!
Hi, urlbar-background is not an id anymore but a class. So use
.urlbar-backgroundinstead.I can’t say much about the color-scheme issue though, but it sounds like for some reason Firefox isn’t getting the information from your OS.
Hi, urlbar-background is not an id anymore but a class.
Thanks for the info. I always have trouble finding this kind of information. I took a look at the latest commits on your GitHub repository, but I didn’t see anything noteworthy…
I can’t say much about the color-scheme issue though
The problem is that choosing the “Dark” theme instead of the “System theme - auto” gives a very different result… Is there a way to force the dark mode of the “System theme”?
Go to about:config and create a new number pref
ui.systemUsesDarkThemeand set it to1Thanks for the tip. It works!
urlbar-background is not an id anymore but a class
May I ask how you keep up to date with these kinds of new features? Do you review the new features page when a new version of Firefox is released? Is there an easy way to find out about these changes in advance?
In any case, you have (once again) been a great help; thank you very much, and have a nice day!
Some of it is stuff that I have found out about when folks have reported that this or that style is broken after some update (which might be update in pre-release versions). I also occasionally scan through changes in nightlies - via this page and it’s not super uncommon that some change rings sounds like something that could affect one of my styles - so then I’ll usually check it out more thoroughly. And of course it can happen that one of the styles I’m using (which isn’t very many tbh) changes behavior after nightly updates.
Might sound like a lot, but it really isn’t too much effort. Responding to changes is usually quite simple, its way more work trying to figure out how to reproduce some problem that someone else if having but which only occurs under specific conditions.
OK, thank you for the tips!
I understand that there will be other changes to certain elements, including the address bar, in future versions of Firefox: to which selectors should I add
:where(to ensure that my code is compatible with future versions?Thank you very much for your help!
Sorry, but I don’t quite understand what you mean. You don’t know what kind of changes are going to happen in the future - and neither do I, so we can’t future-proof any rules too much. The selector
:where(only means that the selector coming after it must also match the element that is a child of urlbar even if the selector would also match something else in the document. I suppose it would be somewhat relevant currrently, since similar class names are also used in the searchbar popup now or soon (depending on what Firefox version you are using) and you might only want to affect things inside urlbar but not inside searchbar.Indeed, my message wasn’t very clear. While trying to keep my
userChrome.cssfile up to date, I found this first commit and this second commit in your repository; I deduced that certain elements needed to be updated… but I was wondering which ones. I thought this was due to upcoming changes in Firefox, but I was probably mistaken…