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
((( spellific )))
Practice spelling while playing a fun word game!
Click here to play
Speech Recognition Anywhere
  • Type emails with your voice
  • Write documents with your voice
  • Control the Internet with your voice
  • Chrome Extension
Reconocimiento de voz en cualquier lugar
  • Escribe correos electrónicos con tu voz
  • Escribe documentos con tu voz
  • Controla la Internet con tu voz
  • Extensión de Chrome
Spracherkennung Allerorts
  • Geben Sie E-Mails mit Ihrer Stimme ein
  • Schreiben Sie Dokumente mit Ihrer Stimme
  • Steuern Sie das Internet mit Ihrer Stimme
  • Chrome-Erweiterung
Reconnaissance de la parole
  • Tapez des e-mails avec votre voix
  • Écrivez des documents avec votre voix
  • Contrôlez l'Inernet avec votre voix
  • Extension Chrome
Riconoscimento vocale ovunque
  • Digita e-mail con la tua voce
  • Scrivi documenti con la tua voce
  • Controlla Internet con la tua voce
  • Estensione Chrome
どこでも
音声認識
  • あなたの声で文書を書く
  • あなたの声でメールを入力してください
  • 音声でインターネットをコントロール
  • Chrome拡張機能
语音识别
无处不在
  • 用你的声音写文件
  • 用您的声音输入电子邮件
  • 用你的声音控制互联网
  • Chrome 扩展程序
語音識別
無處不在
  • 用你的聲音寫文件
  • 用您的聲音輸入電子郵件
  • 用你的聲音控制互聯網
  • Chrome 擴展程序
Subscribe to Internet Tips and Tools Feed

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

((( spellific )))
Practice spelling while playing a fun word game!
Click here to play
Speech Recognition Anywhere
  • Type emails with your voice
  • Write documents with your voice
  • Control the Internet with your voice
  • Chrome Extension
Reconocimiento de voz en cualquier lugar
  • Escribe correos electrónicos con tu voz
  • Escribe documentos con tu voz
  • Controla la Internet con tu voz
  • Extensión de Chrome
Spracherkennung Allerorts
  • Geben Sie E-Mails mit Ihrer Stimme ein
  • Schreiben Sie Dokumente mit Ihrer Stimme
  • Steuern Sie das Internet mit Ihrer Stimme
  • Chrome-Erweiterung
Reconnaissance de la parole
  • Tapez des e-mails avec votre voix
  • Écrivez des documents avec votre voix
  • Contrôlez l'Inernet avec votre voix
  • Extension Chrome
Riconoscimento vocale ovunque
  • Digita e-mail con la tua voce
  • Scrivi documenti con la tua voce
  • Controlla Internet con la tua voce
  • Estensione Chrome
どこでも
音声認識
  • あなたの声で文書を書く
  • あなたの声でメールを入力してください
  • 音声でインターネットをコントロール
  • Chrome拡張機能
语音识别
无处不在
  • 用你的声音写文件
  • 用您的声音输入电子邮件
  • 用你的声音控制互联网
  • Chrome 扩展程序
語音識別
無處不在
  • 用你的聲音寫文件
  • 用您的聲音輸入電子郵件
  • 用你的聲音控制互聯網
  • Chrome 擴展程序
Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed        

User Comments

There are 2 comments.

Displaying first 50 comments.

1. Posted By: Kei - - September 11, 2024, 3:33 am
It would be fantastic to allow exceptions instead of having to toggle the extension on a global level for sites it doesn't work well on.

2. Posted By: Jeff - - September 11, 2024, 3:07 pm
Hi Kei,

That is a great suggestion! So something like a blacklist of websites that "Instant Dark Mode" will not activate on? Hopefully that can be programmed in the future. In the meantime, there are a couple of settings that you might try:
☑ Detect if website already has dark mode and do not invert
☑ Darken background colors that do not invert well

Let me know if those settings help at all. Also, some websites default to a "dark mode" that may not work well with the extension inverting colors. But some of those websites will have a "Preferences" section where you can tell the website to use a "Light Mode" instead. It should save the preference for when you visit again. That may work better with the extension.

Jeff
https://www.seabreezecomputers.com/