Logo credit to @baranpirincal.
Yay! This extension won second place in the very first Mozilla Firefox Extensions Challenge!
Native Dark is a theme for Firefox Quantum that aims to add support for the Windows 10 (and 8.1) Accent Color, set in Personalization Settings. Support is also added for other systems, and the colors can be customized in the options page. On other systems besides Windows, functionality is limited to a solid, non-adapting color that is not guaranteed to match your system colors. The original intent was to mainly replace the default themes of Firefox, because the light theme was adaptive in the titlebar and not the tabs. It allows for the same adaptive titlebar as the default light theme, but combines the aesthetic of the dark theme's tabs.
Get it at Add-ons for Firefox: https://addons.mozilla.org/firefox/addon/native-dark/
The theme was originally meant to work with just dark colors, (specifically #394145
, the darkest color that Windows allows) but while I was making the script to get the system accent colors, the only way to create variations was to create transparent layers of black over top. I accidentally discovered that it would work with other themes, and proceeded to put the below image together.
If you find this software useful and would like to show your appreciation, please consider making a small donation!
Below are examples of 11 different accent colors. Only the first is a custom color.
The tabs and body of the toolbar is 25% darker than the accent color, and the inside of the omni bar is 50% darker than the accent color. The text will always remain pure white, I have found that this looks best.
The theme should work with just about any accent colors, however, the font will look a little funny on super light colors. Try to keep the accent color in Windows dark enough so that the text color doesn't conflict with the background.
Make sure that you have a good accent color selected from the palette in Windows > Settings (Gear) > Personalization > Colors
.
By request of two users (and probably unspoken by several others), I have added more modes for unfocused Windows.
Among these are Tabs
, Title
, Both
, Fade
, Reset
, and None
.
Here they are, in order.
To customize the unfocused theme and other settings, go to the addons options page.
about:addons
in the URL bar.Native Dark
extension in the list, and click Options
on the right.When the background for the title bar is set, the pretty blue line above active tabs is lost. Unfortunately, I have yet to find a way to fix this within the theme itself. The one way to fix it us by adding a custom Update: In Firefox version 60 and above, the ability to change the tab line color has been added to the theming API. If you have the latest version of Firefox, or the Nightly, this should be enabled. It can be customized in the theme options page. Check userChrome.css
to your profile directory.about:support
under "Application Basics - Version" too see if you have it.
This is what it changes, top is before, bottom is after.
In short, here is what you need to do to add this to your profile.
about:support
in the URL bar.Application Basics
, find Profile Folder
and click the button that says Open Folder
.Clone or download > Download ZIP
button on Github.
chrome
.chrome
into the profile folder that you opened earlier.You may need to restart firefox for the stylesheet to take effect.
Alternatively, copy the code below and use it as a base for modifications in your userChrome.css
.
.tab-line {
-moz-box-ordinal-group: 1;
}
.tab-line[selected=true] {
background-color: #0A84FF !important; // Change the color to what you want
}
For example, change -moz-box-ordinal-group
to 2
to make the active indicator line appear on the bottom of the tab, or change the hex value #0A84FF
for a different color.
If you want the omnibar to use your highlight color when you're typing in it, use userChrome.css
.
#urlbar[focused="true"] ::-moz-selection {
background: #0A84FF !important; // Change the color to what you want
}
There's a great resource for references on what can be put into userChrome.css
at the UserChrome-Tweaks community repository, or the FirefoxCSS Subreddit.
For more information about what userChrome.css
is, see the website for it.
This is really only meant to work in Windows 10. This extension works on Windows 10 and 8/8.1 (according to issue #30). On other systems, it just defaults to the dark theme shown in the top example. You will need to go into the add-on options page to change your colors manually via the static color mode. Please don't ask me why it doesn't sync with your theme in Linux!
Please submit issues or suggestions to the Issues page on the GitHub repository.