Cool Javascript Instant Dark Mode and CSS

Cool Javascript Instant Dark Mode and CSS

It's time for your website to support Dark Mode
Last updated on
Subscribe to Internet Tips and Tools Feed
f Share
-
G+ Share
-
Tweet
-
in Share
-
P in it
-
Quick Jump
Features
Download
How to Use
CSS
Comments
Links
Home Page

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

  1. Click on the Windows Start button: ⊞
  2. Click on ⚙ Settings
  3. Click on 💻 Personalization
  4. Click on 🎨 Colors
  5. Change "Choose your color" to Dark

How to Enable Dark Theme on Mac

  1. Click on Apple menu: 🍎
  2. Click on System Preferences
  3. Click on General
  4. 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:

  1. Click on the Windows Start button: ⊞
  2. Type: chrome
  3. Right click on the Google Chrome icon that appears in the search.
  4. Click on Send to > Desktop (create shortcut).
  5. On the Desktop right click on the icon for the new Chrome shortcut.
  6. Click on Properties.
  7. Click on the Shortcut tab.
  8. 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

  9. Click on OK.
  10. 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

  1. In Chrome click on the More icon ⋮
  2. Click on Settings > Themes
  3. Change the theme to Dark

How to Enable the Dark Theme for Android

  1. Go to ⚙ Settings
  2. Click on Display > Theme
  3. Change the Theme to Dark

How to Enable the Dark Theme in Microsoft Edge (Chromium)

  1. Click on the Menu icon at the top right corner: …
  2. Click on ⚙ Settings
  3. Click on ≡ Settings on the left top corner
  4. Click on 🎨 Appearance
  5. Change "Default Theme" to Dark

How to Enable the Dark Theme on iPhone, iPad or iPad Touch

  1. Go to ⚙ Settings > Display & Brightness
  2. Change "APPEARANCE" to Dark

Last updated on December 17, 2020
Created on December 14, 2020

Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed        
f Share
-
G+ Share
-
Tweet
-
in Share
-
P in it
-

User Comments

There are 0 comments.

Displaying first 50 comments.