- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们可以使用prefers-color-scheme: dark
检测是否激活了暗模式:
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
有没有办法检测浏览器是否完全支持暗模式? (“支持暗模式”是指浏览器自动更改网页的默认背景/文本颜色)。
color-scheme: dark;
但是,某些浏览器(Android 版 Firefox)会忽略它。因此,如果深色模式不可用,我想隐藏主题选择。
最佳答案
我目前的解决方案是在暗模式和亮模式之间切换,并检查模式之间的默认颜色是否发生了变化:
const hasDarkMode = function()
{
const el = document.createElement("div");
el.style.display = "none";
document.body.appendChild(el);
let color;
/*canvastext - doesn't work in Samsung Internet, initial/unset - doesn't work in Firefox*/
for(let i = 0, c = ["canvastext", "initial", "unset"]; i < c.length; i++ )
{
el.style.color = c[i];
el.style.colorScheme = "dark";
color = getComputedStyle(el).color;
el.style.colorScheme = "light";
color = color != getComputedStyle(el).color;
if (color)
break;
}
document.body.removeChild(el);
return color;
}();
console.log("Dark mode supported:", hasDarkMode);
const hasDarkMode = CSS.supports("color-scheme", "dark");
console.log("Dark mode supported:", hasDarkMode);
@supports (color-scheme: dark)
{
.no-dark-mode
{
display: none;
}
}
<div>Dark mode is <span class="no-dark-mode">not </span>available</div>
关于javascript - 如何检测浏览器是否支持暗模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69956563/
我想要一个深色的 Activity 对话框主题,所以我定义如下: @color/colorPrimary @color/colorPrimaryDark @color/col
是否可以改变 UIVisualEffectView 的颜色超出标准的额外亮、亮和暗? 我需要实现明暗预设之间的阴影。 最佳答案 如果您想要类似于 UIVisualEffectView 但控制更多的东西
在这个 fiddle 上,函数完美地完成了工作,但我需要稍微调整连接。 该点击甚至需要是父 div 的 addClass(深色/浅色)(true 或 false)。 如果是深色,则添加 Bright
以前拖动到 Xcode Assets 目录中的图像可以命名如下 ... Rabbit@2x.png Rabbit@3x.png 释放拖动后,这些图像会自动分配到目录中正确的 2x 和 3x 位置。 现
如何获得 Emacs 的背景类型?例如'light或 'dark 你可以像这样定义一张脸: (defface moedict-type '((((class color) (background
我们有几个使用 mongoose 的 nodejs 守护进程,同时共享相同的持久层(包含查询的共享模块)。 在其中一个守护进程(总是同一个)中,我们随机(每周几次)从 mongoose 得到以下错误:
我是一名优秀的程序员,十分优秀!