The lack of a @-moz-document rule in this file here is causing the styles to apply to every webpage I visit.

This is being carried over from problems brought up in #6 and #42.

It appears certain elements in both uBlock Origin and uMatrix are not getting styled on Windows the same way they are on a Mac:

Mac	Windows
Mac	Windows

I've ruled out this being a difference in FF version, and I can only assume it is due to the OS.

Without current access to a Windows computer, there unfortunately isn't a whole lot I can do to fix this myself. If anyone could help figure out what's going on here, I would greatly appreciate the help! :)

Hello,

I downloaded files, placed them accordingly... and nothing happened.
What has gone wrong?
Thanks in advance.

Cheers

Due to perceived interest from users (and myself), this project has kind of taken a turn from being centered around userContent tweaks to creating a universal dark theme for Firefox (about half the code posted here belongs in userChrome.css).

As such, I believe it would be fitting to change the name of this repository to better reflect its contents.

As per https://help.github.com/articles/renaming-a-repository/ :

When you rename a repository, all existing information, with the exception of Project Pages URLs, is automatically redirected to the new name, including:

Issues
Wikis
Stars
Followers

In addition to redirecting web traffic, all git clone, git fetch, or git push operations targeting the previous location will continue to function as if made on the new location. However, to reduce confusion, we strongly recommend updating any existing local clones to point to the new repository URL. You can do this by using git remote on the command line:

git remote set-url origin new_url

Therefore, there should be minimal side effects to anyone currently using/following this repository.

If anyone has any thoughts, objections, reasons why this shouldn't be done etc., please let me know.

I'm running the latest stable FF57 on Windows.

I notice an inconsistency with the firefox dark theme which seems to be leaking into this project - the battle between highlight colours being either cyan or light blue. As can be seen on the screenshots elsewhere here, the theme uses the light blue colour #0a84ff, specified in the Photon colours as Blue-50, as the highlight for the currently active tab, as well as the progress meter for loading the tab. However, in other places, it is using the Cyan colour that is the default in this project.

Since I am after a consistent browsing experience (and since I find these two tones of 'blue' to clash rather badly and they just look ugly! Every fashionista knows about blue-on-blue...), I have set the highlight colours in this project, to match the blue-50 tone and it's counterpart blue-40:

	--primary-accent-color:  #0a84ff; 
	--primary-accent-color-dark: #45a1ff; 

This works in some areas, however in others, I am still seeing the cyan colour. It's there in the newly-added AMO theming, it's there on about:* pages, and in some dialogs:

If I can help with this please let me know.

Edit: overdodactyl + CaptaPraelium

Running list of color inconsistancies:

• about:preferences - majority of highlight colors (colors were inverted here, new code on the way)

• about:config - same as ^^^

Hello !

First i want to thank you for your amazing work.
I only have one problem, and it may be because I am a total noob, so I hope I won't bother you too much with my problem.

I copied every files from shadowfow-master to the chrome folder of my profile but I can't see any changes to Ublock / decentraleyes etc. Everything else is working perfectly.

Should I do a specific manipulation ?

I hope you have a nice day !

i found this theme from Reddit, and i freaking love it, the only problem i found with it is that the menus (all of them) have compact design, they all seems to be squished together.

Example:

Help Menu: Before | After

Context Menu: Before | After

Is there something i could change in the CSS files to fix this?

Thank you for creating this awesome theme +1

Loving this theme, had made a similar one but this fixes a lot of my issues. Anyway, was wondering if/how CSS could be used if you're using treestyle tabs that hides the whole tab bar.

I've put together some that does this but no idea how to merge it in without forcing it on people.

/* hide tabs */
#tabbrowser-tabs { visibility: hidden !important; }
tab { display: none !important; }

/* CSS to make urlbar and window controls 1 line */
#nav-bar {      
  margin-bottom: -1px !important;               /* remove navbar bottom 1px border */
  margin-top: -30px !important;
  margin-right: 7.2vw !important; 
  border-top: none !important;
}   

/* Remove padding above tabbar in compact mode */
#main-window[sizemode="normal"] > #titlebar {
  -moz-appearance: initial !important;
}

/* Back & Forward buttons */  
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
  transform: scale(0.9, 0.9) !important;
  margin-left: -2px !important;
  margin-right: -2px !important; 
}

/* Move hamburger menu to the left */
#PanelUI-button,
#customization-panel-container,
#customization-panelWrapper .panel-arrow { 
  -moz-box-ordinal-group: 0 !important;
  margin-right: -6px !important;
}

#appMenu-popup {
  margin-right: -258px !important;
}

#appMenu-popup .panel-arrow {
  margin-right: 248px !important;
}

/* More tools... button */
#nav-bar-overflow-button { 
  transform: scale(0.9, 0.9) !important;
}

#titlebar-buttonbox {
  background: var(--chrome-secondary-background-color) !important;
}

Ends up looking like this:

Pressing the reader view on supported pages forces a dark theme on all pages. I know this is meant to be the point of this theme, but the reader has its own dark theme ability, and it is rendered useless. The following code is too broad and doesn't exclude about:reader, commenting it out allows changing light-dark-sepia

@-moz-document url-prefix(about:), url(https://www.mozilla.org/credits/) {
html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
background: var(--primary-dark-color) !important;
color: var(--primary-light-color) !important;
}

a:link {
color: var(--primary-accent-color) !important;
}
}

when you right click an add-on in the extensions page and then click About, the page it shows is not dark themed.

Example

I am running latest stable FF57 on Windows.

I've noticed some white areas and some of the theme's cyan braking through the colours I have set in my css file.

My colors css looks like so:

:root {
	--primary-dark-color: #323234;  /* Color of FF dark theme nav-bar */
	--primary-light-color: #A6A6A6; /* Off white */
	--light-accent-color: #9c9d9f; /* Slightly darker off white */
	--dark-accent: #3C3C3C; /* darker shade of main color */
	--mid-way-color: #5c5a5a; /* inbetween main dark and light color */
	--primary-accent-color:  #0a84ff; 
	--primary-accent-color-dark: #45a1ff; 
}

When I edit a pinned site, this is the dialog I see:

In addition to this cyan and white, I also notice that the icons in the newtab page are behaving strangely. To be honst, I'm not sure what the intended behaviour is here. For some sits, I get a preview of the page, as the button to open it. For some, I get a preview of the page, overlayed by the page's favicon. For some, I get just the favicon.

Where the favicons are shown, if there is transparency, the background of the favicon is the theme's white colour. Also, the hyperlink text below the image is using the cyan colour again:

Please let me know if I can help with this in any way.

As you may recall, I have been configuring this project to have the highlight colour match that of the default dark theme's active tab highlight, just for the sake of consistency.

It has occurred to me that with all the chrome modifications in this project, maybe it would even be possible to change this colour in the theme? Personally, I'm happy with blue-50, but it would be great to have the theme follow the customisations, rather than the other way around.

The title says pretty much everything. It could be useful to have the dark theme also on view-source pages.

Btw, thanks for the great work you've done. I've tried to make simple tweaks in the past, but I'm not much of a css expert.

I think it would be nice to put together a wiki entry with suggestions/links to things that can further enhance this repo's goal of a "universal dark theme." I figured I would start off a list here, and hopefully get some thoughts from everyone else out there.

System-wide

• f.lux
  • Mac, Windows, Linux
• LightBulb (thanks @CaptaPraelium for the recommendation #27)
  • Windows only

Firefox Extensions

• Dark Background and Light Text (again, thanks @CaptaPraelium for the suggestion)

  • Let's you customize the background, text, link colors etc. to match the theme used in this repo

• Stylus

  • implement custom userstyles (see below)

Page Specific Userstyles

For times when an extension just can't do a good enough job

• GitHub

• StackOverFlow

• Bugzilla

• SUMO (https://support.mozilla.org)

I'll try to continually update this issue and, ultimately, add this to wiki page. If there are any things you guys use, please list below! :)

I checked the commits and saw that you added dark theme support for uBlock Origin.
When i updated, uBlock Origin was the same as before.

Turns out that you have a different URL set. (@-moz-document url-prefix("moz-extension://de835161-ee69-c14d-9940-203fbacf2276/") {)

The URL prefix you used is: moz-extension://de835161-ee69-c14d-9940-203fbacf2276/

The URL prefix for me is: moz-extension://97bdeb2a-2183-4420-bc51-b5557a6f3a45/

I guess the that URL changes from person to person.

P.S, the URL is a GUID/UUID that identifies the the extension.

Some extensions that have preferences built into the addon page utilize their own css files and don't use all the Firefox default styling settings.

As such, compatibility issues or ugly appearances may arise.

Please see the update here.

If you run across any addons with this issue, please list them here and I will get out a fix when I can.

In addition, please mention the addon as either (1) compatibility - text unreadable or (2) ugly design.

As always, if you are willing/able to help create a fix for an addon, please submit a pull request or post the code somewhere and link to it here. Not much goes into each fix, but I am only one person and we don't all use the same extensions. See here for addons that have currently have fixes and for a general idea on how to create a fix yourself.

Hi
Thanks for this great theme. Amazing job !

A small problem : when I open the Bookmarks Libray, buttons at the top of the window are black on dark.
See picture (in french in my case).

I tried to find something in your "libray.css", but no luck.
Maybe it's just me. In this case, maybe you could tell me which selector to use.
(When I use browser chrome and add-on debugging toolboxes, it seems I can't make any selection in the Bookmarks Libray panel ?)

Same goes for the little popup appearing when clicking "Save to Pocket" : some texts are dark on dark.

Thanks again for your work !

See screenshot. The separator between the 'don't' save and 'v' button sticks out.

Couldn't find the ID with browser toolbox.

Would it be possible to theme the snippet on about:home?
The current config is light grey on slightly darker grey, making it unreadable w/o highlighting.

Hi everyone,

Due to some variations in operating systems, some Windows-specific tweaks had to be made (primarily in regards to context menus, the page info dialog and the bookmarks popup).

Generally, a specific OS can be targeted using @media indicators, but there's a FF bug that is preventing this from working currently (in FF 58). It's not effecting all Windows platforms, but it is on some (sounds like Windows 7 is an issue, but not 10?). It's been fixed for FF 59, but is not being back ported. For more info, see here:

https://github.com/overdodactyl/ShadowFox/wiki/Known-Problems#styling-for-specific-oss-not-going-into-effect

As a workaround (for the next month and a half or so), there's now a userChrome_windows.css file located in the alternative_user_files directory that you can use. This is just the normal userChrome.css file with all the Windows specific fixes appended at the end (without the @media statements).

Huge thank you to @loopy750 for both making all these Windows fixes and diagnosing/finding the relevant FF bug.

A picture says 1000 words ;)

@overdodactyl offtopic: since this script is working so well now, I find myself visiting this page less often. If you need a hand with any windows-specific stuff, feel free to email me to get my attention.

The Download pop-up has white text on a white background. Screenshot is on Windows 8.1.

Hi! Sorry, I couldn't quite figure out how to set this up. Could someone please write a tutorial on this? Thanks!

the Library (downloads/bookmarks/history) isn't dark themed.

Image

As the picture shows, the buttons are translucent and remain visible while unhovered.

Tested on Nightly 60.0a1 (2018-02-07, with imported CSS) and Developer Edition 59.0b7 (with a clean new profile and combined CSS) on Windows 10.

#automaticallyReportInFuture (checkbox) isn't themed. (pure white)
#learnMoreLink isn't themed (dark grey on lighter grey)

See screenshot

Hello everyone,

I've decided it would be more appropriate to host the changes to Stylus on userstyles.org as opposed to putting them in this repo.

The theme is designed to match that used by Firefox's inspector and developer toolbox.

userstyle.org link: https://userstyles.org/styles/153739/stylus-dark-shadowfox

GitHub Repo link: https://github.com/overdodactyl/Stylus-Dark

Sample screenshots:

If anyone's strongly opposed to this let me know and I'll reconsider adding it back to the repo.

userContent.css is the only way to theme AMO now.

This might be beyond the scope of the project, but in my own tweaks I had a rule:

@-moz-document url(about:newtab) {
  /* Turn off new user guidance */
  footer {display:none;}
}

I'd like to submit this rule for consideration of inclusion into the project. On one hand it goes beyond the scope of styling the existing pages. However, I feel anyone who installs Firefox and goes through the necessary steps to install this project clearly doesn't need those little hint snippets Firefox gives new users on the new tab page.

Also this rule might not be specific enough - I just kind of slapped it into my .css so I never had to see those hints again. ;)

If you go to Firefox and type this as the URL file:///C:/ it will open explorer in Firefox.

I tried to theme it but failed, i don't know how to make userChrome.css and userContent.css load this code:

@-moz-document url("chrome://global/skin/dirListing/dirListing.css") {
	:root {
		background-color: var(--primary-dark-color);
		color: var(--dark-accent);
	}

	body {
		border: 1px solid var(--mid-way-color);
		background-color: var(--dark-accent);
		color: var(--light-accent-color);
	}

	h1 {
		border-bottom: 1px solid var(--light-accent-color);
	}

	body > table > tbody > tr:hover {
		outline: 1px solid var(--mid-way-color);
	}
}

If you manage to figure out how to do it, that would be awesome.

It's possible to do most of the in-content dark theme by just changing the existing variables.

:root {
	--in-content-page-color: #0c0c0d;
	--in-content-page-background: #f9f9fa;
	--in-content-text-color: #0c0c0d;
	--in-content-selected-text: #fff;
	--in-content-box-background: #fff;
	--in-content-box-background-odd: #f3f6fa;
	--in-content-box-background-hover: #ebebeb;
	--in-content-box-background-active: #dadada;
       /* ... */
}

All the widget styling can be shared between pages, too. I think it affects most of the about: pages, so this is a super-easy way to do most of the work in one go.

Hello,

It would be nice if shadowfox provided a dark-theme for NoScript.

The description text of most if not all extensions is invisible due to the text and background color being the same. This affects Nightly at least but probably the others as well

Sorry, I know this one has been done before, and I'm not sure if there's any more that can be done with the CSS files here but, I'm still seeing white flashes when loading.

I came across a discussion of this on reddit https://www.reddit.com/r/FirefoxCSS/comments/7mm574/how_to_stop_the_flashing_white_screen_when_i_open/

Ironically, reloading that page is an example of a page where I see the flashes.
Our hero had posted there suggesting a script with stylus.... I tried that and still get the same.

Perhaps of interest, when I went to grab that link, I hit CTRL+H to open history, and noticed I'm even seeing a flash there as the sidebar loads.

I know that there is already CSS in place to stop this so I'm fearing that it might just be a firefox 'feature', but if anyone has any ideas, I'd be keen to try them out.

Thanks :)

To inspect them:

Library - chrome://browser/content/places/places.xul

About Firefox - chrome://browser/content/aboutDialog.xul

This is what I have for the latter in userChrome.css:

@-moz-document url(chrome://browser/content/aboutDialog.xul) {
    #clientBox {
        color: var(--primary-light-color) !important;
        background-color: var(--primary-dark-color) !important;
    }

    #bottomBox {
        background: var(--primary-dark-color) !important;
    }
}

The @-moz-document rule isn't really needed though.

As this project continues to grow, I think having an easy and clear method to (1) install and (2) update the project is increasingly important.

I can imagine this project being used in a number of different ways by different users, and my goal would be to accommodate the various approaches.

Some people may wish to use the entire repo, others only certain files, some may wish to change the default colors, in the case of webextension tweaks, the Internal UUID needs to be changed etc.

To complicate things, several Linux users reported a Firefox bug that prevents the proper usage of @import statements.

As such, there are currently two versions of userChrome/Content in the repo (one that is all inclusive, and one that contains import statements). Additionally, I recently included a "release" containing the two files.

Here's my initial thoughts on how people could approach installation:

and to accompany the various approaches, I would include updater scripts that would do the following:

I'm curious how everyone is using this repo, and whether the approach/guide given above makes sense to everyone.

If you have any thoughts or suggestions, please leave them below!

Additionally, I may need some help righting the Windows equivalent of such a script (perhaps @CaptaPraelium would be interested? ;) )

Hi, leaving feedback for dark theme on FF 57.0.1 x64 on windows 10. The only issues that I've found so far are:

• the connection details sub-menu background color makes unable to read the text
  

• a white horizontal line on the right context menu
  

Thanks for your work.
Best regards.

Sorry if logging an issue is not the correct way to suggest this, I don't github often.

It has occurred to me, that it should be possible to make a short (maybe one-liner) powershell script for installation. This would allow users to follow a very short and simple process to install the project, without needing to install git or any other additional tools. The process would be something like:

Use the address bar to visit about:support
Click on the Show Folder button available next to the label Profile Finder.
Click File... Open Windows Powershell
Paste in the following command and hit Enter:
    xxxxxxxx

It may even be possible to use powershell to find the profile directory (I'm fairly sure we could parse profiles.ini), thus making this a matter of downloading a .ps script and running it.

The script could then download the zip, create the chrome folder and any necessary files which do not already exist, and append this project's @import commands to those files (preserving existing content), extract the zip to the appropriate location, etc.

If we go all-out, we could provide a simple text menu allowing the user to select highlight colours, optional tweaks (the script could un-comment @import lines), etc.
Perhaps the script would also be able to modify options for extensions, so that colours match (thinking about https://github.com/m-khvoinitsky/dark-background-light-text-extension)

I'm fairly comfortable with manually extracting the zip file personally, and those who have git on their machine will surely want to use that, but I think this is going to be a very very popular project, and less-tech savvy users will want a way to install it, which is familiar to them and has less chance of something going wrong like extracting it to the wrong place.

I don't want to make extra work for you and I'm not sure you own a windows PC, so I would be happy to provide this script if you would be interested. I've not looked into it too deeply and perhaps it might not be perfect or even possible, but everything seems quite straightforward at this point. I don't work as fast as you though ;) There are a few variables to consider (such as upgrading existing installations, preserving existing user modifications, etc) so it would take some time to make sure it's done right.

Would anyone be interested in a similar repository for ThunderBird (Mozilla's email client)?

Work on that wouldn't start until this project was more finalized, but just wanted to gauge whether or not anyone else would benefit from that.

I've put dark themes for mozilla.org in a new repo, Mozilla-Dark. It currently includes the following domains:

• https://bugzilla.mozilla.org/
• https://wiki.mozilla.org/
• https://support.mozilla.org/
• https://developer.mozilla.org/

If interested, give it a try!

Available on userstyles.org: https://userstyles.org/styles/154002/mozilla-dark-bugzilla-sumo-wiki-developer

Hosted on GitHub (please submit any issues there): https://github.com/overdodactyl/Mozilla-Dark

If anyone has any opinions on whether or not these should be included in this repo, let me know

I received a lot more negative feedback about my color choice of darkcyan than positive. So, by popular request, I decided to use a dark orange (orange 70 and 80).

Users seemed to like this because it was (a) more inline with Firefox colors and (b) darkcyan didn't show up well for f.lux users.

The color scheme is naturally going to be a highly personal choice, so bear in mind it won't be possible to please everyone, but the goal here is the majority :)

For those who don't like the colors chosen, they can easily be modified in either color_variables.css or the first section of your userChrome/userContent.css files (depending on how you are using this repo).

As always, feedback and suggestions are welcome.

Can you please make a version that doesn't have support for extensions/addons?

I don't use this theme to for extensions/addons so having all that extra code is useless and makes Firefox take more time to load the theme.

Thank You :)

Thanks so much for putting this repo together!

Using FF 57.0.1 (64-bit) on macos El Capitan 10.11.6. I seem to remember originally seeing custom styling for about:neterror pages a couple days ago, but currently this appears to have the default styling. I usually test this by a totally random url in the address bar (e.g. adksjh.adfh). I do not see userContent.css show up in the style editor style list.

I played around the style editor adding a new style sheet with:

@-moz-document url-prefix(about:neterror) {
  .neterror {background:black;}
}

and confirmed a background change. Doing so I was able to confirm that url-prefix is necessary (you have just "url"). It's unclear to me though why changing url to url-prefix in userContent.css from 57cb1be doesn't seem to pick up the changes after a restart.

discussion continued from gorhill/uBlock#3342

sample from @overdodactyl with a a couple of original colors pasted in

• red/green/ (and yellow I assume) seem way too dark. Nothing wrong with the original colors
• grey colors - obviously we can;t use grey anymore, but please do not use red if you are (it's a bit confusing to me if this is happening or not) - use shades of blue (use the same saturation/luminosity etc as red, just switch around the RGB values to get the two shades (light/dark)
• color blind version needs testing

Listed below are Firefox's about pages. As dark themes are completed for them, they will be checked of below. Please let me know if I have left any out.

• about:about
• about:addons
• about:blank
• about:buildconfig
• about:cache
• about:checkerboard
• about:config
• about:crashes
• about:credits
• about:debugging
• about:devtools
• about:downloads
• about:healthreport
• about:home
• about:license
• about:logo
• about:memory
• about:mozilla
• about:neterror
• about:networking
• about:newtab
• about:performance
• about:plugins
• about:preferences
• about:privatebrowsing
• about:profiles
• about:rights
• about:robots
• about:serviceworkers
• about:sessionrestore
• about:studies
• about:support
• about:sync-log
• about:telemetry
• about:url-classifier
• about:webrtc

Hi all,

For webextensions that allow custom css (such as Violentmonkey and Tree Style Tab), you can use @import statements referencing the code in this repo. This will prevent having to copy/paste and manually update the code. GitHub doesn't serve their files in the proper format to be directly imported, so you have to use RawGit instead.

Violentmonkey

@import url("https://rawgit.com/overdodactyl/ShadowFox/master/webextensions/violentmonkey.css");

Tree Style Tab

@import url("https://rawgit.com/overdodactyl/ShadowFox/master/webextensions/treestyletabs.css")

Copy and paste the corresponding lines into your settings, and everything should be good to go.

Cheers!

Could we theme it? The only thing that might be an issue is the images.
Currently the onboarding overlay looks like this:

i went browsing popular forums and websites looking for bugs because i was bored, then i stumbled upon a glitch/bug, basically two rules interfere with each other.

MC Forums: http://www.minecraftforum.net/forums/mapping-and-modding-java-edition/minecraft-mods/1273024-1-4-dod-s-sounds-for-sdk-guns

MC Forums rule:

compiled.css ((line 2))

html, button, input, select, textarea {
	font-family: sans-serif;
	color: #222;
}

ShadowFox rule:

userContent.css ((line 112))

html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
	background: var(--primary-dark-color) !important;
	color: var(--primary-light-color) !important;
}

Example: Before | After

If it is confirmed that addons.mozilla.org is going to be themed, it may be beneficial to have a look at this deprecated user stylesheet and copy over what CSS we can.

I saw some missing styling:

1. about:addons home page content area (I got there by going to about:about and clicking about:addons there) has a white background:
   

2. about:addons legacy extentions page's "find a replacement" buttons used to be styled blue, but are now grey. Also, the other buttons for remove, and more are also grey and its not clear whether they can be interacted with or not. The entire screen seems to have some shading on top of it thats graying out the blue and white/grey text
   

3. about:healthreport has no styling: