Darkmode.js

010101

I like this dark mode widget. I like how it handles certain colors better than the night mode extension available. For regular websites simply adding the following code is all you have to do. But, with Flarum, it's not quite going to be that simple. Anyone have any tips?

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

Project homepage: https://darkmodejs.learn.uno/

clarkwinkelmann

010101 when I add the script to the custom header/footer, it seems to work as expected.

I had to add the following to custom CSS to bring the button above Flarum's components:

.darkmode-toggle {
  z-index: 100;
}

Without that z-index rule, it was not possible for me to click the button. Were you experiencing this same issue ?

Not everything turns nicely into dark mode though, the header and banner stay in their original colors.

mrnemesys

hi, there's a night mode plugin in the extension list there https://discuss.flarum.org/d/11134-night-mode-by-reflar/74
Perhaps, it can help to make something similar.

010101

clarkwinkelmann Hmm. I can't even get it to work that well. Only my footer area goes into dark mode with it. Maybe it's a matter of adjusting other z-indexes too. Not just the toggle's z-index. Oh well, the existing night mode extension works fine. It's not worth the time to look into this further. I just found this script interesting because of the colors it chooses for certain things.