跳转到内容

编辑器主题

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

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

  • themeMode – 接受 lightdark,用于编辑器基础样式。
  • primaryAccent – 整个界面中使用的主强调色。
  • base – 一组控制各种界面元素(背景、字体颜色、字符串状态颜色、高亮)的属性。
  • accents – 用于通知的颜色(信息、危险、警告、成功消息)。
  • button – 为不同按钮类型提供样式选项。
  • 颜色值 – 所有颜色属性需要有效的 CSS 颜色值(HEX、RGB、RGBA)。
  • 复杂背景 – 属性 base.commonUi.headerBackgroundbase.commonUi.subHeaderBackgroundbase.commonUi.mainContentBackgroundbase.commonUi.mainMenuBackground 接受渐变、图片及其他有效的 CSS 背景值。
  • 最简主题 – 并非所有属性都必须定义。 Crowdin 会根据所提供的设置自动计算缺失的值。

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

{
"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"
}
}
}
{
"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. 提供以下信息:
    • 作者姓名
    • 主题名称
    • 描述
    • 主题使用中的截图
本页面对你有帮助吗?