Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

Darkening All Glaring White Websites At Once

Light colored websites have always been a pain for my eyes so the first thing I did a few years ago, before I had Stylish, was install a color inverter Google Chrome extension that I can turn on for light themed sites and darken them, the problem with that is that it breaks some elements on the page, like images turning blank, and it looks ugly overall.

Later, I ended up installing the Stylish extension for Chrome and started learning a bit of CSS until I can now customize any light themed website myself. I've never been happier. The problem with that is it gets tedious to darken all bright white websites that I visit, especially if I don't plan on visiting those sites often. I know there are global CSS styles that affect all websites but the problem with those is that they make ALL websites look the same and it gets old pretty fast. I just use them temporarily until I can customize the new websites I am active on.

TL;DR:
Is there a way to just invert a spectrum of white colors on a web page into the dark equivalent? E.g. convert white to black, very light gray to very dark gray, light gray to dark gray, something like that? I have written a few styles but I am still too much of a CSS beginner to know if it can be achievable through CSS alone or if that type of thing needs JS. Or if it's even possible at all?

Comments

  • Nope, not possible. Most of us who prefer dark styles have had this thought at some point. There's a lot of us, so if there was a simple solution, it would be popular enough that you wouldn't have to wonder if it existed.

    There really is no such thing as flawless global CSS. There are so many variables that none could ever work perfectly. The ones you're referring to use filters to invert the whole page, and re-invert all relevant elements like images and videos. Two big drawbacks to this are that you lose a bit of visual quality right off the bat (blurrier text), and inverted highlight colors tend to look odd and ugly. Nothing like blue becoming orangy-brown. Some use extra filters like hue-rotate, which degrades visual quality far worse than inversions.

    As for hoping there's some kinda magical combination of js that'll make it work, again, any kinda solution would be popular enough that it'd be the first Google search result. It's not because it doesn't exist.
  • Yeah, that's sad. It seems achievable in theory but there's just nothing like that out there yet. Maybe in the future, something like this will exist.
  • edited May 2018 Firefox
    *:not(a) {background-color: [color] !important; color: [color] !important;}
    *:not(a):hover {background-color: [color] !important; color: [color] !important;}
    /*maybe you could add some more :not() arguments*/
    a {color: [color] !important;}
    This'll do.
  • *:not(a) {background-color: [color] !important; color: [color] !important;}
    *:not(a):hover {background-color: [color] !important; color: [color] !important;}
    /*maybe you could add some more :not() arguments*/
    a {color: [color] !important;}
    This'll do.

    This'll do for what? Oh shit, did you just come up with the perfect global style with three lines of code? No. No you didn't. Not sure what kinda value you thought you were adding to the conversation here.
  • edited May 2018 Firefox
    Yeah, i reread what you wrote and i'm thinking you should probably go with a JScript, using this code in its css-adding-part but with random range integer variables for rgb.
    Since you would go for a more interesting global dark mode than just dark.
Sign In or Register to comment.