Users can select their preference for Light or Dark mode in the browser settings.
There are also a considerable number of browser extensions (or add-ons) to help users alter their browser's display of websites. Some enhance sizes, some enhance colors, some offer their own version of Light or Dark.
The extensions are usually to overcome the website's lack of accessibility features.
I've been working on two features for my own CSS Framework. I'll be adding those to CSS Blade.
The first is shown at the right. It's added to a new component: Infobar. Infobar can be either at the top or bottom of a website. And "sticky", meaning it is always in view. I've designed it to be as unobtrusive as possible. The feature is designed as a drop down ... hover over the "sun" icon, and the drop down displays. Select either Light Mode or Dark Mode and the change is immediate.
The second is shown at the left. It'd designed to change the size of the text displayed on the website. Smaller Size is 12px in size (small), Normal Size is the default for most browsers, 16px. Larger is about 12.5% larger than normal at 18px. Jumbo is about 37.% larger than normal at 22px.
Both of these new features are based on the implementation of CSS.
The Font Size changer, for example, is based on using the rem unit for font sizes. The "r" in "rem" means relative.
Here's an example of how that works. Most browsers are set to a default of 16px. (px is pixel) ... in CSS, that is equivalent to:
html {
font-size: 16px;
}
The effect of this cannot be under-rated. This setting, or default in the browser, means that every element in your website page that is text based will default to this font size.
To make paragraph text be the same size, the CSS would look like:
p {
font-size: 1rem;
}
We would be using similar notations througout the CSS file to impact the website. The advance to this is that you can alter the entire website by simply changing the "html" notation, as in:
html {
font-size: 18px;
}
In our example, all the paragraph text would then also be 18px.
My CSS Framework, CSS Blade, works on this principle. Where possible, the unit of measure I prefer is the rem.
The Infobar Font Size changer uses some javascript to change the html. That has immediate impact and increases or decreases the text and heading display on the page.
The Light Mode and Dark Mode selector works on a similar basis. I've used CSS variables to define most of the background colors and text/heading colors used in the website design. There are actually two sets of the same variables. One set is for Light Mode and one set is for the Dark Mode (default).
The grouping is defined by:
[data-theme='dark'] {
background-color: black;
color: white;
... elements here
}
and
[data-theme='light'] {
background-color: white;
color: black;
... elements here
}
At the very top
<!DOCTYPE html>
<html data-theme="dark">
Having the data-theme set to dark means that the dark set of variables will be used to display the website. WIth the Light Mode and Dark Mode changer, I use a bit of javascript code to change the data-theme setting with immediate effect on the display of the page.
If you are following this series, you may have questions about how I managed to get the dropdown element that displays the options for each of the new features to display rounded corners. Those are UL elements and the UL typically does not show rounded corners. First, you have to have a background color or a border. Then define your border-radius. Then add the key to making the rounded corners to work: "overflow: hidden;". What that does is force the child "li" element to be hidden under the border.
Enjoy!