Easy to use Dark Mode and Multi Color Theme Switch for websites and HTML Apps. Night mode colors are great for the evening time. This Night / Dark Theme color switch works without cookies, user profiles, or server-side processing. It's perfect for pure HTML websites or decentralized HTML apps. No limits to the use cases. No URL / Database requests or CPU load on the server side.
In this version: the code logic for the Dark Mode color switch is now hardened against possible failure situations, where the data input of the expected variables were missing, corrupted, false, or faked.
The memory recall function is now also hardened against possible exception cases, where the browser or the coder accidentally would corrupt expected variable inputs.
Actively decided NOT to check for the classList of the HTML Tags on memory recall, because the classList.contains command can AND does fail hard by itself, if the Tag is not yet loaded.
During DOM load the classList.contains command hangs the JS scripts for no reason, if we feed it wrong data during our testing process. Probably a browser bug. On false input the classList.contains command produces an error that is much, much larger, than having two CSS classes inside of the same HTML tag twice. Having CSS classes twice for the same tag breaks nothing. But checking for false CSS classes can break the script. It's a paradox :-) So we avoid it !
The code checks for this exception case during the switch function, so we do not need to do it during the memory recall, where bugs could be a lot more dangerous.
One could never know who will use this night mode switch in what type of devices.
Being fail-safe is better for devices that sustain human life, or safety.
The future possible failure scenario is when the browser will not recognize the JavaScript commands in 20 years. Web standards change, nothing is fail-safe in the long term, or on the long enough timeline !
Happy Color Switching everyone !
The updated Demo page now has the Dual Flip Switch Logic that changes the CSS color classes between two given color class options that can be set in the switch itself, and not the function, AND not by the app default color.
The Dual Flip Switch Logic can now have two individual option settings, which are different from the default user app setting. This helps a lot, when the user had a similar background color, which had no contrast to the color of the switch.
The white / light , snow white will now switch only between light and dark. Not just white to default, which was possibly white default setting of the user already.
onclick="DualFlipClassSwitch('html' , 'snow-white' , 'dark' , 'ColorMode');"
The dark / light , Night Mode will now switch only between light and dark. Not just dark to default, which was possibly dark default setting of the user already.
onclick="DualFlipClassSwitch('html' , 'dark' , 'snow-white' , 'ColorMode');"
Happy Flip Switching everyone !
Introducing the new DualFlipClassSwitch() function to make Dual Flip Switch Logic fail proof against exception cases, where user had dark or automatic color settings active. Resolves conflict between preset color settings and switch colors of the switch on mobile devices.
We now can have a dual logic switch with two options that we can set in the switch outside of the function itself. The switch can control it's own options now. Even if they are just two :-)
Dual Flip Switch Logic changes CSS class between two given options. If Class1 was NOT active: We switch it ON. Else: we flip switch Class2 ON. Only one can exist at the same time ! Class1 will always be switched on first !
Multi Option Flip Switch could be also possible, but that will be another "for each of" function to write in another time....
Happy flip switching everyone !
/* -::: Night / Dark or CSS Color Theme Switch with Memory, for websites and HTML apps. --- Original author :: Nik K. linkedin.com/in/nik--k---/ ( 18 April 2020 ). --- Code adoption :: YourName (date). --- License :: GNU General Public License v 3.0. --- Latest version :: github.com/Dorson/CSS-Dark-Mode-and-color-switch */
This open source code package can be used to create a color theme switch on websites or HTML apps.
The theme colors can be set in CSS color variables. We combine them in CSS classes for simplicity. Like html.dark , html.blue , html.purple .
Then we can also use the CSS toggle switch Java Script function to activate our colors and to remember the color setting in Local Storage Memory of the browser. NO logins, cookies, or server work needed !
The Memory recall JS function will remember our last color class setting and activate during load. Very good so far !
Zero limits to the color creativity. Now we can have user color settings in our HTML apps and on our beloved websites without login, or profiles, or cookies, or server tracking !
Have fun and remember to keep the code as open source as the original !