Following a request, DarkReader is a Javascript library that aims to reduce eyestrain while browsing by inverting brightness. It is available as an extension for most common browsers. Its feature can also be directly integrated on your web site.
This is an example on how to add a button that turns light on/off.
<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.2/darkreader.js" integrity="sha256-ESc/02WWPMS6nHR51aorY6avazveX90YL/h6tca4GQo=" crossorigin="anonymous"></script>
<script>
var light = false;
function toggleLight() {
if(!light){
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
light = true;
}else{ //this will only be executed once
DarkReader.disable();
light = false;
}
}
</script>
Here comes the button:
<button type="button" onclick="toggleLight()">Light</button>
You can, then, imagine different ways to use your mode night as by adjusting it with sunset/sunrise or linking it to a session/cookie variable in order to save the users preferences.
Comments