前言

一直想给网站增加一个夜间模式功能，但是又不喜欢纯黑色和白色搭配于是便用查css层叠样式降低一些亮度。

好处就是：简单方便，不用写样式，套就完事了。根据白天和晚上自动开启护眼，还可以通过按钮控制！！！

JS代码

const rootElement=document.documentElement;const darkModeClassName="dark";const darkModeStorageKey="user-color-scheme";const darkModeTimeKey="user-color-scheme-time";const validColorModeKeys={dark:true,light:true};const invertDarkModeObj={dark:"light",light:"dark"};const setLocalStorage=(key,value)=>{try{localStorage.setItem(key,value)}catch(e){}};const removeLocalStorage=(key)=>{try{localStorage.removeItem(key)}catch(e){}};const getLocalStorage=(key)=>{try{return localStorage.getItem(key)}catch(e){return null}};const getModeFromCSSMediaQuery=()=>{return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};const resetRootDarkModeClassAndLocalStorage=()=>{rootElement.classList.remove(darkModeClassName);rootElement.classList.remove(invertDarkModeObj[darkModeClassName]);removeLocalStorage(darkModeStorageKey)};const applyCustomDarkModeSettings=(mode)=>{const currentSetting=mode||getLocalStorage(darkModeStorageKey);if(validColorModeKeys[currentSetting]){rootElement.classList.add(currentSetting);rootElement.classList.remove(invertDarkModeObj[currentSetting])}else{resetRootDarkModeClassAndLocalStorage()}};const toggleCustomDarkMode=()=>{let currentSetting=getLocalStorage(darkModeStorageKey);if(validColorModeKeys[currentSetting]){currentSetting=invertDarkModeObj[currentSetting]}else if(currentSetting===null){currentSetting=invertDarkModeObj[getModeFromCSSMediaQuery()]}else{return}setLocalStorage(darkModeStorageKey,currentSetting);setLocalStorage(darkModeTimeKey,+new Date());return currentSetting};const initDarkMode=(nowTime)=>{const lastSunrise=(nowTime.getHours()<5?new Date(nowTime.getFullYear(),nowTime.getMonth(),nowTime.getDate()-1,5):new Date(nowTime.getFullYear(),nowTime.getMonth(),nowTime.getDate(),5)).getTime();const lastSunset=(nowTime.getHours()<23?new Date(nowTime.getFullYear(),nowTime.getMonth(),nowTime.getDate()-1,23):new Date(nowTime.getFullYear(),nowTime.getMonth(),nowTime.getDate(),23)).getTime();const darkModeTime=new Date(parseInt(getLocalStorage(darkModeTimeKey)||"0",10)).getTime();let mode=null;nowTime=nowTime.getTime();if(lastSunrise<lastSunset){if(lastSunset<darkModeTime){applyCustomDarkModeSettings()}else{applyCustomDarkModeSettings(darkModeClassName);mode=darkModeClassName}}else{if(lastSunrise<darkModeTime){applyCustomDarkModeSettings()}else{applyCustomDarkModeSettings(invertDarkModeObj[darkModeClassName]);mode=invertDarkModeObj[darkModeClassName]}}if(mode){setLocalStorage(darkModeStorageKey,mode);setLocalStorage(darkModeTimeKey,+new Date())}};initDarkMode(new Date());

css代码

.dark {filter: brightness(85%);}

html按钮

<a id="dark-mode-toggle-button" onclick="applyCustomDarkModeSettings(toggleCustomDarkMode());" href="javascript:void(0)" title="点击切换显示模式" rel="nofollow">
<div title="护眼模式" class="roll-dark">立即切换</div> </a>

头部meat

<meta name="color-scheme" content="light dark" />

<meta> 中 name 属性的值为 theme-color 时，用户的浏览器将根据所设定的建议颜色来改变用户界面。倘若设置了该值，则 content 属性必须包含有效的 CSS <color> 值。

下图展示了上方所示的 <meta> 元素对于 Android 端 Chrome 浏览器造成的影响。

最后声明

css样式请自行修改，filter: brightness(85%); 百分比越低屏幕越暗，所以我设置为85%！！！

最重要的就是本文章内容 90% 是来自威言威语因为我在网上看到的都是在 body 后面增加 class 元素，我又不想写暗黑色的样式。

就碰巧看了一下威言威语网站的代码，发现是在 html 的后面增加 class 这样，就顺便顺了一下代码！！！