How can I invert Background Image color ?

[PranshuBasak]

Issue: On dark mode Background Image is turning Inverted , the main-container is in relative position but its background image is set using javascript , also used fallback image still its Dark mode implementation Inverts background Image Color .

Light Mode :

Dark Mode:

Live Link: https://weather.pranshubasak.co/
GitHub repo: https://github.com/PranshuBasak/weather-App-JS

Solution : Did not found solution yet but used it in my simple weather project , Hope some one can fix this issue , Or assign this to me so that I can give it a try.

[LucGzy]

Submitted a pull request to your project, fixing the issue, let me know if you're satisfied with it. For documentation purposes :

The project is using the CDN version of nightowl so I added css to the project reverting the effect of nightowl on the background image.

.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: clamp(200px, 70%, 800px);
  height: 80vh;
  background: url(https://picsum.photos/seed/mvdfsdm/319/436) no-repeat center;
  background-size: cover;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.main-container::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  z-index: 0;
}

.nightowl-dark .main-container {
  filter: invert(100%) hue-rotate(180deg);
}

.nightowl-dark .correct-invert > * {
  filter: invert(100%) hue-rotate(180deg);
}

.nightowl-dark .main-container {
  filter: invert(100%) hue-rotate(180deg);
}

This keeps the whole div (including the bg image) not inverted.

.nightowl-dark .correct-invert > * {
  filter: invert(100%) hue-rotate(180deg);
}

This invert everything back within main-container top level child therefore only removing the effect from the background image.

correct-inverted is a class I added on the top level child.

[smilepant]

add nightowl-daylight class in the div where you applied background-image

<div>
  <p>I'm inverted in Dark Mode</p>
  <p class="nightowl-daylight">I'm not inverted in Dark Mode</p>
</div>