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

One thought on “Making Firefox with Client-Side Decorations Look Good in KDE Plasma”

Leave a Reply

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

WordPress.com Logo

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

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s