用color-scheme和light-dark()寫出更彈性的dark mode

dark mode 的CSS寫法一直以來都不是很方便，在偵測使用者作業系統是不是dark mode的時候，我們可以用prefers-color-scheme來另外寫一套CSS。現在多了另一種寫法light-dark()。

prefers-color-scheme

prefers-color-scheme寫法如下，當然還有很多東西要考慮，例如border、hightlight…等等，但為了方便說明，只用文字和背景顏色舉例。

:root {
  --text-color: #333;
  --background-color: #eee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #efefef;
    --background-color: #222;
  }
}

新的語法 light-dark()

light-dark()可以搭配color-scheme使用達到自動偵測使用者作業系統是不是dark mode：

:root {
  color-scheme: light dark;
  --text-color: light-dark(#333, #efefef);
  --background-color: light-dark(#eee, #222);
  }

除此之外，還可以用input讓使用者自己選擇要不要用dark mode：

:root {
  /* 偵測使用者作業系統 */
  &:has(input[name="scheme"][value="light dark"]:checked) {
    color-scheme: light dark;
  }
  /* 不用 dark mode */
  &:has(input[name="scheme"][value="light"]:checked) {
    color-scheme: light;
  }
  /* 使用 dark mode */
  &:has(input[name="scheme"][value="dark"]:checked) {
    color-scheme: dark;
  }
}

寫法比舊的prefers-color-scheme更方便和彈性許多。