https://github.com/coliff/dark-mode-switch

Add a dark-mode theme toggle with a Bootstrap Custom Switch
https://github.com/coliff/dark-mode-switch

bootstrap custom-switch dark-mode-switcher dark-mode-toggle

Last synced: 13 days ago
JSON representation

Add a dark-mode theme toggle with a Bootstrap Custom Switch

• Host: GitHub
• URL: https://github.com/coliff/dark-mode-switch
• Owner: coliff
• License: mit
• Created: 2019-07-03T06:44:02.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-09-01T08:07:23.000Z (2 months ago)
• Last Synced: 2024-10-12T06:49:09.989Z (about 1 month ago)
• Topics: bootstrap, custom-switch, dark-mode-switcher, dark-mode-toggle
• Language: HTML
• Homepage: https://coliff.github.io/dark-mode-switch/
• Size: 271 KB
• Stars: 559
• Watchers: 10
• Forks: 111
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Support: .github/SUPPORT.md

Awesome Lists containing this project

README

        
[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/coliff/dark-mode-switch/master/LICENSE)

[![GitHub Super-Linter](https://github.com/coliff/dark-mode-switch/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![Best of JS](https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=coliff%2Fdark-mode-switch%26since=monthly)](https://bestofjs.org/projects/dark-mode-switch)

[![GitHub Stars](https://img.shields.io/github/stars/coliff/dark-mode-switch.svg?label=github%20stars)](https://github.com/coliff/dark-mode-switch)

[![NPM Downloads](https://img.shields.io/npm/dt/dark-mode-switch.svg)](https://www.npmjs.com/package/dark-mode-switch)

# 🌓 Dark Mode Switch

Add a dark-mode theme toggle with a Bootstrap Custom Switch.

- Uses local storage to save preference

- Only 383 Bytes minified and gzipped!

## Quick start

Several quick start options are available:

- [Download the latest release](https://github.com/coliff/dark-mode-switch/archive/v1.0.0.zip)

- Clone the repo `git clone https://github.com/coliff/dark-mode-switch.git`

- Install with [npm](https://www.npmjs.com/package/dark-mode-switch) `npm install dark-mode-switch`

- Install with [yarn](https://yarnpkg.com/en/package/dark-mode-switch) `yarn add dark-mode-switch`

## Usage

1. Add your custom switch for the Dark Mode toggle followed by the `dark-mode-switch.min.js` script:

Bootstrap 4.x

```html



  

  Dark Mode



```

Bootstrap 5.x

```html



  

  Dark Mode



```

2. Edit the `dark-mode.css` to suit your site - the one included here is a 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

[Bootstrap 5 Demo page](https://coliff.github.io/dark-mode-switch/)

## Browser Support

Works well with all the browsers supported by [Bootstrap 4](https://getbootstrap.com/docs/4.5/getting-started/browsers-devices/#supported-browsers) and [Bootstrap 5](https://getbootstrap.com/docs/5.3/getting-started/browsers-devices/#supported-browsers)

## To Enable DarkMode in Android Webview

- You need DOM Storage API in order to [make this work with WebView](https://github.com/mcnaveen/Android-Webview-Darkmode-with-JavaScript).

- Inside OnCreate under WebView paste this line.

`WebSettings.setDomStorageEnabled(true)`

## Credits

Created thanks to the excellent [dark-theme](https://codyhouse.co/blog/post/dark-light-switch-css-javascript) and [local storage](https://codyhouse.co/blog/post/store-theme-color-preferences-with-localstorage) tutorials over at [codyhouse.co](https://codyhouse.co).