Cool Javascript Instant Dark Mode and CSS

Quick Jump

Links

Websites can now automatically display in Dark Mode by detecting if a user has set their Operating System to a dark theme. Every modern browser now supports the detection of a user's color scheme preference. "Cool JavaScript Instant Dark Mode" will allow your website to support Dark Mode just by adding the script to your website.

Upload the file coolidm.js to your server and add this in <head> section of document:

/* do_not_invert is a comma separated string of html tags, classes and ids not to invert colors of */ do_not_invert : 'img, iframe, [style*="background-image"], [style*="background: url"]', dark_mode_switch : true, /* Set to false to not show dark mode switch */ dark_mode_save : true, /* Set to false to not save dark mode switch setting in a cookie */ /* Some websites do not look good with inverted colors. In that case, set use_black_mode to true below and then use the styles below it to style every element to dark backgrounds and light text when dark mode is enabled with the script. */ use_black_mode : false, /* If true then the styles below will used with dark mode instead of color invert */ black_mode_styles : { '.coolidm_white' : { /* Styles for elements with white backgrounds */ 'background-color' : '#000000', /* Elements with white backgrounds will change to this background */ 'color' : '#ffffff', /* text color */ 'border-color' : '#ffffff', }, '.coolidm_other' : { /* Styles for elements with other background colors */ 'background-color' : '#222222', /* Elements with other backgrounds will change to this background */ 'color' : '#ffff00', /* other text color */ 'border-color' : '#009900', }, 'a:link, a:link *' : { 'color' : '#0088ff' }, /* links color */ 'a:visited, a:visited *' : { 'color' : '#7777ff' }, /* visited links color */ },

This is an Instant Dark Mode function by simply inverting the colors using the CSS "filter: invert(100%)". Applied to the html tag it affects everything on the webpage. To make sure that image colors are not inverted we also apply it to img and then they are inverted twice (once with the html tag inversion and again on the img tags) to make them original colors. Unfortunately, we can't affect images in iframes so we have to add iframe to make the colors normal in the iframe. So since most iframes are basically image ads it looks good. However, iframes that are not images will still have white backgrounds.

Some websites do not look good with inverted colors. In that case, set use_black_mode to true and then use the styles below it to style every element to dark backgrounds and light text when dark mode is enabled with the script.

If you want to create your own switch then have it call coolidm.instant_dark_mode() Call coolidm.instant_dark_mode() a second time to go back to un-inverted colors.

If you prefer not to use coolidm.js on your website but want to style for users that prefer dark mode, here is how to add the css to your style sheet to detect a users preference:

How to Enable Dark Theme in Windows 10

Click on the Windows Start button: ⊞
Click on ⚙ Settings
Click on 💻 Personalization
Click on 🎨 Colors
Change "Choose your color" to Dark

How to Enable Dark Theme on Mac

Click on Apple menu: 🍎
Click on System Preferences
Click on General
Change "Appearance" to Dark

How to Enable the Dark Theme in Chrome Desktop

Chrome Desktop for Windows 10 automatically uses a dark theme if you set your Operating System to a Dark Theme (Windows, Mac)

Chrome Desktop for Windows 7 can use a dark theme and automatically show dark modes for websites that are programmed for it if the command line parameter --force-dark-mode is added to a shortcut to Chrome. Here are instructions:

Click on the Windows Start button: ⊞
Type: chrome
Right click on the Google Chrome icon that appears in the search.
Click on Send to > Desktop (create shortcut).
On the Desktop right click on the icon for the new Chrome shortcut.
Click on Properties.
Click on the Shortcut tab.
In the Target field, at the end, after the last quote add a space and --force-dark-mode
It will look something like this:
Target: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --force-dark-mode
Click on OK.
Make sure that you close all instances of Chrome and then to use Chrome in Dark Mode you will need to start Chrome with the new shortcut icon on the desktop.

Note: At the time of this writing (12/14/2020) even if a Dark Theme is enabled, Google Search and many other Google websites still only display with white backgrounds. Some users have reported that Google is currently testing Dark Mode for some users for Google Search.

Cool Javascript Instant Dark Mode and CSS

It's time for your website to support Dark Mode