Dark Mode

Framework Next.js 13 Styling Dark Mode
Categories:
Tags:

Invert the SVG image file while on the dark mode

CSS image filter invert

Create a CSS class that applies a filter to invert the colors of the SVG when the dark mode is enabled.

.dark-mode img.darkmode-img {
  /* invert image color */
  filter: invert(100%);
}
.dark-mode img.darkmode-white-img {
  /* White color */
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(22%) hue-rotate(44deg) brightness(106%) contrast(105%);
}

Add the dark-mode class to the parent element of the img tag when the dark mode is enabled.

const toggleDarkMode = () => {
  const body = document.body;
  body.classList.toggle('dark-mode');
}

Add the src attribute to the img tag and set the value to the URL of the SVG file.

<img class="darkmode-img" src="path/to/svg/file.svg">

SVG file inline-style for dark mode

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  <style>
    path {
      stroke: #000;
    }
    @media (prefers-color-scheme: dark) {
      path { stroke: #ffffff; }
    }
  </style>
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>

Reference

inline svg style

img css filter