问题标签 [darkmode]

我正在尝试使用 的值localStorage来显示两个 Twitter 提要之一，一个用于浅色模式主题，另一个用于深色模式。它可以工作，但我必须刷新网页才能使用正确的 CSS -twitter-dark-display-none或者twitter-light-display-none- 才能工作。

使用jQuery(document).ready(function ()没有帮助。

小提琴：https : //jsfiddle.net/zpsf5q3x/2/ 但是由于 JSFiddle 对显示第三方框架的限制，示例推文不会显示。而且，本地存储也可能无法在那里工作。

Fiddle 调用两个外部库： https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css和https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js

HTML：

请注意data-theme="dark"第一个块中的 。

jQuery：

使用 localStorage 在暗模式和正常模式之间切换整个站点的整体功能。

我试图用来切换 CSS 的内容：

CSS：

2020 年 10 月 24 日编辑：

johannchopin's答案有效，并添加了$('body').toggleClass(localStorage.toggled); 我上面的原始代码。

但是。gitbrent与暗模式 JS 和 CSS库存在某种冲突，因此我切换到https://github.com/coliff/dark-mode-switch了一种更简单的方式来切换暗模式和使用 localstorage，此外还johannchopin提供了在 twitter 小部件 div 之间切换的功能：

然后在样式表中使用最基本的暗模式规则：

我试图在 javascript 的帮助下分配一个非常大的 html 和 css 代码块。该代码在白天模式下正常工作，但在夜间模式下我有一点问题。打开夜间模式时，给定container并且不改变颜色和其他值。img我做错了什么？

https://codepen.io/vkdatta27/pen/qBNZagr

我正在处理一个电子邮件项目，需要在暗模式下显示电子邮件正文。电子邮件正文是具有定义颜色样式的 HTML。我的目标是翻转文本和背景颜色以在暗模式下显示。像这样定义一个黑暗的方案风格

整体翻转颜色后，将图片和视频翻转回来看起来效果不错。唯一的缺陷是这也会翻转表情符号的颜色，这使它们看起来很可怕。

我也尝试混合颜色。

这也会使表情符号的颜色变亮。并且它不会使黑色文本显示为白色。

归结为一个问题：如何使以下文字显示为白色，并保持表情符号正常显示。

预期结果：

--- 已编辑 ---

一个很好的例子是 Apple 邮件应用程序：

使用 HTML 发送邮件：

由于 MIUI 11/12 使用其自己的暗模式自定义实现，使用以下代码会导致 ClassCastException 和 Activity 生命周期异常，因为 DefaultNightMode 和 LocalNightMode 始终未指定，即 -100 而不是 0 或 1。

如果有人专门为 MIUI 11/12 构建了小米设备的解决方法。请帮帮我。

使用的代码：

错误原因：

我想在主屏幕上为我的应用程序添加一个按钮，这样当您单击此按钮时，就会出现暗模式。暗模式已经设置好，一切都在运行。但是，仅当此应用程序的用户也使用他的手机处于黑暗模式时。但我希望每个人都有机会自己在应用程序中切换到暗模式。我希望你能理解我的问题我的意思，我的英语不是那么好所以抱歉

我正在使用带有 Chakra UI 的 Gatsby，并且在本地存储或如何访问 ColorMode 方面存在问题。

这是我的仓库：https ://github.com/RyanPinPB/pdm-gatsby

现场直播：https ://pearsondigitalmarketing.com

ColorMode 和组件在 localhost 上的样式正确，但在生产中，站点在本地存储保存 darkMode=true 后呈现标题时会出现问题。

您可以通过访问实时站点、切换暗模式和刷新来重现此问题。或者，如果您的浏览器具有主题设置或取决于您的操作系统（或一天中的时间），它将在晚上显示问题，或者您的浏览器/操作系统更喜欢暗模式。

奇怪的是，某些组件接收到正确的 darkMode 样式（颜色和背景），但我的徽标、菜单和标题背景不正确。即使所有这 3 个都使用 colorMode 样式条件，如下所示：

我在索引和头文件中添加了一个控制台日志，以查看其中一个是否在从本地存储触发/调用 colorMode 之前呈现，但两个控制台日志都打印正确的 colorMode 状态。我很难弄清楚为什么我在暗模式下的标题有错误的背景颜色和颜色样式。

单击标题中的“切换按钮”后，该问题是正确的。如果页面认为它需要处于 DarkMode，它只是在页面的初始呈现上。

任何帮助是极大的赞赏。

ThemeContext.js：

我正在尝试stop-color在暗模式下更改 svg 。这就是我所做的：

它在 Firefox 和 Safari 中按预期工作。但它不在基于 Chromium 的浏览器中。启用暗模式时颜色不会改变。

这是铬中的错误吗？有什么办法吗？

我正在使用反应导航的主题功能在暗模式和亮模式之间切换并获取模式的颜色const { colors } = useTheme();但是我正在尝试在样式表中设置颜色。我该怎么做。我一直在{[styles.subtitle, colors.text]}为组件设置样式。有没有更清洁的方法来做到这一点？比如在styles.subtitle对象里面设置颜色？

Im trying to implement dark mode to my app. How to do that in classes in React navigation V5

您好，当我切换页面或刷新时，我无法通过保持暗模式打开。我试图玩java代码没有运气有谁知道我应该在我的js上添加什么代码以便它保存我的主题？这是我的代码提前感谢 https://codepen.io/wissambattlaxe/pen/xxOvbmL

这是网站：http: //zabri.atwebpages.com/index