3 tips for using Darkmode.js in your application

This post assumes you are using Darkmode.js as an npm package. It is also only a list of quick tips I wish I had when first getting started with the library and not a full tutorial.

1) How to override a default Darkmode style

I needed this specifically for elements that exist outside of the normal DOM because Darkmode.js does not apply styles to them. These are elements positioned absolute or fixed, which for my example was the footer. To apply styles to the footer for darkmode you have to specify the css within the `.darkmode--activated` class.

.darkmode--activated footer {
  div {
    color: white;
  }
}

2) How to ignore an element when Darkmode is activated

Add a class of `darkmode-ignore` to the element you'd like to avoid being affected by the package. For DevDecks that was the color palette on the settings page. I wanted those colors to be constant and not affected by the package. ```html

" id="020887" style="--color: #020887">

Blue

```

3) How to toggle between a light and dark image

If changing the color of your image is not feasible through CSS you might need to change the image entirely for a lighter one when darkmode is enabled. The CSS below assumes `#logo` is an image tag and it changes the url to point to the source of the white image when darkmode is enabled: ```css .darkmode--activated #logo { content: url("/images/logo_white.svg"); } ``` And then have another CSS declaration for when darkmode is not enabled which sets the image source back to the default value: ```css #logo { content: url("/images/logo.svg"); } ```