[CSS] 設定 dark mode 下的 CSS 樣式

標籤: CSS Dark Mode

Mac 在近年推出了 Dark Mode,讓一些喜歡暗色系的使用者可以享受深色底的視窗環境,而這個 Dark Mode 也可以直接在 CSS 的 media query 設定,就能讓你的網頁在 Dark Mode 之下能長得不一樣喔。

只要像這樣設定就好了:

@media (prefers-color-scheme: dark) {

}

 

這樣只要使用者的電腦設定為 Dark Mode,就可以吃到裡面的樣式了。

更進一步來看,我們可以善用 CSS 的變數,讓你的 Dark Mode 更好維護,像這樣:

:root {
  --primary: #aaa;
  --secondary: #ccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #333;
    --secondary: #666;
  }
}

 

目前看起來主流瀏覽器都支援了,有需要的就使用看看吧。