Making Firefox with Client-Side Decorations Look Good in KDE Plasma

Warning: The proposed workaround in this blog post might be rendered unnecessary in the future.

Out of the box, Firefox with client-side decorations doesn’t look good because captions in inactive tabs blend with the background.

Firefox with Breeze GTK theme

Fortunately, this issue can be easily fixed by adding a style rule in userChrome.css file. First of all, you need to enable the userChrome.css functionality if you run Firefox 69 or later. Go to about:config page, and set toolkit.legacyUserProfileCustomizations.stylesheets to true.

Next, open the profile directory and create userChrome.css file in a sub-directory named “chrome.” If there is no “chrome” sub-directory, create one. In case you don’t know where the profile directory is, open about:support and click the “Open Directory” button next to “Profile Directory.”

In userChrome.css file, add the following rule

:root[tabsintitlebar] #TabsToolbar:not(:-moz-lwtheme):not(:-moz-window-inactive) {
  color: #eff0f1 !important;

and restart Firefox.

Firefox with the custom userChrome.css rule

Closing words

Even though the userChrome.css functionality hasn’t been officially deprecated, it’s still better to avoid using it, but as a short-term solution, it’s good enough. Ideally, this minor issue should be fixed upstream so everything “just works” out of the box and no hacks are needed.

Relevant links

3 thoughts on “Making Firefox with Client-Side Decorations Look Good in KDE Plasma”

  1. Looks great, but how do you get such Client-Side Decorations for Firefox (in KDE Plasma) in the first place?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s