this css file is not meant to be used on it's own, i'm using it with the colors option from the firefox settings page

this repo now includes userContent-grayscale.css which is in feature parity with the default file but every color has been converted to greyscale, images, videos and every kind of media is untouched and looks as they should

quick links:

• how to use
• the colors
• how it looks
• error pages
• about pages
• workaround for white background from loading images
  • using inversion + hue-rotate
  • using scale
  • using opacity or brightness
• remove/add rounded corners
• website specific settings

how to use?

go to Settings > Language and Appearance > Colors

i have set text to light grey #cccccc and background to dark grey #222222, set override the colors specified by the page with your selections above to always leave the use system colors and underline links ticked off (link colors can be set but we are overwriting them in the css file anyway)

Colors

if you find these color settings are not taking effect go to about:config search for layout.css.prefers-color-scheme.content-override and set it to 0

to unlock the usage of custom css go to about:config search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true

to find your profile folder go to about:support click Profile Directory and Open directory - alternatively you can go to about:profiles click on Root Directory and Open directory depending on your os it might be called folder too (in both pages)

once you found the profile folder create a chrome folder inside and put this userContent.css file inside it and restart firefox

set the firefox theme to dark in about:addons > themes and from there it should be a smooth experience without any white flashes before pages loading or when clicking on a link (tested under bare metal running kubuntu 20.04 firefox 95.0.1+ and a virtual machine running debian testing with firefox 91.4.0esr)

for custom scrollbar color go to about:config search for widget.non-native-theme.scrollbar.style click on the pencil icon, set the value to 1 and click on the tick icon for it to take effect (if you still can't see the styled scrollbars try other numbers between 0 and 5)

the colors

here is a list of some of the main colors used in this css file

tags	info	rgb	hex
body	background color
body, p	text color
span	color of invisible spans of content
b, em, i, u, em, small	color of italic, emphasized and ...
h1, h2	color of headers
ul, ol, li, del, dt, dd, optgroup, dl	color of some tables and borders
code, blockquote, q, nav, sup, sub, strong, mark, marker	color of quotes, code snippets, bold and ...
button, .btn	color of button borders
a:link	color of unclicked links
a:visited	color of visited links
a:hover	color of hovered links
a:active	color of active/clicked links

note that some light grey and dark grey colors are inverted for the values to be easily visible

how it looks

here is how some of the popular websites look with this custom setup

Github

StackOverFlow

Google Search

View Page Source

Raw Github file

Firefox Add-on Page

Youtube

Reddit

Mastodon

Archive.org

error pages

error pages are also in dark mode, no more blinding white background

Error Page

Risk Warning Error

Wrong Proxy Error

About pages

about pages are firefox specific pages that contain various information and tools for people to modify or monitor stuff on their browser, these pages are hard to modify and do not use the stylings we use for other websites but thankfully using css we can style them as well and that's exactly what i've done, go to about:about to see them

about:about

about:addons

about:config

workaround for white background from loading images

if you are on a slow internet and notice many images loading with a white background even tho we have set dark background colors for images it's because most images have a white background baked into them, below is some methods i've come up with to somehow work around this annoyance, hovering mouse over the images in all examples turns them to their default look

using inversion + hue-rotate

applying a 75% inverting filter makes every instance of bright colors turn to dark and vise versa, this fixes the white background issue but makes the images harder to make out, we also apply white background color to these images since we want all pictures to be inverted and show a dark grey background color, the hue-rotate filter at 180 degrees turns every inverted color back to normal

img {
background: #ccc !important;
background-color: #ccc !important;
filter: brightness(.75) invert(75%) hue-rotate(180deg) !important;
transition: ease 0.25s !important;
}

img:hover {
filter: brightness(1) invert(0%) hue-rotate(0deg) !important;
transition: ease 0.25s !important;
}

normal

inverted + hue-rotated

this option is not perfect tho but it works for people with severe accessibility issues or eye fatigue, i'm not going to include this in the main file either as the majority of people probably don't need it

using scale

another way to go about this is load the images at reduced sized and when you mouse is hovered over them they can go back to the normal size set by the website designer(s)

img {
transition: ease-in-out 0.25s !important;
scale: 50% !important;
}

img:hover {
transition: ease-in-out 0.25s !important;
scale: 100% !important;
}

scale 50% <-> 100%

you are not limited to always use these effects on websites, say only a few of the websites you go to load images at a big size (namely websites with background images to download) add the address inside the code snipped below so these stylings are applied to those sites, separate websites with , or just make as many of these line as you want with different settings for each website

@-moz-document domain("free-images.com"), domain("rawpixel.com") {
img {
transition: ease-in-out 0.25s !important;
scale: 50% !important;
}

img:hover {
transition: ease-in-out 0.25s !important;
scale: 100% !important;
}
}

these effects will only apply to these two websites and does not effect others at all

using opacity or brightness

using opacity we can change the images the least and still darken them enough to have a easy viewing experience, mouse hover is going to show the image in it's normal form

img {
transition: 0.5s ease !important;
opacity: .50 !important;
}

img:hover {
transition: 0.5s ease !important;
opacity: 1 !important;
}

opacity 50% <-> 100%

because our images are always on a dark background we can also use brightness filter to achieve the same effect, one difference being if images are rendered on-top of tables, borders or other stuff they are not shown behind the images when brightness is used

img {
transition: 0.5s ease !important;
filter: brightness(50%) !important;
}

img:hover {
transition: 0.5s ease !important;
filter: brightness(100%) !important;
}

remove rounded corners

this is pretty much down to preference but i don't like rounded corners in websites

* {
border-radius: 0% !important;
}

this will apply to everything on every website, if you just want to use it on images do not include these lines and just add border-radius: 0% !important; to the end of your img section

like the example above about white background on loading images this option is not included by default as it's quite niche and not to everyone's taste but use it if you like it

default	not rounded

you can use the same line for the opposite goal too, if you want all images to have rounded corners just do something like this:

img {
border-radius: 10% !important;
}

website specific settings

because this file applies to every website you go to and it's impossible for me to style things for each of them or even check them some problems are bound to happen to a website you might frequent to, luckily you can apply your own stylings for these specific websites using this easy to use syntax

@-moz-document domain("google.com") {
p {
color: yellow !important;
}
}

the above example applies the yellow color to every paragraph of the google.com website even tho we specified a light grey color in the begining of the css file, because this line is written after that tag it takes precedent for that website alone

lets show some examples to make this easier to understand, we are applying a 75% brightness to all images (using the img tag) we see in websites using filter: brightness(.75) but i want images in image websites to be at 100% brightness, lets apply this to this two popular websites

@-moz-document domain("free-images.com"), domain("rawpixel.com") {
img { 
filter: brightness(100%) !important; 
} 
}

you can use the same method to apply styles that are not present in the css file too, lets say you like rounded corner in all website that choose to include it but specifically want to remove them in github profile pages for avatars, a quick inspect element shows that this rounded border style is being applied using the .avatar class, knowing this let's remove it

@-moz-document domain("github.com") { .avatar { border-radius: 0% !important; } }

still in beta status and actively worked on

things might change with this file in the future but i consider it usable and it's a direct improvement over the dark extensions i've used in the past, some pastel colors are used in different tags to give a bit of life to pages as they were quite two dimensional if you only used firefox's color option alone