Skip to content
DarkModeJS helps you to auto detect user's time and switch theme to darkside
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit b75095c Nov 20, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Add files via upload Nov 16, 2018
LICENSE Update LICENSE Nov 17, 2018
README.md
dark.css Add files via upload Nov 16, 2018
darkmode.js Add files via upload Nov 16, 2018
index.html Update index.html Nov 20, 2018
light.css Add files via upload Nov 16, 2018
styles.css Add files via upload Nov 16, 2018

README.md

DarkModeJS

Lightweight and cross-browser DarkModeJS helps you to auto detect user's time and switch theme to darkside. Also, it's weight only 2,4kb and written on pure Javascript, without any plugins and jQuery!

Demo

You can test on: https://nickdeny.github.io/darkmode-js/

Documentation

Just copy-paste this code to end of body tag

<script src="darkmode.js"></script>
<script>
  var options = {
    light: 'light.css',
    dark: 'dark.css',
    startAt: '23:00',
    endAt: '06:00'
  };
  var DarkMode = new DarkMode(options);
</script>

To display light theme for non-javascript user just copy-paste it to head (if you separate themes into light/dark stylesheets):

<noscript>
  <link rel="stylesheet" type="text/css" href="light.css">
</noscript>

Options

Option Description Default Type
light Path to light stylesheet false String / Boolean
dark Path to dark stylesheet false String / Boolean
startAt Time to start Dark theme 21:00 String
endAt Time to end Dark theme 06:00 String
theme Set theme to light or dark false String / Boolean

Author

nickdeny – https://nickdeny.com/

Read us on Telegram[RU] – https://t.me/webdevblog

You can’t perform that action at this time.