问题标签 [darkmode]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
50 浏览

css - 有没有办法将 SASS 变量指向 CSS 变量?

我正在尝试实现暗模式并希望使用 CSS 变量,以便我可以根据是否启用亮/暗模式轻松更改颜色。我正在使用prefers-color-scheme媒体查询来显示 css 变量颜色的变化。

我面临的问题是我正在处理的项目包含许多 sass 变量,这些变量出现在数千个属性和数十个文件中,在基本引导模板内。

我尝试更新 sass 变量以获取 CSS 变量值。例如$primary = var(--color-primary),但这不起作用。

有没有办法可以将这些 SASS 变量重定向到 CSS 变量以便它们被继承?

我真的不想开始弄乱基本引导模板,因为它非常混乱且难以维护。理想情况下,我只想编辑我的variables.scss文件。

非常感谢!

0 投票
1 回答
639 浏览

css - Firefox 拒绝支持暗模式

我已经测试过 Firefox 67-83 并且绝对没有版本真正支持暗模式!

  • 不,我在问开发人员问题
  • 不,我明确不是在谈论扩展。
  • 不,我安装了零扩展。
  • 是的,深色模式在 Chrome 和 Safari 中运行良好,仅更改操作系统首选项
  • 是的,我已将 Windows 10 和 Firefox设置为暗模式。
  • window.matchMedia('(prefers-color-scheme: dark)').matches返回false
  • window.matchMedia('(prefers-color-scheme: dark)')显示media: "(prefers-color-scheme: dark)"
  • 是的,我创建了一个干净的配置文件。
  • 是的,我已经尝试在67 和 83 中about:config创建和设置。browser.in-content.dark-modetrue

所有浏览器的相关CSS :

如何强制 Firefox 支持暗模式?

0 投票
1 回答
47 浏览

javascript - React:我怎样才能为明暗模式动态更改整个背景?Redux 持有我的 darkMode 状态

如何动态地为lightdark模式动态更改整个背景?Redux 持有我的darkMode状态。

例如,我希望背景在开启时为黑色,darkMode而当我不在黑暗模式时为白色。如何动态调整?使用 HOC?

Redux(使用选择器):

这是我一直向下滚动时遇到的问题(白色背景):

在此处输入图像描述

0 投票
1 回答
108 浏览

javascript - 除非我单击它,否则不会显示切换图标

我正在使用暗模式代码。使用此代码,我想使用相应的图标在暗模式和亮模式之间切换。这完美地工作,但唯一的问题是页面加载时默认情况下不显示深色/浅色图标。如果我单击该图标,则只有它显示。如何在页面加载时使其默认显示。

这是我正在使用的代码:

感谢您的帮助和时间!

0 投票
0 回答
6 浏览

darkmode - 如何识别用户处于夜间模式以及如何使网站即使在夜间模式下也保持标准颜色?

我想知道是否有任何代码可以识别用户在您的智能手机上处于夜间模式。即使在夜间模式下也不改变网站的默认颜色是可能的吗?

例如,用户访问网站www.teste.com.br,但正在使用夜间模式如何做到这一点,即使在夜间模式下,该网站也不会改变设计。

0 投票
0 回答
62 浏览

vue.js - Vue - 如何通过单击按钮将整个项目转换为暗模式?

我有一个 Vue 项目,现在有 50 多个组件,我想为整个项目准备一个暗模式,我想通过导航栏上的按钮控制模式类型。我制作了一个测试版本,所以我想出了如何激活和停用类,但我不知道如何通过单击单个按钮或选中复选框来为整个项目执行此操作。这是我的测试;

当开关被选中时,darkMode 变量变为 true 并且类被激活,所以我的背景颜色变为黑色。我的问题是,我将创建我现在使用的 CSS 文件的暗模式版本,并且我希望这个控件位于导航栏中,一个按钮或开关如何控制项目中整个组件的 css 类。如果我需要使用道具,我该怎么做?提前致谢。

0 投票
1 回答
323 浏览

angular - 离子如何以编程方式知道是否应用了深色主题?

我正在使用 Ionic angular 和 Mapbox。我也想知道应用哪个主题来加载 mapbox 主题...

像这样的东西:

有什么方法可以根据应用程序中的主题调用 /mapbox/light-v10 或 /mabox/dark-v10 吗?

0 投票
1 回答
119 浏览

objective-c - 如何在Objective C中将Mac应用程序用户界面亮/暗主题设置回默认值?

在我的 Qt 应用程序中,我想为用户提供将应用程序的明暗主题设置为:

  1. 与操作系统主题相同
  2. Light(忽略操作系统主题)
  3. 深色(忽略操作系统主题)

对于 1. 我可以使用这个 Objective C 来计算操作系统主题:

对于 2. 我可以称之为目标 C:

对于 3. 我可以称之为目标 C:

这一切都有效。如果用户想要从 2. 或 3. 回到 1,就会出现问题。如何将外观设置回从操作系统获取的默认值?我是一名 C++ 程序员,在 Objective C 方面并没有任何经验。

0 投票
0 回答
115 浏览

javascript - 有没有办法在不创建额外类的情况下使用 Javascript 在明暗模式之间切换?

CSS 提供媒体查询prefers-color-scheme

我想知道是否可以通过 JavaScript 设置值?我不想添加其他类或执行某种逻辑来切换样式表,例如在 Light & Dark Mode 之间切换或向元素添加其他类,例如如何为整个页面切换深色主题?

类似的东西

我的上下文是在 vue-styleguideist 中使用它,只是将它限制在组件上。现在我为每个组件添加一个“包装器”对象。

0 投票
0 回答
26 浏览

eclipse - 如何将eclipse切换到深色主题

我浏览了几个网站和堆栈溢出问题,但没有一个能解决我的问题。我在 Windows 10 上运行 Eclipse,当我切换到深色主题时,控制台和编辑器发生了变化,但所有标签仍然相同。我该如何解决?

这就是它的样子