A growing trend, and likely now the majority, is Dark mode in websites. I've heard Dark mode referred in other terms too, including Night mode.
Most browsers have an "appearance" setting to indicate the user's preference to view websites in Automatic, Light, or Dark. That setting assumes the website is designed with the user's preference for appearance as a consideration. On the browser side: Automatic means the user has no preference; Light means the user prefers to view the website in "Light" mode; and, of course, Dark means the user prefers to view the website in "Dark" mode.
That assumes the website was designed with those considerations. If not, the website is designed as the developer created it, with no viewing options for the user.In that case, the user is forced to view the website as the developer created and coded it – ignoring the user's appearance preference.
Many websites are still designed with one mode preference, either Light or Dark.
Some enterprising developers have created browser extensions, or add-ons, that automatically switch a website to either Light or Dark mode, regardless of the website design. It's a preset set of code, usually based around a CSS code called "invert". They insert the code into the body tag as:
filter: invert(1);
... within the parentheses, they can select any percentage value with 1 equal to 100% (and .5 equal to 50%).
These extensions work, sort of. There are some issues with the Invert method, particularly to images. Since the "invert" applies to everything, images are also inverted. You can tell, they sort of look like an old color film negative.
The way around that in CSS is to create the code like this:
body {
filter: invert(1);
> img {
filter: invert(1);
}
}
What that code does is convert everything in the document body to Invert at 100%, then go back and Invert all images at 100% (gets them back to normal).
Neat trick, eh? Somebody tell those folks building browser extensions and add-ons ...
That all being said, I have been working on an Infobar. With an extra class, it can stick to the top of the page, or stick to the bottom of a website page. It's only 24 pixels high. Easily put important stuff in there like telephone number, one line address, social media icons – and some accessibility items. I've got it so the accessibility items are all at the top right. They provide ability to change the overall font size (small, normal, large, jumbo) and change Light or Dark mode.
The accessibility features require javascript. My "accessible.js" file is just 2Kb in raw mode and that includes code to monitor the user browser "appearance" setting. If that changes while viewing the website, the entire website appearance changes dynamically.