我正在实现暗模式,因为macOS,Windows已经实现了暗模式,并且iOS有望引入本机暗模式。
使用以下CSS媒体规则为Safari,Chrome和提供本机选项Firefox:
@media (prefers-color-scheme: dark) {
body {
color:#fff;
background:#333333
}
Run Code Online (Sandbox Code Playgroud)
这将自动识别设置为暗模式的系统,并应用随附的CSS规则。
然而; 即使用户可能将系统设置为暗模式,也可能是他们偏爱特定网站的浅色或默认主题。还有一些Microsoft Edge用户不支持的情况@media (prefers-color-scheme。为了获得最佳的用户体验,我想确保这些用户可以在这些情况下的黑暗模式和默认模式之间切换。
有没有可以使用HTML5或JavaScript执行的方法?我会包含尝试过的代码,但是无论如何我都找不到任何信息!