How to fix an element not going dark in dark mode

010101

I have a custom element that I added to my Flarum. I also use the night mode extension (which is just giving users the ability to flip the forum to dark mode like the admin can from the appearance section of the admin dashboard). When you go into night mode (aka dark mode) the class dark is added to the body tag.

Although this is fairly elementary, it wasn't clicking in my head how I could make this one element go from bright aqua (it's standard color in light mode) to the dark grey color that many elements switch to in dark mode. It wasn't automatically happening. But, eventually it clicked.💡

Since the dark class is added to the site's body tag, if you have an element not going dark that you want to go dark, simply add a rule to your custom css which targets the element's class or id name, with .dark listed first. In other words, if your element has the class name custom-menu then your new css rule would be:

.dark .custom-menu { background-color: #131f1e; }

Which basically says, if dark is added to the body tag, change the background color of my custom menu element that I added to the super dark grey color.

clarkwinkelmann

010101 there are two other less tricks you can use.

First if you use any of Flarum's color variables, their value will change depending on light or dark mode. You can see the values defined here https://github.com/flarum/core/blob/master/less/common/variables.less#L22 For example @text-color is a very dark grey in light mode, but a very light grey when in dark mode.

Then there's a @config-dark-mode variable, that's also the one used to change the other color variables. I have never used it myself but it seems you can do something like this:

.mixin(@config-dark-mode);
.mixin(false) {
  .custom-menu {
    // Rules when light mode
  }
}
.mixin(true) {
  .custom-menu {
    // Rules when dark mode
  }
}

.mixin could be any name starting with ., and I think it must be unique across all less files, so it will be best to prefix with the extension namespace.

These tricks can also be used in the custom Less of the admin panel.