# 创建并分享配色方案
**URL:** https://meta.discourse.org/t/create-and-share-a-color-scheme/61196
**Category:** Developer Guides
**Tags:** how-to
**Created:** [2017年四月18日 14:44 UTC](https://meta.discourse.org/t/create-and-share-a-color-scheme/61196 "2017-04-18T14:44:23Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [2017年四月18日 14:44 UTC](https://meta.discourse.org/t/create-and-share-a-color-scheme/61196/1 "2017-04-18T14:44:23Z")
Discourse 现在支持从远程仓库导入配色方案。下面我将演示如何进行此操作。
### 导航至配色并添加配色方案
前往您站点的 `/admin/customize/colors` 页面并创建配色方案。
提示：
- 我使用了一个 Chrome 插件（[取色器](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en)）从网络上现有的调色板图片中选择颜色。
- 如果您创建了一个主题，将配色方案分配给该主题并预览，更改将会实时反映。
### 使用配色方案创建新的 Git 仓库
```sh
mkdir my-awesome-scheme
cd my-awesome-scheme
git init .
vim about.json
```
为 `about.json` 添加一个骨架配置文件
```json
{
"name": "My awesome color schemes",
"about_url": "",
"license_url": "",
"color_schemes": {}
}
```
添加一个 `LICENSE` 文件，我 [通常使用 MIT 许可证](https://github.com/SamSaffron/discourse-solarized/blob/master/LICENSE)
```sh
vim LICENSE
```
### 将更改推送到 GitHub
提交所有更改：
```sh
git add LICENSE
git add about.json
git commit -am "first commit"
```
在 [GitHub.com](https://github.com) 上创建账户，然后创建一个新的仓库。
### （可选）在 Discourse 上创建一个主题作为讨论配色的主页
理想情况下，您会在 #Customization > Theme 类别中创建一个主题，并附上您配色方案的一些截图。您将把这个链接用作您的 `about_url`
### 填写 about.json 文件中缺失的信息
- 导航至 GitHub 上的 LICENSE 页面，将该 URL 填入 `license_url`
- 使用 GitHub 项目 URL 或 Discourse 主题 URL 作为您的 `about_url`
- 在配色方案上点击“复制到剪贴板”，并将其粘贴到 `color_schemes` 部分
流程结束时，您的 about.json 文件将类似于：
```json
{
"name": "Solarized",
"about_url": "https://github.com/SamSaffron/discourse-solarized",
"license_url": "https://github.com/SamSaffron/discourse-solarized/blob/master/LICENSE",
"color_schemes": {
"Solarized Light": {
"primary": "586E75",
"secondary": "EEE8D5",
"tertiary": "268BD2",
"quaternary": "CB4B16",
"header_background": "002B36",
"header_primary": "93A1A1",
"highlight": "B58900",
"danger": "CB4B16",
"success": "859900",
"love": "DC322F"
}
}
}
```
提交更改并推送到 GitHub
```sh
git commit -am "added more details"
git push
```
### 测试您的配色方案是否正确
- 删除您本地的配色方案
- 在 `admin/customize/theme` 界面中从 GitHub 导入您的主题
- 访问 `admin/customize/colors` 并确保您的配色方案显示正确。
🎊
现在您可以轻松地将配色方案分享给他人！
另请参阅：
> [@主题与主题组件的结构](https://meta.discourse.org/t/how-to-develop-custom-themes/60848):
>
> Discourse 支持[原生主题](https://meta.discourse.org/t/native-theme-support/47494/26)，这些主题可以来自 .tar.gz 归档文件或远程 Git 仓库，包括[私有仓库](https://meta.discourse.org/t/how-to-source-a-theme-from-a-private-git-repository/82584)。 示例主题位于：[GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub](https://github.com/SamSaffron/discourse-simple-theme) Git 仓库将每天检查一次更新（[每天一次](https://github.com/discourse/discourse/blob/main/app/jobs/scheduled/check_out_of_date_themes.rb)），或者通过点击检查更新 按钮来手动检查。当检测到更改时，检查更新 按钮将变为更新到最新版本。 [image] 创建主题时，需要遵循特定的文件结构。以下是您可以包含的文件： about.json（必需） common/common.scss common/header.html common/after\_header.html common/footer.html common/head\_tag.html common/body\_tag.html common/embedded.scss desktop/desktop.scss desktop/header.html desktop/after\_header.html …
* * *
_最后由 @SaraDev 于 2022-06-03T01:00:00Z 审核_
* * *
本文档受版本控制 - 请 [在 GitHub 上](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/31-color-scheme.md) 建议修改。
---
### Author:  [@j127](https://meta.discourse.org/u/j127)
#### Post date: [2025年八月1日 18:49 UTC](https://meta.discourse.org/t/create-and-share-a-color-scheme/61196/3 "2025-08-01T18:49:05Z")
> [@Discourse](#):
>
> ```plaintext
> {
> "name": "Solarized",
> "about_url": "https://github.com/SamSaffron/discourse-solarized",
> "license_url": "https://github.com/SamSaffron/discourse-solarized/blob/master/LICENSE",
> "color_schemes": {
> "Solarized Light": {
> "primary": "586E75",
> "secondary": "EEE8D5",
> "tertiary": "268BD2",
> "quaternary": "CB4B16",
> "header_background": "002B36",
> "header_primary": "93A1A1",
> "highlight": "B58900",
> "danger": "CB4B16",
> "success": "859900",
> "love": "DC322F"
> }
> }
> }
>
> ```
我认为那里还可以添加两个字段：“hover”和“selected”。