1、css變量

可以使用css變量，然后使用var()方法使用變量

/* define the property */
:root {
  --main-color: balck;
}
/* use the property */
p {
  color: var(--main-color);
}

var方法支持第二個(gè)參數(shù)作為回調(diào)

p {
  color: var(--main-color, darkgray);
}

我們還可以嵌套使用var()：

p {
  color: var(--main-color, var(--second-color));
}

2、 Prefers-color-scheme

這是一個(gè)媒體查詢屬性，它會(huì)檢查用戶設(shè)備系統(tǒng)處于何種模式

@media (prefers-color-scheme: dark) { 
  ... 暗夜模式下的css樣式
}

@media (prefers-color-scheme: light) {
  ... 白天模式下css樣式
}

Example

/* 設(shè)置白天模式背景顏色默認(rèn)值*/
:root {
  --bg-color: #ffffff75;
  ...
}
/* 設(shè)置暗夜模式背景顏色默認(rèn)值 */
@media (prefers-color-scheme: dark) {
  --bg-color: #121212;
  ...
}
* {
  background: var(--bg-color);
  ...
}

原文地址：這里