如何让整个网页在阅读模式下呈淡黄色？

我正在尝试向我的网站添加一项功能，其中用户可能有一个用于阅读模式的切换按钮。当该切换按钮被点击时，整个页面将变成淡黄色，从而减少从屏幕出来的紫外线，从而减少用户在阅读时对眼睛的压力。

为此，我正在使用这样的叠加层：

HTML：

<div id="overlay" class='visibility-hidden' style="position: fixed;width: 100%;height: 
100%;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(255, 210, 124, 0.21);z-index: 1;"></div>

<button class='read_mode'>Click here For Read mode</button>

CSS：

.visibility-hidden{
  display:none;
}

.visibility-true{
  display:block;
}

Javascript：

$('.read_mode').click(function(){
alert("Now you can NOT click the button");
$("#overlay").removeClass("visibility-hidden").addClass("visibility-true");

});

这种方法的问题是网页上的按钮和其他元素无法再点击，因为它<div>是不可点击的，因为<div>淡黄色高于网页上的所有其他元素。

链接到 JSFiddle：https ://jsfiddle.net/aeok8sbp/1/

谢谢