欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

网页中跟随系统,适配 macOS 的夜间模式,暗黑模式 dark-mode:prefers-color-scheme: dark

程序员文章站 2022-05-15 09:18:34
...

网页中跟随系统,适配 macOS 的夜间模式,暗黑模式 dark-mode

参阅: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

只需要添加 @media 标签即可,跟 @media (max-width: 768px) 这种宽度指定标签一样。
写的时候注意 css 优先级就可以了。一般把这种标签写在最末尾,要比之前普通模式的样式有更高的优先级,不再冗述。

@media (prefers-color-scheme: dark) {
  /* 里面写关于夜间模式的样式 */
}


@media (prefers-color-scheme: light) {
  /* 里面写关于非夜间模式的样式 */
}

像这样:
网页中跟随系统,适配 macOS 的夜间模式,暗黑模式 dark-mode:prefers-color-scheme: dark