Crowdin Editor uses JSON-based files to manage its visual themes. This article outlines the key concepts for designers to create and distribute custom themes.
A complete Crowdin theme file contains the following top-level properties:
base.commonUi.headerBackground
, base.commonUi.subHeaderBackground
, base.commonUi.mainContentBackground
and base.commonUi.mainMenuBackground
accept gradients, images, and other valid CSS background values.During the theme development process, we recommend using the Theme Builder app, with the help of which designers can easily test and preview their themes in real time.
{
"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"
}
}
}
Custom themes should be submitted to the Crowdin Store to become available for installation by Crowdin users.
To publish a theme, follow these steps: