[How To] Integrate Firefox with dark themes

Write tutorials for Linux Mint here
More tutorials on https://github.com/orgs/linuxmint/discu ... /tutorials and (archive) on https://community.linuxmint.com/tutorial
Forum rules
Don't add support questions to tutorials; start your own topic in the appropriate sub-forum instead. Before you post read forum rules
Post Reply
minitux

[How To] Integrate Firefox with dark themes

Post by minitux »

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

Re: [How To] Integrate Firefox with dark themes

Post by Caltrop »

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

Re: [How To] Integrate Firefox with dark themes

Post by gm10 »

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.
Shadow in Fire
Level 2
Level 2
Posts: 60
Joined: Fri Jul 20, 2018 1:18 am

Re: [How To] Integrate Firefox with dark themes

Post by Shadow in Fire »

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 18
Level 18
Posts: 8501
Joined: Fri Sep 05, 2014 12:18 am
Location: Irish Brit in Portugal
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by smurphos »

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.
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
User avatar
Valsodar
Level 4
Level 4
Posts: 364
Joined: Thu Jul 19, 2018 11:30 pm
Location: Sofia, Bulgaria
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by Valsodar »

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.
Core i7-4770, Palit GTX 1660 Ti, 32GB DDR3 RAM, Firefox, Arch LTS w/ Cinnamon 5.2.7
My Linux group on Telegram
Avatar & desktop: https://ibb.co/album/GFx0yV
User avatar
smurphos
Level 18
Level 18
Posts: 8501
Joined: Fri Sep 05, 2014 12:18 am
Location: Irish Brit in Portugal
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by smurphos »

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.
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
User avatar
smurphos
Level 18
Level 18
Posts: 8501
Joined: Fri Sep 05, 2014 12:18 am
Location: Irish Brit in Portugal
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by smurphos »

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");
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
User avatar
Valsodar
Level 4
Level 4
Posts: 364
Joined: Thu Jul 19, 2018 11:30 pm
Location: Sofia, Bulgaria
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by Valsodar »

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
Core i7-4770, Palit GTX 1660 Ti, 32GB DDR3 RAM, Firefox, Arch LTS w/ Cinnamon 5.2.7
My Linux group on Telegram
Avatar & desktop: https://ibb.co/album/GFx0yV
User avatar
smurphos
Level 18
Level 18
Posts: 8501
Joined: Fri Sep 05, 2014 12:18 am
Location: Irish Brit in Portugal
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by smurphos »

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...
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
User avatar
Valsodar
Level 4
Level 4
Posts: 364
Joined: Thu Jul 19, 2018 11:30 pm
Location: Sofia, Bulgaria
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by Valsodar »

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. ;)
Core i7-4770, Palit GTX 1660 Ti, 32GB DDR3 RAM, Firefox, Arch LTS w/ Cinnamon 5.2.7
My Linux group on Telegram
Avatar & desktop: https://ibb.co/album/GFx0yV
User avatar
Valsodar
Level 4
Level 4
Posts: 364
Joined: Thu Jul 19, 2018 11:30 pm
Location: Sofia, Bulgaria
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by Valsodar »

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.
Core i7-4770, Palit GTX 1660 Ti, 32GB DDR3 RAM, Firefox, Arch LTS w/ Cinnamon 5.2.7
My Linux group on Telegram
Avatar & desktop: https://ibb.co/album/GFx0yV
User avatar
smurphos
Level 18
Level 18
Posts: 8501
Joined: Fri Sep 05, 2014 12:18 am
Location: Irish Brit in Portugal
Contact:

Re: [How To] Integrate Firefox with dark themes

Post by smurphos »

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.
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
Post Reply

Return to “Tutorials”