h5通过css进行深色模式切换

html-css019

h5通过css进行深色模式切换,第1张

prefers-color-scheme ( https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme ) 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。利用其设置不同主题模式下的 CSS 样式，浏览器会自动根据当前系统主题加载对应的 CSS 样式。light 适配浅色主题，dark 适配深色主题，no-preference 表示获取不到主题时的适配方案。

浅色模式效果如图：

深色模式效果如图：

window.matchMedia ( https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia ) 方法可以用来查询指定的媒体查询字符串解析后的结果。结合 CSS 变量和 matchMedia 的查询结果，设置对应的 CSS 主题颜色。该方法更灵活，可以单独抽离主题色进行适配，深色模式匹配 (prefers-color-scheme: dark) ，浅色模式匹配 (prefers-color-scheme: light) 。

监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。

浅色模式效果如图：

深色模式效果如图：

1.设定一个主题变量

2.在index.html中添加link标签，初始化一个主题文件

3.在Vue组件中进行动态切换

如果楼主说的是www.qq.com的话上点击搜搜旁边的按钮更换皮肤的话，肯定不是更换页面实现的，就是利用脚本，更换页面元素样式实现更换主题的。

————————

恩，看到了。

你查看它页面的源文件能看到它在前面写的脚本，比如下面几个。

function setSkin(n)

{var css = $("cssChange")var cssurl = "/cssn/"cssurl +=cssList[n]css.href=cssurlMiniSite.Cookie.set("TencentSkin",n)}

function formatSkin()

{var p = $("SkinList").getElementsByTagName("li")var s = $("sar")for(i=0i<p.lengthi++){p[i].num = ip[i].onclick = function(){setSkin(this.num)}}s.onclick = function() { openSkin("sar","SkinList",140,56,2,0)}}

function _openSkin(o1,o2,max,min,speed,n)

{ return openSkin(o1,o2,max,min,speed,n)}

function _closeSkin(o1,o2,max,min,speed,n)

{ return closeSkin(o1,o2,max,min,speed,n)}

就是通过你点击更换皮肤的按钮，触发脚本，它们动态的更换引用的CSS路径。