如何使自动暗主题与所选暗主题相同?

我们有一个深色主题,看起来像这样:

当我们在用户配置文件中选择该主题时,它会按预期显示如上所示。

但是,当通过配置文件选项“启用自动深色模式配色方案”自动启用它时,它看起来像这样:

它使大部分 UI 变暗,但它会加载浅色主题的 CSS,这意味着标题最终会变成这样。

有什么方法可以让 Discourse 在自动选择时严格选择深色主题,包括 CSS 等?


供参考,这是我们的浅色主题选项:

以及深色主题选项:

3 个赞

您似乎在使用两种不同的调色板。Joplin Default 和 Simple Dark。它们有区别吗?

3 个赞

是的,Joplin 默认主题和 Joplin 默认颜色主题是浅色主题,另一个是深色主题。我想它们有两个不同的颜色主题是很正常的吧?

2 个赞

非常抱歉!这是我们管理界面中一个令人困惑的区域,我们目前正在努力改进它。我希望我能正确理解,但请允许我用我自己的方式解释当前的功能。

一个变化是,我们开始只谈论“调色板”(color palette),不再谈论“配色方案”(color scheme)。这很快就会在用户界面中改变。目前,调色板和配色方案是同一回事。

为了利用 Discourse 的暗模式支持,我通过以下方式获得了最佳效果:

  • 只启用一个主题
  • 在已启用主题的设置中指定浅色模式调色板
  • default dark mode color scheme id 站点设置中指定暗模式调色板。
  • 尊重您成员的暗模式操作系统设置
  • 暗模式切换主题组件可以切换浅色/暗色模式
  • 您的成员可以在用户偏好设置中看到浅色和暗色模式选项(并且看不到主题选择器,因为只有一个主题)

如果您对暗色主题进行了除调色板之外的自定义,并且不希望用户使用带有暗色的浅色模式主题,那么您不能使用暗模式选择器。您需要:

  • 启用两个主题
  • 浅色模式主题具有浅色
  • 暗色模式主题具有暗色
  • 不指定 default dark mode color scheme id 设置
  • 不尊重成员的暗模式操作系统设置
  • 暗模式切换主题组件不起作用
  • 在您的用户偏好设置中,您的成员可以选择他们喜欢的主题

最后,如果您只想有一个浅色或暗色主题,只需启用一个主题和一个调色板,并且不在 default dark mode color scheme id 站点设置中指定任何调色板。

4 个赞

感谢您的回答。我们实际上有三个不同的主题,其中两个是使用 CSS 自定义的(用于在万圣节、圣诞节更改标题)。所以,如果我理解正确的话,在这种设置下,无法正常使用自动暗黑模式,对吗?

虽然不理想,但我猜我可以接受。也许我们需要更改我们的标题,以便浅色模式的标题也能在暗黑模式下正常显示。

2 个赞

不,如果你不提供浅色和深色调色板。是的,如果你提供的话。

2 个赞

我有多套配色方案,“Joplin Default”(用于默认浅色主题)和“Simple Dark”(用于默认深色主题)是其中最主要的。

我需要在这里配置什么来解决我在顶部帖子中提到的问题吗?

在论坛设置中,请说明浅色和深色的默认调色板是什么。在主题设置中将默认设置为浅色。开始使用切换器。就是这样。

当用户更改个人设置中的调色板时,困难就开始了。也就是说……糟糕的系统太过了,但它是一个难以理解的系统。我的观点是,我们有太多的回退,颜色设置在这里、那里和任何地方。调色板应该只在主题中设置。当然,这限制了用户选择颜色的选项,但是……

2 个赞

您是如何自定义页眉的?问题在于您的页眉自定义取决于所选主题,但深色/浅色切换只会更改颜色方案。如果您在偏好设置中选择深色方案并结合浅色主题,结果是相同的。

Versatile Banner 会根据激活的浅色或深色方案显示不同的背景图像和颜色。您也可以为您的页眉做类似的事情。

是的,页眉确实是通过每个主题的自定义 CSS 设置的。有没有办法识别当前调色板是深色还是浅色?

我尝试了以下方法:

@media (prefers-color-scheme: dark) {
  .d-header {
    background-image: url(https://imgur.com/LdcvIcp.png); /* 深色背景图 */
  }
}

但这在深色调色板激活时不起作用,为了确保万无一失,我尝试了 @media (prefers-color-scheme: light),它起作用了。所以似乎深色调色板以某种方式将自己识别为浅色方案?还有其他方法可以知道当前调色板是深色的吗?

我查看了 HTML 并搜索了“dark”,但没有有用的结果。我希望有一个像 .is-dark-theme 这样的顶级选择器可以告诉我。

1 个赞

多功能横幅更改背景的方式是否有效?您可以安装该组件,为暗模式添加背景图片,然后通过使用预览来尝试。

然后您可以使用 dark-light-choose,例如在 Update themes and plugins to support automatic dark mode - #5 by pmusaraj 中解释过,它也用于横幅。

2 个赞