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.sstatic.net/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
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>