1.2.0 • Published 4 years ago

@nickdeny/darkmode-js v1.2.0

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

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,6kb 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 DarkMode = new DarkMode();</script>

Or use it with options:

<script src="darkmode.js"></script>
<script>
  var options = {
    light: "light.css",
    dark: "dark.css",
    startAt: "23:00",
    endAt: "06:00",
    checkSystemScheme: true,
    saveOnToggle: true
  };
  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

OptionDescriptionDefaultType
lightPath to light stylesheetfalseString / Boolean
darkPath to dark stylesheetfalseString / Boolean
startAtTime to start Dark theme"21:00"String
endAtTime to end Dark theme"06:00"String
checkSystemSchemeCheck System SchemetrueBoolean
saveOnToggleSave current Mode on Toggle (Local Storage)trueBoolean

Events

EventDescription
getMode()Get current Mode
setMode("light"/"dark")Set Mode
isModeSaved()Check is Mode saved (Local Storage)
clearSavedMode()Remove Mode value (Local Storage), reinit Mode
toggleMode()Toggle current Mode
getSystemScheme()Get System Scheme (Returns light/dark/auto)

Author

nickdeny – https://nickdeny.com/

Read us on TelegramRUhttps://t.me/webdevblog