coliff/dark-mode-switch

Add a dark-mode theme toggle with a Bootstrap Custom 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
• Clone the repo git clone https://github.com/coliff/dark-mode-switch.git
• Install with npm npm install dark-mode-switch
• Install with yarn 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

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="dark-mode-switch.min.js"></script>

Bootstrap 5.x

<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="dark-mode-switch.min.js"></script>

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:

[data-theme="dark"] {
  background-color: #111 !important;
  color: #eee;
}

Demo

Bootstrap 5 Demo page

Browser Support

Works well with all the browsers supported by Bootstrap 4 and Bootstrap 5

To Enable DarkMode in Android Webview

• You need DOM Storage API in order to make this work with WebView.
• Inside OnCreate under WebView paste this line.

WebSettings.setDomStorageEnabled(true)

Credits

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

dark-mode-switch's Issues

Background color of menu dropdown not changing

Hi, I just want to say thanks for writing this code, I just love it!

It seems as there is a tiny problem as the background color of a bootstrap dropdown menu doesn't change its color.

I tried to fix it myself but without any success as I'm still an absolute beginner :-)

Many thanks in advance for any help.

Delay in dark mode detection

It is more a suggestion than a real issue : when my website theme has just loaded, and dark theme was already activated, I can quickly see white theme before dark theme is activated.
I understand why I can see it considering that main theme is loaded before dark theme tag is added to body.
Do you have an idea how to not see this quick blinking on page load ?

Detect if user has prefers-dark-mode setting on

Requirements:

• dark-mode-switch should detect the users system preference and use that unless they have already made a change to the switch (which is saved in local storage). So if someone has already set the dark mode switch on, but they have a light-mode set on their OS or browser preference it would prioritise the dark-mode-switch setting
• I think this 'Detect if user has prefers-dark-mode setting on' feature should be enabled as standard in a v2 of this script, but open to suggestions if it should be an option.

Dark mode default?

How can i set the darkmode default?
From js.

dark mode

Compatibility with cache

Hi there, I just wanna say I love this plugin, and it’s really easy to customize it with CSS!

One problem I’ve been facing though is it doesn’t work with cache plugins.
If the page is cached the page will always flash the previous colors every time I load a new page.

I’ve tried everything out there, searched the web for anything I find.

Any help would be appreciated,

Thanks!

Does this package registered in cdnjs.com ?

Not Working (node.js and ejs)

Hello!

I installed the package using npm and followed the documentation (readme.md) and it doesn't work, I don't see it adding the class to the body or any other tag.

Did I did something wrong?

Apply to modals

What's the easiest way to apply this to modals also?

Using html element with dark mode

I tried to use the script and it worked with me on all class but Bootstrap is known to be having effect like :focus and :hover
so if you use

[data-theme="dark"] a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover {
    background-color: #6c757d!important;
}

And you switched between the dark mode and the normal mode, you will find that the dark mode applies these changes and cannot be changed completely until you remove !important from background-color as example and when you do, you are not able to implement these changes at all

My question is, Is there a solution to this problem?

And I thank you with all my heart for your wonderful effort

not working on phone

trying with different browser still not working

Not working on latest Firefox

Throws this error on console and not doing anything:
SecurityError: The operation is insecure.

Laravell Support

Hello,
For some reason when imported to laravell with use of NPM it is not working can anybody help me ?

Bootstrap Nav Link colors not changing in Dark Mode

Not working :'(

Hi,
Im using dark-mode-switch for a meteor project.
I downloaded with npm.
But when i switch the switch, nothing appened, i have this error :
Uncaught SyntaxError: Unexpected token dark-mode-switch.min.js:1 '<' (when i load te page, not when i switch)
Maybe i forgot something ?

How to set dark mode as default

As the title says.

how to use this project in react ?

thank you very much

How to use it with sass?

This is a very good library. We have one question, how we use it with scss? Please, give me a full example. Thank you a lot.

td elements keep data-theme=dark style, even when not active.

Me again :) Have a look at this codpen, the td elements take on the data-theme=dark style despite the attribute being removed from the body.

Update To Bootstrap 5

In alpha mode currently but would be nice to get a head start. Maybe make a separate package for it.

https://v5.getbootstrap.com/

Please make the dark mode as default and we can toggle to make it light

Please make the dark mode as default and we can toggle to make it light

Changes not taking effect on body element

Hello, firstly, thanks for sharing the project, it is nice, lightweight, and works well. I do have one issue however. I am trying to apply dark-mode styles directly to the body tag and this doesn't seem to work. You can see from my screenshots, that I am able to make the text inside .content red, but when trying to change the gradient to white on the body, I see no changes. I could imagine that this has something to do with the fact that the data-theme attribute is set on the body and then it maybe isn't possible to use in this way. If this is the case, do you know of a workaround? Any help is greatly appreciated.

How to use it for nested CSS

How to use it for nested CSS elements like:

        .nav-tabs .nav-link {             
            border: 1px solid #fff;
            background-color: #f1f6fb;
        }

        .nav-tabs .nav-link.active{
            border: 1px solid #fff;
            background-color: #fff;
        }

Thanks. Awesome job.