Dark Mode

How To Enable Google Chrome Dark Mode

The Verge:

Chrome 73 has officially rolled out to all users today, bringing with it several new improvements, including the long-awaited dark mode for macOS. (“Windows support is on the way,” the release notes read.)

Dark mode was first announced for Chrome last month, but today’s release has made it official. It works pretty much as you’d expect: if dark mode is enabled on your computer, Chrome will automatically theme itself appropriately to match, in what essentially looks like the browser’s regular darker Incognito Mode menu bars. (Incognito Mode while using dark mode on Chrome looks virtually identical, save for a new icon in the menu bar.)

It’s technically not the first time Chrome has offered dark or themed options — Google has offered themes for Chrome (including dark mode-esque styles) in the Chrome Web Store for a while, but today’s update makes it more official on a system level. So, instead of having to switch back and forth manually, Chrome will simply just respect whatever your native settings are.

You can install Dark Mode by going to the Google Chrome Theme.

How to Dynamically Load Dark Mode CSS with JavaScript

How to Dynamically Load Dark Mode CSS in your Website or WebApp (Ionic, React, or Angular):

1. Create the two separete css files, one for dark colors and one for bright
2. Upload those to your server to css folder
3. Use the script example below to load the appropriate css file based on the hours in the day.


function loadcssfile(filename, filetype){
    if (filetype=="css"){ //check filename is an external CSS file
        var fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref);
}

var date = new Date();

 if (date.getHours() >= 19 || date.getHours() <= 7) // after 7pm before 7am
	loadcssfile("../css/darkmode.css", "css");
 else
	loadcssfile("../css/lightmode.css", "css");

Don't blind your readers at night -_-

If you want to incorporate sunset and sunrise you can look into Suncal library, but you will have to request user's location which is always rude and not recommended.