|
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.
FEATURES
- Instant Dark Mode for your website without a lot of work.
- Detects if a users OS or Browser is set to prefer dark mode and instantly applies it.
- Does not invert images.
- Optional Dark Mode switch in top right corner of website.
- Optional save Dark Mode switch setting in a cookie.
dlc_b
Download
Downloaded 0 times.
Please make a donation to help with server costs and other expenses.
How to Use
Upload the file coolidm.js to your server and add this in <head> section of document:
<script type="text/javascript" src="coolidm.js"></script>
You may also edit the following variables in coolidm.js before uploading it:
/* 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.
CSS
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:
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
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.
How to Enable the Dark Theme in Chrome Mobile for Android
- In Chrome click on the More icon ⋮
- Click on Settings > Themes
- Change the theme to Dark
How to Enable the Dark Theme for Android
- Go to ⚙ Settings
- Click on Display > Theme
- Change the Theme to Dark
How to Enable the Dark Theme in Microsoft Edge (Chromium)
- Click on the Menu icon at the top right corner: …
- Click on ⚙ Settings
- Click on ≡ Settings on the left top corner
- Click on 🎨 Appearance
- Change "Default Theme" to Dark
How to Enable the Dark Theme on iPhone, iPad or iPad Touch
- Go to ⚙ Settings > Display & Brightness
- Change "APPEARANCE" to Dark
Last updated on December 17, 2020
Created on December 14, 2020 | 
