@crowdin/themes-converter

Crowdin theme converter

This module is designed to generate styles for Crowdin Editor themes.

const { convert } = require('@crowdin/themes-converter');

const theme = {
    primaryAccent: "#6494ed", 
    base: {
        baseBackground: "#21252b", 
        stringStatus: {
            translated: "#5b89c6",
            approved: "#6dc271",
        },
        highlights: {
            placeholderColor: "#afff8a", 
            placeholderBg: "#74827A", 
            tagColor: "#bfc3a0", 
            tagBg: "#626550", 
            nonePrintableCharacterColor: "#3eb17f", 
            findAndReplaceHighlightBg: "#8A6800", 
        },
    },
    accents: {
        info: {
            accentColor: "#35a1ff", 
        },
        danger: {
            accentColor: "#fa644a", 
        },
        warning: {
            accentColor: "#cc9a06", 
        },
        success: {
            accentColor: "#74bb02", 
        },
    },
};

const styles =  convert(theme);

Full theme config:

{
    'primaryAccent': '', // Links, Primary buttons, Inputs, radio, checkbox and textarea focuses,
    'base': {
        'baseBackground': '', // base background color for all ui elements
        'cardsBackground': '', // Cards backgrounds, shadows, Popovers, borders etc
        'typeface': {
            'baseColor': '', // Fonts, Icons, if empty - generated from automaticaly based on baseBackgroundColor
            'bodyColor': '', 
            'mutedColor': '',
            'disabledColor': '',
            'iconsColor': '',
        },
        'commonUi': {
            'headerBackground': '', // header background color
            'subHeaderBackground': '', // subheader background color
            'mainContentBackground': '', // area under source strings (e.g. left panel in Comfortale View)
            'checkedStringBackground': '', // background for checked strings in mainContentBackground
            'mainMenuBackground': '', // main menu background color
        },
        'stringStatus': { // progresses, string statuses
            'translated': '',
            'approved': '',
            'notTranslated': '',
            'hidden': '',
        },
        'highlights': {
            'placeholderColor': '',
            'placeholderBg': '',
            'tagColor': '',
            'tagColorHover': '',
            'tagBg': '',
            'tagBgHover': '',
            'nonePrintableCharacterColor': '',
            'findAndReplaceHighlightBg': '', // --crowdin-find-replace-highlight-bg  highlight for found items
        },
    },
    'accents': {
        'info': {
            'accentColor': '', // Info typeface and borders color
            'backgroundColor': '', // --crowdin-info: Info alerts, badges, tips etc
        },
        'danger': {
            'accentColor': '', // Danger typeface and borders color
            'backgroundColor': '', // --crowdin-danger: Danger alerts, badges, tips etc
        },
        'warning': {
            'accentColor': '', // Warning typeface and borders color
            'backgroundColor': '', // --crowdin-warning: Warning alerts, badges, tips etc
        },
        'success': {
            'accentColor': '', // Success typeface and borders color
            'backgroundColor': '', // --crowdin-success: Success alerts, badges, tips etc
        },
    },
    'button': {
        'default': {
            'btnColor': '',
            'btnHoverColor': '',
            'btnBorder': '',
            'btnHoverBorder': '',
            'btnActiveBorder': '',
            'btnDisabledBorder': '',
            'btnBg': '',
            'btnHoverBg': '',
            'btnActiveBg': '',
            'btnDisabledBg': '',
            'btnModalBorder': '', // modal buttons may have different borders
        },
        'primary': {
            'btnColor': '',
            'btnBorder': '',
            'btnBg': '',
            'btnHoverBg': '',
            'btnActiveBg': '',
        },
        'danger': {
            'btnBg': '',
            'btnHoverBg': '', //hover & active
            'btnBorder': '',
            'btnHoverBorder': '',
        },
        'icon': {
            'btnBg': '',
            'btnBorder': '',
            'btnHoverBorder': '',
            'btnActiveBorder': '',
        },
    }
}

Advanced Background Customization

Certain properties within our theming configuration are designed to support a wide array of CSS background values. This includes not only standard and custom colors but also more complex definitions such as gradients, images, and other CSS background properties.

  'base.commonUi.headerBackground',
  'base.commonUi.subHeaderBackground',
  'base.commonUi.mainContentBackground',
  'base.commonUi.mainMenuBackground',