类别的独特配色方案

开发
1

您好。

我正在将一个旧论坛迁移到 Discourse，原始站点有一个独特的类别主题（包括独特的标题徽标）。

我目前的解决方案是一个主题组件，看起来像这样：

CSS：

body.category-target-category{
///将 #hexcodes 替换为您选择的颜色值
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
///继续为任何/所有必需的颜色值进行设置
}

HTML/JS：

<script type="text/discourse-plugin" version="0.2.0">
    api.onPageChange(() =>{
        var logo = document.getElementById("site-logo");
        var categories = document.getElementsByClassName("category-target-category");
        if(categories.length > 0)
        {
           logo.src = "category-specific-logo-url";
        }
        else
        {
            logo.src = "standard-logo-url";
        }
    });
</script>

目前，我必须遍历 color_definitions.scss 中提到的所有可能的颜色值才能覆盖它们。我相信该文件的值是从 foundation/colors.scss 中找到的值生成的，然后通过 foundation/color_transformations.scss 生成的。我知道可以通过管理员菜单或主题组件的 about.json 来覆盖根颜色主题值，但我认为这些更改是全局生效的。

除了列出 color_definitions.scss 中的所有 100 多个变量之外，是否有更有效的方法来自定义特定类别？例如，是否可以通过主题组件修改 foundation/colors.scss 文件？

感谢您的帮助！

2

你好 @Rhababo :wave: 欢迎来到 Meta :slight_smile:

如果你还没有接触过 Discourse 主题和开发，我建议从以下资源开始学习：

另外，例如，你可以使用 CSS 代码来更改特定分类的标志、标题颜色甚至图标颜色，代码如下：

.category-<category-slug> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}

.category-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<category-slug> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

如果你只是创建一个新主题，你可以添加代码并将标志作为资源上传。<category-slug> 是浏览器 URL 栏中显示的小写分类名称（父分类和子分类之间用 “-” 连接，例如 parentcategory-subcategory）。

此外，还有各种 Customization > Theme component 插件，例如这个，你可以搜索一下：

3

感谢 Lilly 提供的帮助和资源！

我非常欣赏您关于 Logo 的 CSS 说明。比我笨拙的脚本要优雅得多。

您的解决方案绝对能满足我的用例。尽管选择每个元素并直接为其编码颜色似乎很繁琐。我想知道是否有办法利用 Discourse 用来从 colors.scss 中仅有的 12 种左右的基础颜色生成其调色板的机制。我认为这样做可能需要一个插件而不是一个主题组件，而这是一个留待以后解决的挑战。

谢谢！