Custom CSS class for dark mode

[kmyn]

Hi,

I would like to create a custom CSS class -

  .svg-white {
    filter: invert(93%) sepia(100%) saturate(0%) hue-rotate(212deg) brightness(106%) contrast(106%);
  }

and apply it only when the theme is dark mode to an element. Something like -

        <svg
          id="Layer_1"
          data-name="Layer 1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 864 864"
          className="dark:svg-white"
        >
        ......
        </svg>

config has -

  darkMode: 'class',

I'm using this in Next.JS.

Any pointers how do I go about?

Thanks.

[simonswiss]

Hey!

Do you have a code example of this? Maybe I'm missing something, but what you are describing is how you could implement it.

dark:svg-white will only apply these styles if dark mode is on. For the dark mode to be considered "on" with the class strategy, simply apply a dark className somewhere on your document, higher up in the tree (most commonly on the body tag or a very high wrapping element in your _app component.