Background turned dark, but it didn't work for the texts

[TomBener]

Hi, thanks for your work!

I used Darkmode.js to add dark mode for my blog powered by VuePress. But in the dark mode, only the background turned black, while the text didn't change at all, like the screenshot below, which looked very weird. In the meanwhile, the button didn't appear the emoji 🌓 I added.

And I used the script as your instruction shows:

1. Using NPM

   npm install darkmode-js

2. Add the javascript code and options:

   
   // Dark Mode
   import Darkmode from 'darkmode-js';

new Darkmode().showWidget();

var options = { label: '🌓' }

const darkmode = new Darkmode(options); darkmode.showWidget();

It would be great if you can help me about the problem. Thanks in advance 😊 

[robertnicjoo]

same issue here, bootstrap card backgrounds won't change

[robertnicjoo]

@TomBener I managed to fix my issue with css here is my code you may need to edit as your need

.darkmode--activated p, .darkmode--activated h1, .darkmode--activated h2, .darkmode--activated h3, .darkmode--activated h4, .darkmode--activated h5, .darkmode--activated h6, .darkmode--activated span, .darkmode--activated ul, .darkmode--activated li, .darkmode--activated i, .darkmode--activated label, .darkmode--activated span{
        color: #fff;
    }
    .darkmode--activated .card{
        background: #000000;
    }

[sandoche]

I will look into it to put it also in the library if it fits (and with the dynamic variables)

[LordShenron]

@TomBener I managed to fix my issue with css here is my code you may need to edit as your need

.darkmode--activated p, .darkmode--activated h1, .darkmode--activated h2, .darkmode--activated h3, .darkmode--activated h4, .darkmode--activated h5, .darkmode--activated h6, .darkmode--activated span, .darkmode--activated ul, .darkmode--activated li, .darkmode--activated i, .darkmode--activated label, .darkmode--activated span{
        color: #fff;
    }
    .darkmode--activated .card{
        background: #000000;
    }

Thanks a bunch, it works fine but the widget is still broken. I added using the jscdn method.

[robertnicjoo]

your welcome, widget isn't broken all you need is to provide icon for it from your main js file, currently I'm with phone to share you the code but if I'm not mistaking it's already in documents.

here in options part

https://github.com/sandoche/Darkmode.js/blob/master/README.md#%EF%B8%8F-options

see the label part

ps: why do you hve two of this? new Darkmode().showWidget();

[LordShenron]

well i added a js button instead of using the widget.. work so far.

[madhavarshney]

@TomBener @sandoche - It seems like the OP's issue happens because the button and mix-blend-mode layer gets covered by subsequent elements. The following code snippet works (not sure if it is the best way though):

.darkmode-toggle, .darkmode-layer {
    z-index: 1;
}

@TomBener Try pasting the following snippet in devtools for https://tomben.me/:

let script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js';
script.onload = () => new Darkmode({ label: '🌓', backgroundColor: '#f6f6f6' }).showWidget();
document.head.appendChild(script);

let style = document.createElement('style');
style.innerText = `
.darkmode-toggle, .darkmode-layer {
    z-index: 1;
}
`;
document.head.appendChild(style);

[Nimita311]

@madhavarshney Thank you for the fix. It is elegant. Within the same stacking context, any subsequent positioned element with a positive or an unspecified z-index will be inevitably stacked over the dark mode layer and cause problems. The dark mode layer really should have been given a positive z-index so that it is always at the top.