├── .gitattributes
├── .eslintignore
├── .npmrc
├── .eslintrc.json
├── .gitignore
├── .editorconfig
├── .github
    ├── dependabot.yml
    ├── CONTRIBUTING.md
    ├── SUPPORT.md
    ├── AGENTS.md
    ├── workflows
    │   ├── dependency-review.yml
    │   ├── codeql-analysis.yml
    │   └── linter.yml
    ├── PULL_REQUEST_TEMPLATE.md
    └── CODE_OF_CONDUCT.md
├── dark-mode.css
├── dark-mode-switch.min.js
├── LICENSE
├── package.json
├── dark-mode-switch.js
├── index.html
└── README.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto eol=lf
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | *.min.js
2 | **/node_modules/**


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = 2
2 | registry = 'https://registry.npmjs.org/'


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "root": true,
3 |   "extends": ["eslint:recommended", "prettier"],
4 |   "rules": {
5 |     "no-undef": "off"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Folders to ignore
 2 | node_modules/*
 3 | 
 4 | # OS or Editor folders
 5 | ._*
 6 | .cache
 7 | .DS_Store
 8 | Thumbs.db
 9 | 
10 | # Files
11 | npm-debug.log
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # https://editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | end_of_line = lf
 8 | indent_size = 2
 9 | indent_style = space
10 | trim_trailing_whitespace = true
11 | 
12 | [*.js]
13 | insert_final_newline = true


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 |   - package-ecosystem: github-actions
 4 |     directory: "/"
 5 |     schedule:
 6 |       interval: monthly
 7 |     groups:
 8 |       github-actions:
 9 |         patterns:
10 |           - "*"
11 |     open-pull-requests-limit: 1
12 | 


--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 | 
3 | We are happy to accept contributions from the community to improve this project.
4 | 
5 | ## Contribution Guidelines
6 | 
7 | - Use a [Prettier](https://prettier.io/) plugin for your code editor for automatic code formatting
8 | - Use a [EditorConfig](https://editorconfig.org) plugin for consistent spacing and code formatting
9 | 


--------------------------------------------------------------------------------
/.github/SUPPORT.md:
--------------------------------------------------------------------------------
1 | Before posting an issue regarding a problem using this with your site please be sure that all of the below are checked:
2 | 
3 | - [ ] I have [searched Open and Closed issues](https://github.com/coliff/dark-mode-switch/issues?utf8=%E2%9C%93&q=is%3Aissue+) to check my issue has not been opened before
4 | - [ ] I have provided a screenshot and/or link to my site/page with issue
5 | 


--------------------------------------------------------------------------------
/.github/AGENTS.md:
--------------------------------------------------------------------------------
 1 | # Agents
 2 | 
 3 | <!-- https://agents.md -->
 4 | 
 5 | ## GitHub Actions Workflows
 6 | 
 7 | - All GitHub Actions should be pinned versions (SHA-1) to avoid breaking changes.
 8 | - If using `actions/checkout`, it should have `persist-credentials: false` set.
 9 | - Always use the latest available versions of GitHub Actions.
10 | - GitHub Actions filenames should be all lowercase, with dashes separating words.
11 | - All GitHub Actions workflows should always be formatted with Prettier.
12 | 


--------------------------------------------------------------------------------
/.github/workflows/dependency-review.yml:
--------------------------------------------------------------------------------
 1 | name: "Dependency Review"
 2 | on: [pull_request]
 3 | 
 4 | permissions:
 5 |   contents: read
 6 | 
 7 | jobs:
 8 |   dependency-review:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - name: "Checkout Repository"
12 |         uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v5
13 |         with:
14 |           persist-credentials: false
15 | 
16 |       - name: "Dependency Review"
17 |         uses: actions/dependency-review-action@3c4e3dcb1aa7874d2c16be7d79418e9b7efd6261 # v4
18 | 


--------------------------------------------------------------------------------
/dark-mode.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Dark Mode Switch v1.0.1 (https://github.com/coliff/dark-mode-switch)
 3 |  * Copyright 2021 C.Oliff
 4 |  * Licensed under MIT (https://github.com/coliff/dark-mode-switch/blob/main/LICENSE)
 5 |  */
 6 | 
 7 | [data-theme="dark"] {
 8 |   background-color: #111 !important;
 9 |   color: #eee;
10 | }
11 | 
12 | [data-theme="dark"] .bg-black {
13 |   background-color: #fff !important;
14 | }
15 | 
16 | [data-theme="dark"] .bg-dark {
17 |   background-color: #eee !important;
18 | }
19 | 
20 | [data-theme="dark"] .bg-light {
21 |   background-color: #222 !important;
22 | }
23 | 
24 | [data-theme="dark"] .bg-white {
25 |   background-color: #000 !important;
26 | }


--------------------------------------------------------------------------------
/dark-mode-switch.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * Dark Mode Switch v1.0.1 (https://github.com/coliff/dark-mode-switch)
3 |  * Copyright 2021 C.Oliff
4 |  * Licensed under MIT (https://github.com/coliff/dark-mode-switch/blob/main/LICENSE)
5 |  */
6 | var darkSwitch=document.getElementById("darkSwitch");window.addEventListener("load",(function(){if(darkSwitch){initTheme();darkSwitch.addEventListener("change",(function(){resetTheme()}))}}));function initTheme(){var darkThemeSelected=localStorage.getItem("darkSwitch")!==null&&localStorage.getItem("darkSwitch")==="dark";darkSwitch.checked=darkThemeSelected;darkThemeSelected?document.body.setAttribute("data-theme","dark"):document.body.removeAttribute("data-theme")}function resetTheme(){if(darkSwitch.checked){document.body.setAttribute("data-theme","dark");localStorage.setItem("darkSwitch","dark")}else{document.body.removeAttribute("data-theme");localStorage.removeItem("darkSwitch")}}


--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
 1 | name: "CodeQL"
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |       - "!dependabot/**"
 8 |   pull_request:
 9 |     branches:
10 |       - main
11 |       - "!dependabot/**"
12 | 
13 | permissions:
14 |   contents: read
15 | 
16 | jobs:
17 |   analyze:
18 |     name: Analyze
19 |     runs-on: ubuntu-latest
20 |     permissions:
21 |       actions: read
22 |       contents: read
23 |       security-events: write
24 | 
25 |     steps:
26 |       - name: Checkout repository
27 |         uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v5
28 |         with:
29 |           persist-credentials: false
30 | 
31 |       - name: Initialize CodeQL
32 |         uses: github/codeql-action/init@2152c31696c8409983789c80ab57c4d91465a2fc # v4
33 |         with:
34 |           languages: "javascript"
35 | 
36 |       - name: Perform CodeQL Analysis
37 |         uses: github/codeql-action/analyze@2152c31696c8409983789c80ab57c4d91465a2fc # v4
38 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Christian Oliff
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.github/workflows/linter.yml:
--------------------------------------------------------------------------------
 1 | name: Lint Code Base
 2 | 
 3 | on:
 4 |   push:
 5 | 
 6 | permissions:
 7 |   contents: read
 8 | 
 9 | jobs:
10 |   build:
11 |     permissions:
12 |       contents: read # for actions/checkout to fetch code
13 |       statuses: write # for github/super-linter/slim to mark status of each linter run
14 |     name: Lint Code Base
15 |     runs-on: ubuntu-latest
16 | 
17 |     steps:
18 |       - name: Checkout Code
19 |         uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v5
20 |         with:
21 |           fetch-depth: 0
22 |           persist-credentials: false
23 | 
24 |       - name: Lint Code Base
25 |         uses: super-linter/super-linter/slim@f6d06a003575dde14f917e642302cf1251f28f4a # v8
26 |         env:
27 |           DEFAULT_BRANCH: main
28 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
29 |           IGNORE_GITIGNORED_FILES: true
30 |           JAVASCRIPT_DEFAULT_STYLE: prettier
31 |           LOG_LEVEL: NOTICE
32 |           SUPPRESS_POSSUM: true
33 |           VALIDATE_ALL_CODEBASE: false
34 |           VALIDATE_BIOME_FORMAT: false
35 |           VALIDATE_BIOME_LINT: false
36 |           VALIDATE_CHECKOV: false
37 |           VALIDATE_HTML: false
38 |           VALIDATE_JSCPD: false
39 |           VALIDATE_MARKDOWN: false
40 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--- Provide a general summary of your changes in the Title above -->
 2 | 
 3 | ## Description
 4 | <!--- Describe your changes in detail -->
 5 | 
 6 | ## Motivation and Context
 7 | <!--- Why is this change required? What problem does it solve? -->
 8 | <!--- If it fixes an open issue, please link to the issue here. -->
 9 | 
10 | ## How Has This Been Tested?
11 | <!--- Please describe in detail how you tested your changes. -->
12 | <!--- Include details of your testing environment, tests ran to see how -->
13 | <!--- your change affects other areas of the code, etc. -->
14 | 
15 | ## Screenshots (if appropriate):
16 | 
17 | ## Types of changes
18 | <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
19 | - [ ] Bug fix (non-breaking change which fixes an issue)
20 | - [ ] New feature (non-breaking change which adds functionality)
21 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
22 | 
23 | ## Checklist:
24 | <!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
25 | <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
26 | - [ ] My code follows the code style of this project.
27 | - [ ] I have ran `npm run test` and test passes
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dark-mode-switch",
 3 |   "version": "1.0.1",
 4 |   "description": "Dark-mode theme switch for Bootstrap with local storage preference",
 5 |   "keywords": [
 6 |     "bootstrap",
 7 |     "dark-mode"
 8 |   ],
 9 |   "homepage": "https://github.com/coliff/dark-mode-switch",
10 |   "bugs": {
11 |     "url": "https://github.com/coliff/dark-mode-switch/issues"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/coliff/dark-mode-switch.git"
16 |   },
17 |   "funding": {
18 |     "type": "github",
19 |     "url": "https://github.com/sponsors/coliff"
20 |   },
21 |   "license": "MIT",
22 |   "author": "Christian Oliff (https://christianoliff.com)",
23 |   "main": "dark-mode-switch.min.js",
24 |   "scripts": {
25 |     "build": "npm run prettier && npm run test && npm run minify",
26 |     "minify": "terser --ecma 5 --keep-classnames --keep-fnames --output dark-mode-switch.min.js -- dark-mode-switch.js",
27 |     "prettier": "prettier --write dark-mode-switch.js",
28 |     "test": "eslint dark-mode-switch.js"
29 |   },
30 |   "files": [
31 |     "dark-mode-switch.js",
32 |     "dark-mode-switch.min.js",
33 |     "dark-mode-switch.css",
34 |     "LICENSE",
35 |     "package.json",
36 |     "README.md"
37 |   ],
38 |   "devDependencies": {
39 |     "eslint": "^8.49.0",
40 |     "eslint-config-prettier": "^9.0.0",
41 |     "prettier": "^3.0.3",
42 |     "terser": "^5.19.4"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/dark-mode-switch.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Dark Mode Switch v1.0.1 (https://github.com/coliff/dark-mode-switch)
 3 |  * Copyright 2021 C.Oliff
 4 |  * Licensed under MIT (https://github.com/coliff/dark-mode-switch/blob/main/LICENSE)
 5 |  */
 6 | 
 7 | var darkSwitch = document.getElementById("darkSwitch");
 8 | window.addEventListener("load", function () {
 9 |   if (darkSwitch) {
10 |     initTheme();
11 |     darkSwitch.addEventListener("change", function () {
12 |       resetTheme();
13 |     });
14 |   }
15 | });
16 | 
17 | /**
18 |  * Summary: function that adds or removes the attribute 'data-theme' depending if
19 |  * the switch is 'on' or 'off'.
20 |  *
21 |  * Description: initTheme is a function that uses localStorage from JavaScript DOM,
22 |  * to store the value of the HTML switch. If the switch was already switched to
23 |  * 'on' it will set an HTML attribute to the body named: 'data-theme' to a 'dark'
24 |  * value. If it is the first time opening the page, or if the switch was off the
25 |  * 'data-theme' attribute will not be set.
26 |  * @return {void}
27 |  */
28 | function initTheme() {
29 |   var darkThemeSelected =
30 |     localStorage.getItem("darkSwitch") !== null &&
31 |     localStorage.getItem("darkSwitch") === "dark";
32 |   darkSwitch.checked = darkThemeSelected;
33 |   darkThemeSelected
34 |     ? document.body.setAttribute("data-theme", "dark")
35 |     : document.body.removeAttribute("data-theme");
36 | }
37 | 
38 | /**
39 |  * Summary: resetTheme checks if the switch is 'on' or 'off' and if it is toggled
40 |  * on it will set the HTML attribute 'data-theme' to dark so the dark-theme CSS is
41 |  * applied.
42 |  * @return {void}
43 |  */
44 | function resetTheme() {
45 |   if (darkSwitch.checked) {
46 |     document.body.setAttribute("data-theme", "dark");
47 |     localStorage.setItem("darkSwitch", "dark");
48 |   } else {
49 |     document.body.removeAttribute("data-theme");
50 |     localStorage.removeItem("darkSwitch");
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" class="h-100">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="x-ua-compatible" content="ie=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <title>Dark Mode Switch</title>
 9 |   <meta name="description" content="Add a dark-mode theme toggle with a Bootstrap Custom Switch">
10 | 
11 |   <link rel="icon"
12 |     href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🌓</text></svg>">
13 | 
14 |   <meta property="og:site_name" content="Dark Mode Switch">
15 |   <meta property="og:image"
16 |     content="https://repository-images.githubusercontent.com/194995309/38db8f80-9db7-11e9-998f-43f2a26d9e0b">
17 |   <meta property="og:title" content="dark-mode-switch">
18 |   <meta property="og:description" content="Add a dark-mode theme toggle with a Bootstrap Custom Switch">
19 |   <meta property="og:url" content="https://coliff.github.io/dark-mode-switch/">
20 |   <link rel="author" href="https://christianoliff.com/">
21 | 
22 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
23 | 
24 |   <!-- IE 11 polyfill for CSS and Custom Properties -->
25 |   <script
26 |     nomodule>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/npm/ie11-custom-properties@4/ie11CustomProperties.min.js"><\/script>');</script>
27 | 
28 |   <link rel="stylesheet" href="dark-mode.css">
29 | 
30 | </head>
31 | 
32 | <body class="bg-white text-center d-flex h-100">
33 | 
34 |   <div class="container d-flex p-3 mx-auto w-100 flex-column">
35 |     <header class="mb-auto">
36 |       <div class="float-md-start fw-bold fs-5">Dark Mode Switch</div>
37 |       <nav class="nav justify-content-center float-md-end">
38 |         <a class="nav-link active" href="https://coliff.github.io/dark-mode-switch/">Home</a>
39 |         <a class="nav-link" href="https://github.com/coliff/dark-mode-switch" target="_blank">GitHub</a>
40 |         <div class="nav-link">
41 | 
42 |           <div class="form-check form-switch">
43 |             <input type="checkbox" class="form-check-input" id="darkSwitch">
44 |             <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
45 |           </div>
46 |           <script src="dark-mode-switch.min.js"></script>
47 | 
48 |         </div>
49 |       </nav>
50 |     </header>
51 | 
52 |     <main role="main">
53 |       <h1>🌓 Dark Mode Switch</h1>
54 |       <p class="lead">Add a dark-mode theme switch with a Bootstrap Custom Switch</p>
55 |       <ul class="list-unstyled">
56 |         <li>&middot; Uses local storage to save preference</li>
57 |         <li>&middot; Only 383 Bytes minified and gzipped!</li>
58 |       </ul>
59 |       <p>
60 |         <a href="https://github.com/coliff/dark-mode-switch" target="_blank" rel="noopener"
61 |           class="btn btn-lg btn-secondary">
62 |           Learn more
63 |         </a>
64 |       </p>
65 |     </main>
66 | 
67 |     <footer class="mt-auto">
68 |       <p>&copy; 2022</p>
69 |     </footer>
70 | 
71 |   </div>
72 | </body>
73 | 
74 | </html>
75 | 


--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our Standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | - Using welcoming and inclusive language
12 | - Being respectful of differing viewpoints and experiences
13 | - Gracefully accepting constructive criticism
14 | - Focusing on what is best for the community
15 | - Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | - Trolling, insulting/derogatory comments, and personal or political attacks
21 | - Public or private harassment
22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | - Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our Responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team via GitHub issues. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [https://contributor-covenant.org/version/1/4][version]
44 | 
45 | [homepage]: https://contributor-covenant.org
46 | [version]: https://contributor-covenant.org/version/1/4/
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/coliff/dark-mode-switch/master/LICENSE)
 2 | [![GitHub Super-Linter](https://github.com/coliff/dark-mode-switch/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)
 3 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 4 | [![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)
 5 | [![GitHub Stars](https://img.shields.io/github/stars/coliff/dark-mode-switch.svg?label=github%20stars)](https://github.com/coliff/dark-mode-switch)
 6 | [![NPM Downloads](https://img.shields.io/npm/dt/dark-mode-switch.svg)](https://www.npmjs.com/package/dark-mode-switch)
 7 | 
 8 | # 🌓 Dark Mode Switch
 9 | 
10 | Add a dark-mode theme toggle with a Bootstrap Custom Switch.
11 | 
12 | - Uses local storage to save preference
13 | - Only 383 Bytes minified and gzipped!
14 | 
15 | ## Quick start
16 | 
17 | Several quick start options are available:
18 | 
19 | - [Download the latest release](https://github.com/coliff/dark-mode-switch/archive/v1.0.0.zip)
20 | - Clone the repo `git clone https://github.com/coliff/dark-mode-switch.git`
21 | - Install with [npm](https://www.npmjs.com/package/dark-mode-switch) `npm install dark-mode-switch`
22 | - Install with [yarn](https://yarnpkg.com/en/package/dark-mode-switch) `yarn add dark-mode-switch`
23 | 
24 | ## Usage
25 | 
26 | 1. Add your custom switch for the Dark Mode toggle followed by the `dark-mode-switch.min.js` script:
27 | 
28 | Bootstrap 4.x
29 | 
30 | ```html
31 | <div class="custom-control custom-switch">
32 |   <input type="checkbox" class="custom-control-input" id="darkSwitch" />
33 |   <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
34 | </div>
35 | <script src="dark-mode-switch.min.js"></script>
36 | ```
37 | 
38 | Bootstrap 5.x
39 | 
40 | ```html
41 | <div class="form-check form-switch">
42 |   <input type="checkbox" class="form-check-input" id="darkSwitch" />
43 |   <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
44 | </div>
45 | <script src="dark-mode-switch.min.js"></script>
46 | ```
47 | 
48 | 2. Edit the `dark-mode.css` to suit your site - the one included here is a basic example.
49 | 
50 | ## How it works
51 | 
52 | 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:
53 | 
54 | ```css
55 | [data-theme="dark"] {
56 |   background-color: #111 !important;
57 |   color: #eee;
58 | }
59 | ```
60 | 
61 | ## Demo
62 | 
63 | [Bootstrap 5 Demo page](https://coliff.github.io/dark-mode-switch/)
64 | 
65 | ## Browser Support
66 | 
67 | 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)
68 | 
69 | ## To Enable DarkMode in Android Webview
70 | 
71 | - You need DOM Storage API in order to [make this work with WebView](https://github.com/mcnaveen/Android-Webview-Darkmode-with-JavaScript).
72 | - Inside OnCreate under WebView paste this line.
73 | 
74 | `WebSettings.setDomStorageEnabled(true)`
75 | 
76 | ## Credits
77 | 
78 | 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).
79 | 


--------------------------------------------------------------------------------