Düzenleyici Temaları

Crowdin Düzenleyici, görsel temalarını yönetmek için JSON tabanlı dosyaları kullanır. Bu makale, tasarımcıların özel temalar oluşturması ve dağıtması için temel kavramları özetlemektedir.

Tema Dosya Yapısı

Eksiksiz bir Crowdin tema dosyası aşağıdaki üst düzey özellikleri içerir:

  • themeMode – temel düzenleyici stili için “açık” veya “koyu”yu kabul eder.
  • primaryAccent – arayüz boyunca kullanılan ana vurgu rengi.
  • base – çeşitli arayüz öğelerini (arka planlar, yazı tipi renkleri, dizgi durumu renkleri, vurgular) denetleyen özellikler koleksiyonu.
  • accents – bildirimler için kullanılan renkler (bilgi, tehlike, uyarı, başarılı iletileri).
  • button – farklı düğme türleri için stil seçenekleri sunar.

Önemli Notlar

  • Renk Değerleri – tüm renk özellikleri geçerli CSS renk değerleri (HEX, RGB, RGBA) gerektirir.
  • Karmaşık Arka Planlar – base.commonUi.headerBackground, base.commonUi.subHeaderBackground, base.commonUi.mainContentBackground ve base.commonUi.mainMenuBackground özellikleri meyilleri, resimleri ve diğer geçerli CSS arka plan değerlerini kabul eder.
  • En Düşük Temalar – her özelliğin tanımlanması zorunlu değildir. Crowdin, sağlanan ayarlara dayanarak eksik değerleri otomatik olarak hesaplar.

Geliştirme ve Deneme

Tema geliştirme süreci sırasında, tasarımcıların temalarını gerçek zamanlı olarak kolayca deneyebilmesine ve önizleyebilmesine yardımcı olan Tema Oluşturucu uygulamasını kullanmanızı öneririz.

En Düşük JSON Teması

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

Tam JSON Teması

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

Tema Yayınlama

Özel temaların Crowdin kullanıcıları tarafından kurulama hazır hale gelmesi için Crowdin Mağazası’na gönderilmesi gerekir.

Bir tema yayınlamak için şu adımları izleyin:

  1. Destek Ekibiyle İletişime Geçin: İnceleme ve yayınlama sürecini 7x24 yöneteceğiz.
  2. Aşağıdaki bilgileri sağlayın:
    • Hazırlayan adı
    • Tema adı
    • Açıklama
    • Kullanılan temanın ekran görüntüsü

Bu makale yararlı oldu mu?