wordpress美化教程——日主题实现跟随系统暗黑设置自动调整网页背景颜色-嗨皮网-Hpeak.net

日主题实现跟随系统暗黑设置自动调整网页背景颜色, 无需手动切换, 全自动调整!

日主题简介:

日主题v2是一款全新架构的Wordpress主题。兼容老款日主题。商城功能后台可以一键开启关闭，关闭后就是一个布局灵活，界面优美，速度超快的wordpress博客主题。商城主要以虚拟资源商城为主，支持包月。包年。终身VIP会员三个不同的用户组等级。

实现原理:

CSS 实现主题跟随系统自动切换

语法规则

利用媒体查询的

prefers-color-scheme

特性检测用户是否将系统的主题色设置为亮色或者暗色。

@media (prefers-color-scheme: {mode}) {  /* CSS Rules */ }

其中 mode 可选值为：dark、light、no-preference。

dark 匹配系统暗色主题
light 匹配系统亮色主题
no-preference 系统未得知用户在这方面的选项

例子

例如以下例子展示了当系统主题为暗色(dark) 时，覆盖 body 样式的字体色与背景色。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>WPON测试暗黑跟随系统风格调试</title>
  <style>
  body {
    color: #333;
    background-color: #eee;
  }
  @media (prefers-color-scheme: dark) {
// 注意这段 
    body {
      color: #ccc;
      background-color: #1f1f1f;
    }
  }
  </style>
</head>
<body>
  切换你系统暗黑风格吧!
</body>
</html>

文章版权声明 1、本网站名称：嗨皮网|Hpeak.net
2、本站永久网址：https://www.hpeak.net
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ735301834进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END