dark-mode-switch

Dark-mode theme switch for Bootstrap with local storage preference

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
dark-mode-switch
536121.0.04 years ago4 years agoMinified + gzip package size for dark-mode-switch in KB

Readme

LICENSE code style: prettier
🌓 Dark Mode Switch
Add a dark-mode theme toggle with a Bootstrap Custom Switch.
  • Uses local storage to save preference
  • Only 230 Bytes minified and gzipped!

Usage

  1. Add your custom switch for the Dark Mode toggle:
```html
Dark Mode
```
  1. Load dark-mode-switch.min.js at the foot of your page:
```html ```
  1. Edit the dark-mode.css to suit your site - the one included here is a very basic example.

How it works

Turning dark mode on will add data-theme="dark" to the body tag. You can use CSS to target the elements on the page like so: ```css data-theme="dark" { background-color: #111 !important; color: #eee; } ```

Demo

Demo page

Browser Support

Works well with all the browsers supported by Bootstrap

Credits

Created thanks to the excellent dark-theme and local storage tutorials over at codyhouse.co.