CSS3媒体查询-Dark模式

此网页增加了对暗黑模式的支持(虽然不够好),如果你使用了最新的Safari或者开发版本的Chrome,Firefox浏览器,且使用macOS系统打开了暗黑模式(系统设置->通用->外观->深色),那么你会发现这个页面背景是黑色的,这是纯CSS提供的一个媒体查询特性.

自从去年2018年macOS更新引入了一个暗黑模式系统主题后,Safari也在在Preiew 68版本中新增了一个媒体查询功能:prefers-color-scheme,而我们最爱的Chrome,Firefox却缺席了此次更新(虽然最新的开发版本开始支持),而后前几天又看到Chrome developers发了下面这条twitter又提到了此特性(毕竟要更新了推功能了)

使用

根据css草案介绍此属性有三个值:dark, light, no-preference

/* Light mode */
@media (prefers-color-scheme: light) {
  html {
    background: white;
    color: black;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  html {
    background: black;
    color: white;
  }
}

no-preference: 此用户系统并没有设置相关的值 dark: 暗黑模式(暗黑背景和浅色文字) light: 浅色模式(浅色背景暗黑文字)

我们还可以结合CSS变量来完成以上功能:

/* default for no-preference */
:root {
  --color: #333;
  --background: #d8d8d8;
}
/* Light mode */
@media (prefers-color-scheme: light) {
  :root {
    --color: black;
    --background: white;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color: white;
    --background: black;
  }
}

html {
  background: var(--background);
  color: var(--color);
}

甚至可以通过js获取当前系统颜色模式,

:root {
  --color-content: "";
}
/* Light mode */
@media (prefers-color-scheme: light) {
  :root {
    --color-content: light;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-content: dark;
  }
}
// 获取document元素上的css值
getComputedStyle(document.documentElement).getPropertyValue('--color-content').trim(); // "dark" or "light" or ""

// 设置值
document.documentElement.style.setProperty('--my-variable-name', 'pink');

其它

特别注意的是暗黑模式下需要开发者考虑用户在打印网站时候可能会出现的问题(背景黑色会想打出来黑乎乎的东西),因此最好提供打印样式,一般通过<link rel="stylesheet" media="print" href="my-print-style.css">提供给浏览器(相关的打印样式技巧可以右上角+按钮选择Google),或者使用现成的框架库Gutenberg

使用此属性还是要看系统是否支持暗黑和浅色主题模式,因此windows上并没有进行测试,macOS系统同学可以通过Safari测试.

另外推荐一个取色网站,如果你想适配自己网站的话…

引用

prefers-color-scheme css-print

个人随笔记录,内容不保证完全正确,若需要转载,请注明作者和出处.

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×