Editor-Designs

Der Crowdin Editor verwendet JSON-basierte Dateien zur Verwaltung seiner visuellen Designs. Dieser Artikel erläutert die wichtigsten Konzepte für Designer, um benutzerdefinierte Designs zu erstellen und zu verteilen.

Vorhandene Designs entdeckenBrowse der collection von verfügbar themes auf der Crowdin Store.

Struktur der Designdatei

Eine vollständige Crowdin-Designdatei enthält die folgenden Eigenschaften auf oberster Ebene:

• themeMode – akzeptiert light oder dark für die grundlegende Gestaltung des Editors.
• primaryAccent – die wichtigste Akzentfarbe, die in der gesamten Benutzeroberfläche verwendet wird.
• base – eine Sammlung von Eigenschaften, die verschiedene Elemente der Benutzeroberfläche steuern (Hintergründe, Schriftfarben, Farben für den String-Status und Hervorhebungen).
• accents – Farben für Benachrichtigungen (Info-, Gefahren-, Warn- und Erfolgsmeldungen).
• button – stellt Gestaltungsoptionen für verschiedene Schaltflächentypen bereit.

Wichtige Hinweise

• Farbwerte – alle Farbeigenschaften erfordern gültige CSS-Farbwerte (HEX, RGB, RGBA).
• Komplexe Hintergründe – die Eigenschaften base.commonUi.headerBackground, base.commonUi.subHeaderBackground, base.commonUi.mainContentBackground und base.commonUi.mainMenuBackground akzeptieren Verläufe, Bilder und andere gültige CSS-Hintergrundwerte.
• Minimale Designs – es ist nicht erforderlich, jede Eigenschaft zu definieren. Crowdin berechnet fehlende Werte automatisch auf Grundlage der bereitgestellten Einstellungen.

Entwicklung und Tests

Während der Entwicklung des Designs empfehlen wir die Theme-Builder-App. Damit können Designer ihre Designs einfach in Echtzeit testen und in der Vorschau anzeigen.

Minimales JSON-Design

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

Vollständiges JSON-Design

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

Veröffentlichung von Designs

Benutzerdefinierte Designs sollten an den Crowdin Store übermittelt werden, damit sie Crowdin-Nutzern zur Installation zur Verfügung stehen.

Führe die folgenden Schritte aus, um ein Design zu veröffentlichen:

1. Support-Team kontaktieren: Wir kümmern uns rund um die Uhr um den Prüfungs- und Veröffentlichungsprozess.
2. Gib die folgenden Informationen an:
   • Name des Autors
   • Name des Designs
   • Beschreibung
   • Screenshot des verwendeten Designs