@brtheo/darkmode-switcher

Simple dark mode switcher using css custom property

Usage no npm install needed!

<script type="module">
  import brtheoDarkmodeSwitcher from 'https://cdn.skypack.dev/@brtheo/darkmode-switcher';
</script>

README

Darkmode Switcher

Simple way to toggle between dark or light mode based on the use of CSS custom property. Default applied mode is the one corresponding to the user's preference.

Installation

npm install darkmode-switcher --save

Usage

By default the name of the toggling css class and the local storage key is darkmode. You can change these names in each functions' parameters.

:root {
  --bgcolor: var(--white)
}
.darkmode {
  --bgcolor: var(--black)
}

// Main.js
import {initDarkmode} from './darkmode-switcher'
initDarkmode()

//myButton.js
import {switchDarkmode} from './darkmode-switcher'
handleClick = () => switchDarkmode()