2.7.0.beta5 颜色面板加载不正确

贡献 错误
1

今早更新到 2.7.0.beta5 后，许多颜色发生了变化。看起来颜色调色板未被正确读取，而是使用了点击“新建调色板”时出现的默认颜色调色板。以下两个主题使用了不同的颜色调色板，但最终都应用了 Discourse 的“新建颜色调色板” → 第一行 CSS 中定义的“基础调色板：浅色”。

示例 1：
这是该主题的颜色调色板：

image
image688×649 24.9 KB

这是 CSS 的第一行：

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

示例 2：
这是该主题的颜色调色板：

image
image384×512 85.6 KB

这是 CSS 的第一行：

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

如果我从一个全新的空白主题开始并添加调色板，它能按预期工作；但对于我现有的主题，加载的是默认浅色调色板，而不是已分配的调色板。

1 个赞
2

目前我找到的唯一解决办法是手动将所需的 Sass 颜色变量添加到每个主题和组件中。

1 个赞
4

我无法复现此问题……如果您更改现有主题的颜色方案，问题是否依然存在？

3 个赞
5

看起来我们遇到了相同的问题。更新到 2.7.0.beta5 (6c57f6f49d) 后，我们的主题组件中颜色方案不再生效。

我们使用了以下代码：

#meta-links {
    background-color: $header_background;
}

但背景色显示为 #fff，而不是颜色方案中定义的颜色。

我尝试了以下方法：

  • 将颜色方案重新分配给主题
  • 复制颜色方案并将副本分配给主题
  • 将主题组件重新分配给主题

但这些方法似乎都无效。目前的解决方法是在 CSS 中手动设置颜色。

2 个赞
6

看起来问题在于：基础主题加载了正确的调色板，但所有组件都没有加载。因此，页面中不使用组件的部分颜色正确，而依赖组件的部分则加载了 Discourse 默认的“Light”调色板，而非分配给该主题的调色板。

来自开发者工具：
color_definitions.scss 中包含了正确的调色板

image
image973×118 12.9 KB

desktop.scss 中包含了正确的调色板
image

theme_174.scss 是一个组件，它使用了默认的 Light 调色板
image

theme_171 是一个组件，它在 common.css 中仅包含以下这几行 CSS，没有其他内容：

#banner {
    margin: auto 20px;
    background-color: $primary-low;
    max-width: 880px;
    border: 1px solid #999 ;
}
2 个赞
7

感谢 @gkln 和 @smrtey 提供的补充详情……可以尝试逐一禁用组件，看看是否会有变化……可能存在某个未被提示的静默错误，这可能导致组件的 CSS 出现问题。

8

这似乎与任何使用 SCSS 颜色变量的组件有关。如果手动为每个组件添加颜色，一切都能正常运行：

$primary: #22262a !important; $secondary: #fefefe !important; $tertiary: #2572e4 !important; $quaternary: #518ee9 !important; $header_background: #1550a7 !important; $header_primary: #fcfcfc !important; $highlight: #9edaf5 !important; $danger: #ff7114 !important; $success: #85cc54 !important; $love: #de0100 !important;

但这绝非理想的解决方案。我不知道该如何排查此问题。我实在无法理解 Discourse 为何会加载一套不同的配色方案。

1 个赞
12

好的，@pmusaraj 仔细检查后发现了这个 bug……它已在此处修复：

因此，再次更新您的站点应该可以解决问题。

如果这些是您构建的主题组件，我们建议更新它们以使用 CSS 自定义属性，而不是我们的 SCSS 变量。这一转变意味着您可以使用自动深色模式，并且使颜色覆盖更加容易。更多详情请点击：

6 个赞