Editor Themes

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.

Explore Existing Themes Browse the collection of available themes in the Crowdin Store.

Theme File Structure

A complete Crowdin theme file contains the following top-level properties:

• themeMode – accepts light or dark for base editor styling.
• primaryAccent – main accent color used throughout the interface.
• base – a collection of properties controlling various interface elements (backgrounds, font colors, string status colors, highlights).
• accents – colors used for notifications (info, danger, warning, success messages).
• button – provides styling options for different button types.

Important Notes

• Color Values – all color properties require valid CSS color values (HEX, RGB, RGBA).
• Complex Backgrounds – properties base.commonUi.headerBackground, base.commonUi.subHeaderBackground, base.commonUi.mainContentBackground and base.commonUi.mainMenuBackground accept gradients, images, and other valid CSS background values.
• Minimal Themes – it’s not mandatory to define every property. Crowdin automatically calculates missing values based on the provided settings.

Development and Testing

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.

Minimal JSON Theme

{
  "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"
    }
  }
}

Full JSON Theme

{
  "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"
    }
  }
}

Theme Publishing

Custom themes should be submitted to the Crowdin Store to become available for installation by Crowdin users.

To publish a theme, follow these steps:

1. Contact Support Team: We will handle the review and publishing process 24x7.
2. Provide the following information:
   • Author name
   • Theme name
   • Description
   • Screenshot of the theme in use