暗/光模式切换

您的问题是关于这个主题组件,它添加了一个切换按钮来切换到暗模式,还是关于检测暗色调的通用问题?

有一个 dark-light-choose

2 个赞

感谢您的帮助
我正在使用这个深色/浅色模式切换组件

我的问题是关于检测我处于哪种模式,并切换背景图片,这样我就可以为浅色模式和深色模式设置不同的图片。

我尝试按照您发布的链接以及这个链接进行操作

其中包含更详细的信息,但我没有成功。我尝试将图片文件(JPG)$bg-light 和 $bg-dark 添加到我的主题中


我还尝试在我的主题中添加一个 color_definitions.scss 样式表,其中包含该帖子中的代码

$bg: url(dark-light-choose($bg-light, $bg-dark));

:root {
  --custom-bg: #{$bg};
}

我还尝试在 GitHub 上创建一个主题

正如我所说,抱歉我有点迷茫
如果我应该开一个新话题,请告诉我,并说明应该放在哪个类别
感谢您的帮助

1 个赞

版主可以根据需要将帖子移至#dev中的新主题。我只是想确保您的问题不直接与主题组件有关,而是在通过浏览器或设备设置激活暗模式时也会发生。

我认为您已经很接近了。我注意到的一件事是您使用了两次 url()

1 个赞

我的问题绝对与主题组件无关
感谢您的帮助,抱歉打扰了 :blush:

哇……别告诉任何人,这是我混合两种背景的秘诀。第一个优先于第二个。所以,第一个是线性渐变,一半是透明的,另一半是静态图像 :wink: :sunglasses:

效果展示

我明白您使用了两个背景。

background-image: linear-gradient(to top, white, 15%, transparent), url(var(--custom-bg));

但是 url(var(--custom-bg))--custom-bg: #{$bg};$bg: url(dark-light-choose($bg-light, $bg-dark)); 结合起来,不就相当于 url(url(dark-light-choose($bg-light, $bg-dark))) 吗?

3 个赞

我们现在在核心功能中提供了深色/浅色模式切换,因此已弃用此主题组件。请参阅公告了解更多详情:

5 个赞