网站建设 江苏网站建设> 建站学堂 江苏网站建设如何让页面支持暗黑模式

江苏网站建设如何让页面支持暗黑模式

来源:网站建设 | 时间:2020-11-05 | 浏览:

如何让页面支持暗黑模式

自19年刚开始,Android和IOS服务平台,都刚开始玩暗黑模式。自然这没有什么不太好,可是在我们的页面被客户在暗黑模式开启以后,会被那传统式大白色一瞬间闪瞎眼睛。

下边会简易的说一下怎么让页面适用暗黑模式。

提前准备

实际上,大家仅仅必须应用到css中的 prefers-color-scheme 媒体查询。

  1. no-preference 表明客户未制订电脑操作系统主题风格。做为布尔值时,为 false 輸出。
  2. light 表明客户的操作系统浅色系主题风格。
  3. dark 表明客户的操作系统深棕色主题风格。

表明
 

  1. 本文公布的情况下,手机微信还没法取得 prefers-color-scheme 主要参数,因此 在我们在微信中开启页面现阶段不兼容暗黑模式。
  2. 此方式 仅仅一个简易demo,能够 应用该方式 扩展出别的完成方法。
  3. prefers-color-scheme表明
  4. DEMO详细地址

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>页面融入黑暗模式</title>
</head>
<body class="back">
<div class="models"><h1>检测文本</h1></div>
</body>
</html>

CSS

.back {background: white; color:  #555;text-align: center}

@media (prefers-color-scheme: dark) {
  .back {background:  #333; color: white;}
  .models {border:solid 1px #00ff00}
}

@media (prefers-color-scheme: light) {
  .back {background: white; color:  #555;}
  .models {border:solid 1px #6b85e4}
}

之上便是文中的所有内容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用脚本之家。