brightness filter does not apply to body background color

Question

So i made this brightness range input witch through inline styles ( JavaScript ) manipulates the brightness by adding a filter : brightness(x%) to the document.body

Here is the code

function ChangeBrightness() {
  let BrightnessValue = document.getElementById("brightness-bar").value;
  localStorage.setItem("Brightness", BrightnessValue.toString());
  document.body.style.filter = `brightness(${BrightnessValue}%)`;
}

And here is the css style of the body

body.Light {
  background: var(--white);
}

But when I use it , it looks like this : [1]: https://i.stack.imgur.com/JpDS2.png

As you can see the brightness filter does not have any effect on those little lines witch are actually the body background that are visible because of small margin I applies to other elements

Answer 1

I would add an overlay div, at the bottom of your page, and change the opacity of it, to control the brightness of the page. You'll run into less problems this way and it will act exactly like controlling your screen brightness. Example:

const range = document.querySelector('#brightness');
const overlay = document.querySelector('.overlay');
range.addEventListener('change', (e) => {
  overlay.style.opacity = `${100 - e.target.value}%`;
})

.overlay {
  pointer-events: none;
  background-color: black;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

<div>
  <input type="range" id="brightness" name="brightness" min="0" max="100" value="100" />
  <label for="brightness">Brightness</label>
</div>
<div class="overlay"></div>