在网页中如果要实现 dark mode,简单来说,其实就是一个换肤的功能而已,所以只需要做判断系统是否使用了 dark mode 即可。能够实现的方式大概有这么一些吧: 通过CSS 混合模式“实现” 通过HTML 标签自定义属性实现 通过@media判断实现 通过CSS 混合模式“实现” light mode 和 dark mode 从表面上来看就是反色色差,...
我们可以定义一下 css 变量,就可以生效了,添加@media (prefers-color-scheme: dark)可以在系统模式变化的时候切换css 变量,就可以实现样式的切换。 :root{--bg-body:"#1f1f1f";--static-white:'#fff'}@media(prefers-color-scheme:dark){:root{--bg-body:"#2f2f2f";--static-white:'#fff'}} 上面一...
然后利用js,实时切换这三个变量即可 functioncheck_model(){var_items = [];varitems =document.getElementsByName("switch_default");for(vari=0;i<items.length;i++) {if(items[i].checked){_items.push(items[i].value);} }if(_items.length==0){document.documentElement.style.setProperty("--bg-co...
使用matchMedia 匹配主题媒体,深色模式匹配 (prefers-color-scheme: dark) ,浅色模式匹配 (prefers-color-scheme: light) 。 监听主题模式,深色模式时为 body 添加类名 dark,根据 CSS 变量的响应式布局特点,自动生效 dark 类名下的 CSS。 代码语言:javascript 复制 constdarkMode=window.matchMedia&&window.matchMedia...
functioncheck_model(){var_items=[];varitems=document.getElementsByName("switch_default");for(vari=0;i<items.length;i++){if(items[i].checked){_items.push(items[i].value);}}if(_items.length==0){document.documentElement.style.setProperty("--bg-color",'#fff');document.documentElement.style...
使用matchMedia 匹配主题媒体,深色模式匹配 (prefers-color-scheme: dark) ,浅色模式匹配 (prefers-color-scheme: light) 。 监听主题模式,深色模式时为 body 添加类名 dark,根据 CSS 变量的响应式布局特点,自动生效 dark 类名下的 CSS。 const darkMode = window.matchMedia && window.matchMedia('(prefers-color...
/* value */:root{--main-color:rgb(222,222,222);--main-deep-color:rgb(197,167,167);--main-pink-color:rgb(238,229,229);}/* Text and background color for dark mode */@media(prefers-color-scheme:dark){:root{--main-color:#000;--main-pink-color:rgb(34,32,32);--main-deep-col...
DarkMode(2):深色模式解决方案——css颜色变量实现Dark Mode,CSS的媒体查询+CSS变量二者配合就可以实现页面主题跟随系统自动切换深浅模式。使用matchMedia匹配主题媒体,监听主题模式,深色模式时为body添加类名dark,根据CSS变量的响应式布局特点,自动生效dark类名下的C
1.根元素会挂载一个 dark-mode 的样式。2.任何设置了 dark:{class} 的样式会生效。没错，这就是 tailwindcss 内置的 dark mode，根据模式切换，能自动往根元素插入一个class，并且让 我们一开始设置的生效 ，大概的原理我们懂了，就差实践了，那么在进入实践之前，先来聊聊，为什么会有暗黑模式？当前以下不仅会...
众所周知,网页的暗黑模式可以减少屏幕反射和蓝光辐射,减少眼睛的疲劳感,特别是在夜间使用时更为明显。其实暗黑模式也给霓虹灯效应(Neon Effect)提供了发挥的环境。 霓虹灯效应是一种视觉效果,其特点是在深色背景上使用鲜艳的颜色来产生强烈的视觉冲击。这种效应通常用于设计海报、广告、标志和网页等。霓虹灯效应的作用...