前言
一直想给网站增加一个夜间模式功能,但是又不喜欢纯黑色和白色搭配于是便用查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
这样,就顺便顺了一下代码!!!
哈哈 我最近也在做主题 来考古了 我最近也打算搞个黑夜模式出来 突然觉得 php处理也挺好的
<?php
这样 写两套css 按时间替换就好了 比较偷懒的方法 缺点就是 没有考虑用户切换和 只适用于色系单调的主题
也挺期待老哥的新主题呢
哈哈哈,可以的,先收藏一波,说不好啥时候会用到
感谢分享。
感谢分享,让我搞明白theme-color了
这个方法不错 相当于给博客加了个阴影遮罩
一种开灯关灯的感觉,把亮度降低一下,对夜间眼睛也挺友好的