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; } }
目前看起來主流瀏覽器都支援了,有需要的就使用看看吧。