css - 无论是否激活暗模式,都已激活偏好颜色方案
问题描述
我在我的网站上使用以下 CSS 在暗模式下反转图像:
@media (prefers-color-scheme: dark) {
#main-logo img {filter: invert(1);}
}
它适用于暗模式,但也适用于亮模式。我不确定如何修改它以使其工作 - 看起来很简单。
解决方案
你需要这个的javascripttoggle
方法
function darkMode() {
const element = document.getElementById("main-logo");
element.classList.toggle("darkmode");
}
当您运行此功能时,它将更改为暗模式,当您再次运行时,它将更改为默认值
.darkmode{
//your css dark mode code
}
推荐阅读
- docker - 尝试与外部主机通信时,由于 unknownhost 异常,docker 映像无法启动
- c# - 如何获取每个 DbContext 下的所有 DbContext 类和所有 DbSet
- r - 在 R 中使用附加列标记数据集中的异常值
- jquery - 如何获得绝对位置的孩子身高?
- typescript - 根据先前类型的输入(TypeScript)将输入的可能值限制为派生类型
- sql-server - 按月/年计算平均值
- bash - 将相邻数字相加
- angular - 如何在不提供 Angular CLI 的情况下生成服务?
- javascript - 地图功能值不显示
- angular - 将第三方 scss 文件捆绑到使用 angular-cli 创建的 angular 库中