主题数据选择器

开发
1

您好，

我想提议增加一个用于主题的数据选择器，以便从组件中更方便地编辑完整主题。

我不确定我的情况是否独特，但我目前有一个示例：我安装了两份 Graceful 实例，以便同时使用深色和浅色调色板。我使用主题组件对这些远程主题进行编辑，以实现全局更改，例如修改“点赞”按钮。对于通过样式进行的全局编辑，目前一切运行良好。但问题在于，当我想要对深色版本进行某些不应出现在浅色主题中的编辑时，情况就变得复杂了。我目前没有看到一种方法可以通过主题 ID 使用 CSS 来做出更改。为了实现我目前的需求，我不得不为每个主题单独创建主题组件，哪怕只是进行一些微小的调整。

或许可以类似 [data-theme-id] 这样的方式。

如果这已经可行，请忽略我的建议。我只是认为，这将对那些希望编辑多个主题而无需堆积大量组件的网站大有裨益。

2

我不太确定我是否理解，但你可以直接将一些 CSS 添加到这些浅色和深色主题中。

在我看来，组件非常适合进行全局更改，如边距、显示、内边距和宽度，但对于颜色，除非你使用 变量，否则直接编辑主题会更好。

这似乎是对一个已有解决方案的过度复杂化：thinking:

3

但编辑远程主题会导致其下次更新时你的修改丢失，不是吗？

这不仅仅是关于颜色的问题，而是关于如何从一个组件中对特定主题进行具体修改，而无需创建更多组件，并且仅将这些修改应用到部分主题上。

4

您说得对。对于远程主题，您可以使用三个组件：

通用主题修复用于共享的更改，
以及深色主题修复/浅色主题修复用于特定更改（如颜色）。您可以将组件仅链接到一个主题。

浅色优雅版将包含通用修复和浅色修复。
深色优雅版将包含通用修复和深色修复。

作为最后手段，如果更改不起作用，您可以向浅色/深色修复中的某行添加 !important。

1 个赞
5

我想你说得对。我之前想过用一个通用组件，然后每个主题一个组件，所以在这个例子中是三个，但觉得用三个仓库似乎有些大材小用，因为也许只需一个数据选择器就能轻松解决——毕竟 Discourse 中几乎其他所有地方都有数据选择器。

顺便提一下，主题 ID 作为内容 ID 出现在 meta 标签的 name 属性中，关键词是 discourse_themes_id；而在切换主题的链接中，至少在我检查这里 Meta 站点上安装的组件生成的汉堡菜单主题选择器链接，或在我的某个测试站点上生成的链接时，它是 [data-id=“#”] 的形式。所以，Discourse 并非无法呈现这些信息。

6

如果您将此代码添加到主题组件的“头部”选项卡中：

<script type="text/discourse-plugin" version="0.8">
  const themeSelector = require('discourse/lib/theme-selector');
  const currentThemeId = themeSelector.currentThemeId();
  document.body.dataset.themeId = currentThemeId;
</script>

它将在 <body> 标签上添加一个 data-theme-id 属性，您可以像这样使用它：

[data-theme-id="1"] {
  // 浅色主题 CSS
}

[data-theme-id="2"] {
  // 深色主题 CSS
}
3 个赞
7

在这个非常具体的情况下，您可能可以使用我们的 SCSS 辅助功能。以下是来自核心代码的一个示例，但同样的方法也适用于主题：

您也可以使用 @is-dark-color-scheme。

这样，您的组件就不依赖于主题 ID，即使您在其他站点上安装了该主题，也不会受到影响。

3 个赞
8

你们两个都太棒了，非常感谢 :slight_smile:

3 个赞