如何仅针对一个主题覆盖颜色变量?

(很抱歉,我找不到最合适的分类,只好选在“开发”下)

我有三个主题。在其中一个主题中,$primary_low 的计算结果生成的颜色与背景色(bgcolor)的对比度太低。我尝试调整主色(背景色因品牌色原因无法更改),但均无济于事。调整后的结果要么几乎无对比度,要么产生一种非常“高亮”的效果,这恰恰与我想要的效果相反。

我原本以为的解决方案是:直接在该特定主题的 CSS 中为 $primary_low 指定一个颜色值。但这样做无法生效。即使添加 !important 也无济于事。请问有没有办法仅针对这一个主题进行更改?注:这些是本地主题。

查看 @awesomerobot 的指南:

啊,谢谢!遗憾的是,这是一个本地主题,无法远程使用。
请问还有其他方法可以实现吗?

这被视为一项高级功能,因此 UI 中不可用。您可以在“本地主题”上使用 主题命令行工具

很高兴能以某种方式实现 :slight_smile: 不过,整个 Ruby 相关的内容对我来说还是太 advanced 了,我真的很希望将来也能对本地主题提供覆盖(override)功能。

我得考虑一下以我的知识水平能做什么……我完全是个 GitHub 新手,所以制作远程主题听起来非常令人望而却步。(是的,我已经读过指南了。)

远程主题非常简单。我以前从未使用过 GitHub,也不明白 about.json 是什么,但我已经用它处理过几个主题,没有任何问题。你只需创建一个本地主题,然后将其上传到 GitHub,之后你可以在 GitHub 上的 about.json 文件中添加内容,这样当你从 GitHub 重新安装主题时,就会获得一堆酷炫的可自定义选项。

我稍晚些时候应该有时间写一篇教程,一步步带你操作,到时候你很快就会明白一切。

附:哈哈,我本来想说的是 settings.yml,这也是远程主题的另一个很棒的功能,但看了 David 上面的链接后,发现 about.json 甚至更简单。

以下是过于详细的操作说明。如果效果不符合预期,请告诉我。

  1. 如果您还没有 GitHub 账户,请先创建一个。

  2. 在 Discourse 中导出您的主题:
    管理后台 → 自定义 → 选择要导出的主题


    这会将主题保存为 .zip 文件到您的计算机上。

  3. 在您的计算机上解压这些文件。

  4. 前往 GitHub 并创建一个新仓库:


  5. 点击“上传现有文件”

  6. 将您导出的主题中解压后的文件夹和文件(类似如下内容):


    从您的计算机拖拽到您的仓库中,然后点击“提交更改”

  1. 现在您可以编辑 about.json 文件。点击文件名

该文件内容大致如下:


{
  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-light": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
  1. 点击编辑铅笔图标。

image 现在您可以对其进行编辑。我建议您更改配色方案的名称;否则,当您把主题重新导入到您的站点时,会出现两个名称相同的配色方案。因此,下面我将 "blue-light": { 改为了 "blue-lite": {

只需在 love 之后将您的颜色变量覆盖添加到配色方案的末尾,并确保在 love 值后面加上逗号

  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-lite": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100",
      "primary-high": "333333",
      "primary-medium": "666666",
      "primary-low-mid": "999999",
      "primary-low": "cccccc"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
  1. 点击“提交更改”

  2. 点击仓库名称返回主仓库页面

  3. 复制克隆或下载链接

  4. 在 Discourse 中导入您的主题:
    管理后台 → 自定义 → 安装 → 来自 Git 仓库:粘贴链接并安装

  5. 现在您可以像编辑任何本地主题一样编辑此主题,使用您自定义的 $primary-high、$primary-medium、$primary-low-mid 和 $primary-low 值。

非常感谢 @smrtey 创建这份分步指南!今天我终于有时间坐下来按照它操作了,效果非常好!
这也是我在 GitHub 上的首次尝试,我之前从未创建过账户或仓库。再次感谢!

或许可以将此内容纳入主题创建指南中,或者添加一个链接?

自定义设置也是我发现的另一个很棒的功能。你需要在主题或组件的 GitHub 仓库中添加一个 settings.yml 文件。这是一个包含可自定义设置的示例组件:
https://github.com/oerog/CustomSettings.git

以下是 settings.yml 文件,用于设置变量 $header_text$header_text_color$header_bg

header_text: 
  type: bool
  default: false
  description:
    en: '选择是否在标题栏徽标旁添加文本。'
header_text_color: 
  type: string
  default: "$header_primary"
  description:
    en: '文本颜色(默认为 "header primary")'
header_bg: 
  type: string
  default: "$header_background"
  description:
    en: '文本颜色(默认为 "header background")'

安装该组件后,你将看到如下设置选项:

这将生成以下 CSS:

@if $header_text == "true" {
    .d-header .title::after {
        padding: 0 20px;
        font-size: 1.3em;
        color: $header_text_color;
        background-color:$header_bg;
        content: "Here is some text";
    }
    .archetype-regular #main.no-text .d-header .title::after {
        display:none;
    }
}

你可以多次安装同一组件(安装后只需重命名以便区分),这样你就可以将组件添加到不同的主题中,并为每个主题设置不同的配置。

以下是创建 settings.yml 文件的方法:新建一个文件:

输入代码(我通常先在文本文件中编写,然后复制粘贴):

通过“提交新文件”保存:

然后在你的网站上安装该组件并编辑设置。