Make Changes to White Background and Black Text Only!
Hi Everyone,
I'm looking for a style that only turns all white background black and all black and dark text into white, everything else will be untouched and stays original, especially images. I found the only style that doesn't breaks anything on all websites but make changes to colors of all elements which I don't like. It also turns all dark theme websites white which is a problem. It is called "Black Web" from author Sly Sid.
I want to modify this style to exclude images and bars and charts from any changes. I also want to exclude it from modifying the newtab on Chrome. It is tough. Any help on how to do that will be greatly appreciated. If you can recommend a dark theme style that doesn't break anything from all websites, I appreciate it.
Below is the code which I added some changes that affect mouse over links which turns colors and when click on and a white drop-down menu on certain websites:
html, iframe, frame {background-color: black; -webkit-filter: invert(1) hue-rotate(180deg) !important;}
img, video, embed[flashvars],
*[type*="application/x-shockwave-flash"],
*[type*="application/x-silverlight"]
{-webkit-filter: invert(1) hue-rotate(180deg) !important;}
div[aria-label="YouTube Video Player in Fullscreen"] video
{-webkit-filter: none !important;}
a:hover, a:hover *, a:visited:hover {color: green !important; text-shadow: 1px 1px 1px white !important;}
a:visited {color: brown;}
a:active, a:active *, a:visited:active {color: purple !important;}
body select * {background-color: black; color: silver;}
I'm looking for a style that only turns all white background black and all black and dark text into white, everything else will be untouched and stays original, especially images. I found the only style that doesn't breaks anything on all websites but make changes to colors of all elements which I don't like. It also turns all dark theme websites white which is a problem. It is called "Black Web" from author Sly Sid.
I want to modify this style to exclude images and bars and charts from any changes. I also want to exclude it from modifying the newtab on Chrome. It is tough. Any help on how to do that will be greatly appreciated. If you can recommend a dark theme style that doesn't break anything from all websites, I appreciate it.
Below is the code which I added some changes that affect mouse over links which turns colors and when click on and a white drop-down menu on certain websites:
html, iframe, frame {background-color: black; -webkit-filter: invert(1) hue-rotate(180deg) !important;}
img, video, embed[flashvars],
*[type*="application/x-shockwave-flash"],
*[type*="application/x-silverlight"]
{-webkit-filter: invert(1) hue-rotate(180deg) !important;}
div[aria-label="YouTube Video Player in Fullscreen"] video
{-webkit-filter: none !important;}
a:hover, a:hover *, a:visited:hover {color: green !important; text-shadow: 1px 1px 1px white !important;}
a:visited {color: brown;}
a:active, a:active *, a:visited:active {color: purple !important;}
body select * {background-color: black; color: silver;}
Comments
https://userstyles.org/styles/131303/global-theme-changer
Also to control images you may find this useful
https://userstyles.org/styles/139602/revert-media
that style you provided does better but it breaks some elements on a few websites I tested on. On finviz.com, it made the menus category disappear. On gsmarena.com, it blocked 2 pictures in the upper right hand corner. On usaa.com, it inverted the background picture in the middle of the page completely. On phim.media, it made links on right hand side and in the middle of the page disappeared.
I can only fix one problem on gsmarena.com by removing the "header,footer" code from line 4 in code 1 section. I haven't figure out on how to fix the other broken elements on the other websites.
I wasted 3 weeks learning to code css styles and finding the best styles that doesn't break anything is tough. I only find "Black Web" style at "https://userstyles.org/styles/78507/black-web" to be almost the best but it inverted some things it shouldn't and changes all colors which is bad. The "Global Black Theme for Chrome" style broke a few elements on those websites I've tested.
strel,
your recommendation doesn't do great job without breaking elements on quite a few websites I've tested. thanks though.
Can someone find ways to fix all those problems from affecting all websites I've mentioned? Please, we need your help.
Any help is greatly appreciated!
Best Regards,
hitechlover
Wow, you fixed the problem withing 30 minutes after my post. That is very impressive. Even big companies don't fix problem that fast...lol. All the problems I've mentioned are fixed and works awesome. You deserve big credit and I would be happy to pay for your work if you charge your style for $2.
I like that your style turned the scrollbar dark too. All other global styles broke the "div" elements on "cnbc.com" and "gsmarena.com" as I used them for my testing. Yours work perfectly without breaking anything now, well I haven't fully test it on many more websites yet.
For "phim.media" site, I already know how to add a website exclusion but I want the css style to run on all websites without breaking anything. It did broke the links I've mentioned. Can you prevent it from turning already dark websites into bright white color? I meant was just leave those already dark websites alone instead of making a whole site exclusion. Make code that are smart enough to detect dark elements and leave them untouched. Is it even possible in this case?
I installed "chrome font fix": "https://userstyles.org/styles/111304/chrome-font-fix" to run with your style and it made a huge improvement in text quality in Chrome, wow.
I added a few lines of code to complement your style and make the best dark web browsing experience out there. I make all images to reduced their brightness a little bit to reduce eyes strain on those bright white ones. I also make all links turn green when hover and active. Much better dark web browsing experience at night in the dark.
Below is the added code:
img, svg, canvas, object {opacity: .9 !important;}
img:hover, svg:hover, canvas:hover, object:hover {opacity: 1 !important;}
a:hover, a:hover *, a:visited:hover, input[type="submit"]:hover, input[type="reset"]:hover {color: green !important; text-shadow: 1px 1px 1px white !important;}
a:visited {color: brown;}
a:active, a:active *, a:visited:active, input[type="submit"]:active, input[type="reset"]:active {color: purple !important;}
select * {background-color: black; color: silver;}
The internet should make black background as a new standard on all websites as this will helps reduce eyes strain at night when browsing the web...:)
Thank you all for your great contribution!
Best Regards,
hitechlover
Your test style changes the text decoration and style on certain websites and it also turn all active links blue which I don't like. Leave text style original. Make a style that only changes all white background black and all black or dark text white on all websites, everything else will be untouched and stays original. Also make it detect dark websites and prevent it from making any changes to already dark background. Try to exclude all images from filtering if you can.
Thank You,
hitechlover
Your recommendation broke a few elements in Gmail as you can see in the picture I've attached. Those elements I circled in green were blocked out by the style. I will notify the author so he can fix and improve it.
Thanks
Your updated "Global Black for chrome" style is great but it broke a few elements on https://stocktwits.com. Go to the site and click on Sign In, the popup dialog was blacked out by it. Check my attached screenshot for reference. Please find a fix and prevent it from affecting on all other websites that has similar login process. Your style is the only one that doesn't breaks anything on Gmail as I had pointed out by Strel's recommended style above this discussion.
I still like your "Global Black for chrome" style since it is almost close to being the best global dark style out there. I see that you added the font fix for Chrome in your style, nice. It just needs some more fine tuning, bug fixing, and it will be awesome. I am recommending your style to all my friends and family...:)
What do you think about user scripts manager extension? It is used for injecting Javascript and CSS code into the browsers to add more capabilities. Can you make it work by targeting only white background and black, dark text and inverse them? Leave all other elements untouched?
Here is the link to the user scripts site: https://greasyfork.org/en. I am learning and testing it now.
Please let me know as I am getting excited....:)
Thank you for your hard work.
You're the best!
hitechlover
Also, about the broken element on the left, is it a frame?, because the description clearly states it is excluding frames, and the style is meant to be used with a userscript linked in the style page...
This one is interesting, some elements aren't covered and I don't like the colors and the gradients, but it respects web structure quite well: https://userstyles.org/styles/93101/neon-street
Finally, with another concept, I found this quite elegant https://userstyles.org/styles/104239/nightman-1-6
I like the white font and black shadow over the other two test style which changes the font decoration and type and it looks ugly on many websites such as cnbc.com. Can you make a fix that applies to only stocktwits.com? I haven't find any other problems on other websites beside the Stocktwits website using your updated "Global Black for chrome" style. It is getting to be almost great. I will keep testing it and report any problems I find. Keep improving it and it will be the best style that doesn't break anything on all websites. Can you make your style to fix stocktwits.com to look like "Black Web" style? See picture. Black Web broke elements on Gmail while yours is not but it broke elements on stocktwits...lol.
Black background and dark theme websites help improve battery life on mobile devices and reduce eyes strain at night since back pixel is off which doesn't consume energy. That is why I seriously want a style that works great on all websites. I want to create my own style but it is tough to do. You are good at this stuff...:)
I installed "Morpheon Dark" extension for Chrome and it turn the newtab page black. Your style and many others invert it back to white which is a problem. Can you make your style to turn Chrome user interface dark like Ms Edge dark mode? If not, then exclude the newtab page from any changes or modification by your style so it stays black with Morpheon Dark. See picture for reference on Ms Edge dark mode.
Did you take a look into userscripts? I installed Violentmonkey script manager and smoothscroll script which makes Chrome scrolling much smoother and faster. You need to tinker with the settings to find the perfect spot for you. They have some nice scripts which add more functionalities to Chrome, pretty cool stuff. Chrome scrolling and zooming sucks on laptops/ultrabooks with touch gesture touchpads. I don't know why Google haven't fix this big issue on Chrome for years. Edge and IE11 provide perfect scrolling and zooming on my Samsung Notebook 9 15" laptop. It feels and function like on smartphone.
Looking for your improvements on your style.
Best Regards,
hitechlover
Can you make your own style to turn the whole Chrome UI dark?
Why don't you make a donation section on your style page for Paypal? I like to make a donation for your hard work.
Thank You,
hitechlover
I found another problem on twitch.tv is that your style messes up the video when I had it on fullscreen. It just inverted the whole video.
I will make a donation when you had your page up and running.
Thank You,
hitechlover
Can you turn the span menu on the New Tab page on Chrome black? Leave the background untouched as I had "Morpheon Dark" extension which turned it black already. Please see picture for reference. I almost get perfect dark browser but Morpheon Dark didn't turn the URL bar dark... :(
Thank You