[How To] Integrate Firefox with dark themes

Write tutorials here
There are more tutorials here http://community.linuxmint.com/tutorial/welcome
Forum rules
Please don't add support questions to tutorials,start your own thread in the appropriate sub-forum instead. Before you post please read this
Post Reply
minitux
Level 5
Level 5
Posts: 860
Joined: Tue Sep 12, 2017 10:05 am

[How To] Integrate Firefox with dark themes

Post by minitux » Wed Dec 06, 2017 3:27 am

Close Firefox, Browse the folder .mozilla in /home and follow the path ~/.mozilla/firefox/xyxyxyx.default enter in the directory xyxyxyx.default create a new folder and name it chrome (if there is already a folder with this name, rename the old one in chrome-old) and within this, create a new file named userContent.css and paste the following code

Code: Select all

@-moz-document url-prefix(about:blank) {*{background-color:#202020;}}
/*
* Use this css file to eliminate problems in Firefox
* when using dark themes that create dark on dark
* input boxes, selection menus and buttons. Put this
* in the ../firefox/default/chrome folder or your
* individual user firefox profile chrome folder.
*/
input {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
textarea {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
select {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
input[type="radio"],
input[type="checkbox"] {
border: 2px inset white ! important;
background-color: white ! important;
color: ThreeDFace ! important;
-moz-appearance: none !important;
}
*|*::-moz-radio {
background-color: white;
-moz-appearance: none !important;
}
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
border: 2px outset white;
background-color: #eeeeee;
color: black;
-moz-appearance: none !important;
}
body {
background-color: white;
color: black;
display: block;
margin: 8px;
-moz-appearance: none !important;
}
Save the file and close it and restart Firefox.

Caltrop
Level 2
Level 2
Posts: 79
Joined: Mon Aug 07, 2017 12:00 pm

Re: [How To] Integrate Firefox with dark themes

Post by Caltrop » Wed Jul 25, 2018 10:14 am

Like everything else I have tired this DOES NOT WORK!

There used to be an extension to fix this but it has been upgraded for the NEW firefox & no longer works with the older versions.

Why the !@#$%^&!!! do THEY have to make selecting colors for the GUI so difficult?

The GTK3 CSS file is nearly 4,000 lines long and it cascades into other CSS files.
thousands & THOUSANDS of lines of code... :shock:

I program in C & I find these CSS files a convoluted mess!

I hate to say it but Linux is becoming Windows...
Last edited by Caltrop on Wed Jul 25, 2018 10:21 am, edited 1 time in total.

gm10
Level 13
Level 13
Posts: 4533
Joined: Thu Jun 21, 2018 5:11 pm

Re: [How To] Integrate Firefox with dark themes

Post by gm10 » Wed Jul 25, 2018 10:17 am

Caltrop wrote:
Wed Jul 25, 2018 10:14 am
Why the !@#$%^&!!! do THEY have to make selecting colors for the GUI so difficult?
They don't. Unless you mess with the settings it simply uses your desktop team. Couldn't be simpler.

User avatar
Shadow in Fire
Level 1
Level 1
Posts: 7
Joined: Fri Jul 20, 2018 1:18 am

Re: [How To] Integrate Firefox with dark themes

Post by Shadow in Fire » Fri Jul 27, 2018 12:06 am

I use Pale Moon, which is based on Firefox. I vastly prefer it by a mile.

With that said, if you also use Pale Moon, there's an extension that you can install. It's called Advanced Night Mode. Really liking this!

User avatar
smurphos
Level 8
Level 8
Posts: 2204
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher...

Re: [How To] Integrate Firefox with dark themes

Post by smurphos » Fri Jul 27, 2018 1:26 am

Caltrop wrote:
Wed Jul 25, 2018 10:14 am
Like everything else I have tired this DOES NOT WORK!
Talk to Moz - they can't be arsed to build their browser to properly support GTK or address this bug that folks have been raising for years.

This OP's original solution works on some but not all webpages. The only 100% reliable way in my experience is to force Firefox to use a light theme (Adwaita is a good choice- it's the reference GTK theme). Three ways

1) Amend your Firefox launchers and desktop entries so they are always using a light theme - e.g Exec=env GTK_THEME=Adwaita firefox

Or

2) In Firefox visit about:config, right click, select new, select string, input widget.content.gtk-theme-override and then input Adwaita

Or

3) In your profile folder e.g ~/Mozilla/firefox/xxxxxxxx.default add a user.js file containing the line user_pref("widget.content.gtk-theme-override", "Adwaita");

Can't be doing with that? Use Chrome/Chromium - their GTK integration works just fine. :wink:

Edit to add 3rd method....
Last edited by smurphos on Sun Aug 05, 2018 2:06 am, edited 2 times in total.

Valsodar
Level 3
Level 3
Posts: 142
Joined: Thu Jul 19, 2018 11:30 pm
Location: Sofia, Bulgaria
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by Valsodar » Tue Jul 31, 2018 3:39 pm

smurphos wrote:
Fri Jul 27, 2018 1:26 am
1) Amend your Firefox launchers and desktop entries so they are always using a light theme - e.g Exec=env GTK_THEME=Adwaita firefox

Or

2) In Firefox visit about:config, right click, select new, select string, input widget.content.gtk-theme-override and then input Adwaita

Can't be doing with that? Use Chrome/Chromium - their GTK integration works just fine. :wink:
I don't know how to do the first way, so I did the second. But it doesn't work. I don't have Adwaita theme, so I set it to Mint-X-Purple which is a light theme. I have even disabled "use dark themes for the application if available" and yet Firefox still keeps the Cinnamox blue radio buttons and fill forms background. Firefox 61.0.1 x64.

User avatar
smurphos
Level 8
Level 8
Posts: 2204
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher...

Re: [How To] Integrate Firefox with dark themes

Post by smurphos » Thu Aug 02, 2018 1:49 am

Valsodar wrote:
Tue Jul 31, 2018 3:39 pm
I don't know how to do the first way, so I did the second. But it doesn't work. I don't have Adwaita theme, so I set it to Mint-X-Purple which is a light theme. I have even disabled "use dark themes for the application if available" and yet Firefox still keeps the Cinnamox blue radio buttons and fill forms background. Firefox 61.0.1 x64.
Definitely works fine in Mint 19 with Adwaita as the Firefox theme and Cinnamox Rhino as the system theme. I've tested the comments section on Opendesktop which you highlighted to me as an issue before..... Firefox is the same version as yours. I'll have a look at 18.3 - might be that GTK 3.18 vs 3.22 makes a difference.

Nope - again working OK in 18.3 for me - I tried Adwaita and Mint-X-Purple for that key with Mint-Y-Dark and Cinnamox-Rhino as the system theme. You need to close and reopen Firefox for the change to take effect.

Are you sure you haven't got Adwaita? It's the reference GTK theme and included as a default package in Mint 18.x and 19.
Last edited by smurphos on Thu Aug 02, 2018 2:08 am, edited 1 time in total.

User avatar
smurphos
Level 8
Level 8
Posts: 2204
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher...

Re: [How To] Integrate Firefox with dark themes

Post by smurphos » Thu Aug 02, 2018 2:08 am

smurphos wrote:
Fri Jul 27, 2018 1:26 am
1) Amend your Firefox launchers and desktop entries so they are always using a light theme - e.g Exec=env GTK_THEME=Adwaita firefox

Or

2) In Firefox visit about:config, right click, select new, select string, input widget.content.gtk-theme-override and then input Adwaita
Or

3) In your profile folder e.g ~/Mozilla/firefox/xxxxxxxx.default add a user.js file containing the line user_pref("widget.content.gtk-theme-override", "Adwaita");

Valsodar
Level 3
Level 3
Posts: 142
Joined: Thu Jul 19, 2018 11:30 pm
Location: Sofia, Bulgaria
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by Valsodar » Thu Aug 02, 2018 6:33 am

smurphos wrote:
Thu Aug 02, 2018 1:49 am
You need to close and reopen Firefox for the change to take effect.

Are you sure you haven't got Adwaita? It's the reference GTK theme and included as a default package in Mint 18.x and 19.
I know I have to restart Firefox.
It turns out I do have Adwaita, I was just looking at the wrong place. :) But it seems Adwaita is only a window decoration. And I for one like the Rhino style.
I think the whole problem comes from that Buttons and Controls of Cinnamox-Rhino fills tickboxes and radio buttons with the dark color of Rhino:

Image

If you can tell me which file to edit and which line in it in order to make these specific controls white (#FFFFFF), this would achieve exactly what I need - tick buttons and drop down menues like these in the image below will appear white as they should while window background and click buttons such as "apply", "save", "add", etc. will remain dark.

Image

User avatar
smurphos
Level 8
Level 8
Posts: 2204
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher...

Re: [How To] Integrate Firefox with dark themes

Post by smurphos » Fri Aug 03, 2018 2:10 am

This is what I get with Rhino as the system theme and Adwaita set for widget.content.gtk-theme-override

The Firefox Window and menus are themed by Rhino - all browser content is themed by Adwaita.

Image

The file to edit to try and get Rhino to theme Firefox differently would ~/.themes/Cinnamox-Rhino/gtk-3.0/gtk.css (18.3) or ~/.themes/Cinnamox-Rhino/gtk-3.20/gtk.css (19).

But it's not a couple of liner edit. It would need a bespoke Firefox section adding with widget theming specific to Firefox. That's not on my radar sorry...

Valsodar
Level 3
Level 3
Posts: 142
Joined: Thu Jul 19, 2018 11:30 pm
Location: Sofia, Bulgaria
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by Valsodar » Fri Aug 03, 2018 9:18 am

smurphos wrote:
Fri Aug 03, 2018 2:10 am
But it's not a couple of liner edit. It would need a bespoke Firefox section adding with widget theming specific to Firefox. That's not on my radar sorry...
I'll just backup the original css file and experiment with it, so if I do something very wrong, I'll restore it until I get the hang of it. It's just css, not C++, so it won't be that hard. ;)

Valsodar
Level 3
Level 3
Posts: 142
Joined: Thu Jul 19, 2018 11:30 pm
Location: Sofia, Bulgaria
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by Valsodar » Sat Aug 04, 2018 6:29 am

Looks like it will need to mention firefox in the css files, after all. I tried editing every css file I could find and it still won't change anything.

User avatar
smurphos
Level 8
Level 8
Posts: 2204
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher...

Re: [How To] Integrate Firefox with dark themes

Post by smurphos » Sat Aug 04, 2018 8:52 am

Valsodar wrote:
Sat Aug 04, 2018 6:29 am
Looks like it will need to mention firefox in the css files, after all. I tried editing every css file I could find and it still won't change anything.
I think there's a reason that no dark theme author that I'm aware of has overcome this issue (or made any serious attempt to overcome it) is that a) Firefox's decision to theme some website content according to the GTK theme is just stupid and b) it's been a moving target as Firefox slowly 'improves' it's GTK integration.

The difference between Chrome/Chromium and Firefox is that the former makes no effort to theme the website content which is the right way to go about things IMHO.

Post Reply

Return to “Tutorials”