全彩定制参考

开发
1

我想创建两个自定义配色方案，其中所有颜色变量都由我选择（我不喜欢计算/转换后的值）。

有参考资料吗？此帖子中的示例 JSON 文件：

只列出了部分值（似乎是可以通过管理员面板默认自定义的值）。而我看到的一些配色方案，如 WCAG 配色方案，暴露了更多的变量。

这篇帖子讨论了创建一个用于高级颜色自定义的插件：Customizing colors - #10 by awesomerobot

但我不认为这是必要的，如果能有一个包含所有可覆盖的命名颜色变量的参考 JSON 文件，绕过计算值，那就足够了。

1 个赞
2

在浏览器中检查 discourse 实例时，您可以在 styles 选项卡中找到所有根变量名：

image
image394×1320 110 KB

然后，在您的 json 文件中声明其他变量。例如：

{
  "about_url": null,
  "license_url": null,
  "name": "Full Color Schemes",
  "color_schemes": {
    "Colors Light": {
      "primary": "222",
      "secondary": "fff",
      "tertiary": "08c",
      "quaternary": "e45735",
      "header_background": "fff",
      "header_primary": "333",
      "highlight": "ffff4d",
      "danger": "c80001",
      "success": "090",
      "love": "fa6c8d",
      "primary-very-low": "f8f8f8",
      "primary-low": "e9e9e9",
      "primary-low-mid": "bdbdbd",
      "primary-medium": "919191",
      "primary-high": "646464",
      "primary-very-high": "434343",
      "secondary-low": "4d4d4d",
      "secondary-medium": "gray",
      "secondary-high": "a6a6a6",
      "secondary-very-high": "ededed"
    },
    "Colors Dark": {
      "primary": "ddd",
      "secondary": "222",
      "tertiary": "0f82af",
      "quaternary": "c14924",
      "header_background": "111",
      "header_primary": "ddd",
      "highlight": "a87137",
      "danger": "e45735",
      "success": "1ca551",
      "love": "fa6c8d",
      "primary-very-low": "282828",
      "primary-low": "313131",
      "primary-low-mid": "7a7a7a",
      "primary-medium": "909090",
      "primary-high": "a6a6a6",
      "primary-very-high": "c7c7c7",
      "secondary-low": "bdbdbd",
      "secondary-medium": "919191",
      "secondary-high": "646464",
      "secondary-very-high": "313131"
    }
  }
}

好处是这些变量也会显示在后端：

image
image1632×1747 210 KB

6 个赞
3

谢谢——在我发布此帖后，我看到所有内容也列在了实例的 /styleguide > colors 页面上——我猜这就是完整列表……

我现在只是想知道描述性变量（例如 primary-high）和数字变量（例如 primary-800）之间的不同用法是什么，以及在创建自己的主题时如何考虑这一点。

4

据我所知，这只是一些额外的、更精细的计算，您可以在主题或主题组件中使用。但它们并未在 Discourse 核心中使用。

如果您想仅使用数字值来编写您的配色方案，您可以在您的主题中重新声明描述性的值，如下所示：

:root {
  --primary-high: var(--primary-800);
}

但那时，只有主色和三级色有数字值。

1 个赞
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.