CODEWITHSUNDEEP
cssfirefoxcss-variablesuserchrome.css
Jens
Jens

Reputation: 72667

CSS variables in Firefox's userChrome.css do not take effect

I'm using Firefox 72 on FreeBSD and configure some style in userChrome.css. This works fine. As an example, I can make the label of the "File" menu in the menu bar red with

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#file-menu {
   color: red !important;
}

Now I heard of the new-fangled (not so much anymore, it would seem) CSS variable, aka CSS property --*, and tried to use them. Alas, I must be missing something because this:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
:root {
   --foo: red;
}
#file-menu {
   color: var(--foo) !important;
}

leaves "File" at the default color, black. Should this work? Am I missing something? After some searching I found that in about:config the value for toolkit.legacyUserProfileCustomizations.stylesheets should be true, which it is. Now I'm out of ideas.

Upvotes: 1

Views: 2167

Answers (1)

Jens
Jens

Reputation: 72667

The problem was the @namespace line. After deleting it, the CSS variables work.

Upvotes: 2

Related Questions