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

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

1. 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 😊

[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.

[sandoche]

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