编辑器主题

Crowdin 编辑器使用基于 JSON 的文件来管理其视觉主题。 本文概述了设计师创建和分发自定义主题的关键概念。

探索现有主题 在 Crowdin Store 上浏览可用主题集合。

主题文件结构

完整的 Crowdin 主题文件包含以下顶级属性：

• themeMode – 接受 light 或 dark，用于编辑器基础样式。
• primaryAccent – 整个界面中使用的主强调色。
• base – 一组控制各种界面元素（背景、字体颜色、字符串状态颜色、高亮）的属性。
• accents – 用于通知的颜色（信息、危险、警告、成功消息）。
• button – 为不同按钮类型提供样式选项。

重要说明

• 颜色值 – 所有颜色属性需要有效的 CSS 颜色值（HEX、RGB、RGBA）。
• 复杂背景 – 属性 base.commonUi.headerBackground、base.commonUi.subHeaderBackground、base.commonUi.mainContentBackground 和 base.commonUi.mainMenuBackground 接受渐变、图片及其他有效的 CSS 背景值。
• 最简主题 – 并非所有属性都必须定义。 Crowdin 会根据所提供的设置自动计算缺失的值。

开发与测试

在主题开发过程中，我们建议使用 Theme Builder 应用，借助该应用，设计师可以轻松地实时测试和预览其主题。

最简 JSON 主题

{
  "themeMode": "dark",
  "primaryAccent": "#f9d9c8",
  "base": {
    "baseBackground": "#2d2b52",
    "stringStatus": {
      "translated": "#5b89c6",
      "approved": "#6dc271"
    },
    "highlights": {
      "placeholderColor": "#afff8a",
      "placeholderBg": "#74827A",
      "tagColor": "#bfc3a0",
      "tagBg": "#626550",
      "nonePrintableCharacterColor": "#3eb17f",
      "findAndReplaceHighlightBg": "#8A6800",
      "specialLightColor": "#E0E6ED",
      "specialLightBg": "#383E47"
    }
  },
  "accents": {
    "info": {
      "accentColor": "#35a1ff"
    },
    "danger": {
      "accentColor": "#fa644a"
    },
    "warning": {
      "accentColor": "#cc9a06"
    },
    "success": {
      "accentColor": "#74bb02"
    }
  }
}

完整 JSON 主题

{
  "themeMode": "light",
  "primaryAccent": "#4A90E2",
  "base": {
    "baseBackground": "#FFFFFF",
    "cardsBackground": "#F7F7F7",
    "typeface": {
      "baseColor": "black",
      "bodyColor": "black",
      "mutedColor": "black",
      "disabledColor": "black",
      "iconsColor": "black"
    },
    "commonUi": {
      "headerBackground": "#4A90E2",
      "subHeaderBackground": "#3E7CB1",
      "mainContentBackground": "#FFFFFF",
      "checkedStringBackground": "#E0F7FA",
      "mainMenuBackground": "#2E3A4A"
    },
    "scrollBars": {
      "thumbColor": "#ffffff",
      "trackColor": "#f5f7f8"
    },
    "borders": {
      "borderColor": "#263238",
      "darkBorderColor": "#000000"
    },
    "stringStatus": {
      "translated": "#4CAF50",
      "approved": "#0A8F08",
      "notTranslated": "#FFC107",
      "hidden": "#9E9E9E"
    },
    "highlights": {
      "placeholderColor": "#9E9E9E",
      "placeholderBg": "#ECEFF1",
      "tagColor": "#4A90E2",
      "tagColorHover": "#357ABD",
      "tagBg": "#ECEFF1",
      "tagBgHover": "#CFD8DC",
      "nonePrintableCharacterColor": "#FF5252",
      "findAndReplaceHighlightBg": "#FFEB3B",
      "specialLightColor": "#770000",
      "specialLightBg": "#F0F0FF"
    }
  },
  "accents": {
    "info": {
      "accentColor": "#2196F3",
      "backgroundColor": "#E3F2FD"
    },
    "danger": {
      "accentColor": "#F44336",
      "backgroundColor": "#FFEBEE"
    },
    "warning": {
      "accentColor": "#FF9800",
      "backgroundColor": "#FFF3E0"
    },
    "success": {
      "accentColor": "#4CAF50",
      "backgroundColor": "#E8F5E9"
    }
  },
  "button": {
    "default": {
      "btnColor": "#333333",
      "btnHoverColor": "#444444",
      "btnBorder": "#BDBDBD",
      "btnHoverBorder": "#9E9E9E",
      "btnActiveBorder": "#757575",
      "btnDisabledBorder": "#E0E0E0",
      "btnBg": "#E0E0E0",
      "btnHoverBg": "#EEEEEE",
      "btnActiveBg": "#BDBDBD",
      "btnDisabledBg": "#F5F5F5",
      "btnModalBorder": "#9E9E9E"
    },
    "primary": {
      "btnColor": "#FFFFFF",
      "btnBorder": "#4A90E2",
      "btnBg": "#2196F3",
      "btnHoverBg": "#1976D2",
      "btnActiveBg": "#0D47A1"
    },
    "danger": {
      "btnBg": "#F44336",
      "btnHoverBg": "#D32F2F",
      "btnBorder": "#FFCDD2",
      "btnHoverBorder": "#EF9A9A"
    },
    "icon": {
      "btnBg": "#FFFFFF",
      "btnBorder": "#BDBDBD",
      "btnHoverBorder": "#9E9E9E",
      "btnActiveBorder": "#757575"
    }
  }
}

主题发布

自定义主题应提交到 Crowdin 商店，以便 Crowdin 用户安装使用。

要发布主题，请按以下步骤操作：

1. 联系支持团队：我们将全天候（24x7）处理审核和发布流程。
2. 提供以下信息：
   • 作者姓名
   • 主题名称
   • 描述
   • 主题使用中的截图