问题标签 [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.
css - 有没有办法将 SASS 变量指向 CSS 变量?
我正在尝试实现暗模式并希望使用 CSS 变量,以便我可以根据是否启用亮/暗模式轻松更改颜色。我正在使用prefers-color-scheme
媒体查询来显示 css 变量颜色的变化。
我面临的问题是我正在处理的项目包含许多 sass 变量,这些变量出现在数千个属性和数十个文件中,在基本引导模板内。
我尝试更新 sass 变量以获取 CSS 变量值。例如$primary = var(--color-primary)
,但这不起作用。
有没有办法可以将这些 SASS 变量重定向到 CSS 变量以便它们被继承?
我真的不想开始弄乱基本引导模板,因为它非常混乱且难以维护。理想情况下,我只想编辑我的variables.scss
文件。
非常感谢!
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-mode
true
所有浏览器的相关CSS :
如何强制 Firefox 支持暗模式?
javascript - 除非我单击它,否则不会显示切换图标
我正在使用暗模式代码。使用此代码,我想使用相应的图标在暗模式和亮模式之间切换。这完美地工作,但唯一的问题是页面加载时默认情况下不显示深色/浅色图标。如果我单击该图标,则只有它显示。如何在页面加载时使其默认显示。
这是我正在使用的代码:
感谢您的帮助和时间!
darkmode - 如何识别用户处于夜间模式以及如何使网站即使在夜间模式下也保持标准颜色?
我想知道是否有任何代码可以识别用户在您的智能手机上处于夜间模式。即使在夜间模式下也不改变网站的默认颜色是可能的吗?
例如,用户访问网站www.teste.com.br,但正在使用夜间模式如何做到这一点,即使在夜间模式下,该网站也不会改变设计。
vue.js - Vue - 如何通过单击按钮将整个项目转换为暗模式?
我有一个 Vue 项目,现在有 50 多个组件,我想为整个项目准备一个暗模式,我想通过导航栏上的按钮控制模式类型。我制作了一个测试版本,所以我想出了如何激活和停用类,但我不知道如何通过单击单个按钮或选中复选框来为整个项目执行此操作。这是我的测试;
当开关被选中时,darkMode 变量变为 true 并且类被激活,所以我的背景颜色变为黑色。我的问题是,我将创建我现在使用的 CSS 文件的暗模式版本,并且我希望这个控件位于导航栏中,一个按钮或开关如何控制项目中整个组件的 css 类。如果我需要使用道具,我该怎么做?提前致谢。
angular - 离子如何以编程方式知道是否应用了深色主题?
我正在使用 Ionic angular 和 Mapbox。我也想知道应用哪个主题来加载 mapbox 主题...
像这样的东西:
有什么方法可以根据应用程序中的主题调用 /mapbox/light-v10 或 /mabox/dark-v10 吗?
objective-c - 如何在Objective C中将Mac应用程序用户界面亮/暗主题设置回默认值?
在我的 Qt 应用程序中,我想为用户提供将应用程序的明暗主题设置为:
- 与操作系统主题相同
- Light(忽略操作系统主题)
- 深色(忽略操作系统主题)
对于 1. 我可以使用这个 Objective C 来计算操作系统主题:
对于 2. 我可以称之为目标 C:
对于 3. 我可以称之为目标 C:
这一切都有效。如果用户想要从 2. 或 3. 回到 1,就会出现问题。如何将外观设置回从操作系统获取的默认值?我是一名 C++ 程序员,在 Objective C 方面并没有任何经验。
javascript - 有没有办法在不创建额外类的情况下使用 Javascript 在明暗模式之间切换?
CSS 提供媒体查询prefers-color-scheme
我想知道是否可以通过 JavaScript 设置值?我不想添加其他类或执行某种逻辑来切换样式表,例如在 Light & Dark Mode 之间切换或向元素添加其他类,例如如何为整个页面切换深色主题?
类似的东西
我的上下文是在 vue-styleguideist 中使用它,只是将它限制在组件上。现在我为每个组件添加一个“包装器”对象。