Tema yazmak

my-theme/
  theme.json           token'lar, modlar, ayarlar, override'lar
  components/          bu temanın değiştirdiği bileşenler

schemaVersion: 2 zorunludur. Sürüm 1 manifestleri yarım desteklenmek yerine yüklemede reddedilir.

En küçük tema

{
  "schemaVersion": 2,
  "id": "my-theme",
  "name": "My Theme",
  "modes": {
    "default": "light",
    "light": { "tokens": { "colors": { "background": "#ffffff", "foreground": "#16161a" } } },
    "dark":  { "tokens": { "colors": { "background": "#0e0e11", "foreground": "#f2f2f5" } } }
  }
}

Bu, çalışan bir temadır. Bildirmediği her şey platformun kendi değerinde kalır; yani bir tema, tam bir stylesheet değil, farklı vermek istediğin kararların listesidir.

Operatörün değiştirebilmesi

Token'ı bir alan olarak bildir, özelleştirici onu çizsin:

{
  "tokens": {
    "colors": {
      "accent": { "label": "Vurgu", "default": "#1b34f5" }
    },
    "fonts": {
      "display": { "label": "Başlıklar", "default": "Archivo" }
    }
  }
}

Ayarlar

Ayarlar renk değil içeriktir: bir slogan, bir kapak, bir davet bağlantısı. Çekirdek grubu /admin/theme/<group> altında etiketler, girdiler, kaydet ve sıfırla ile birlikte çizer.

{
  "settings": {
    "hero": {
      "label": "Hero",
      "fields": {
        "tagline": { "type": "text", "label": "Slogan" },
        "cover": { "type": "image", "label": "Kapak görseli" },
        "discord": { "type": "url", "label": "Discord daveti" }
      }
    }
  }
}

Bir bileşeni değiştirmek

{
  "components": {
    "Footer": "components/Footer.tsx",
    "Hero": "components/Hero.tsx"
  }
}

Bileşen, platformun kendi sürümünün aldığı prop'ların aynısını alır. Temanın ayarlarını veritabanına uzanarak değil SDK üzerinden oku: bir tema, ziyaretçinin indirdiği bundle'ın içinde çalışır.

Bir slot açmak

{
  "slots": [{ "name": "hero.liveStats" }],
  "slotContents": [{ "slot": "footer.top", "component": "components/Ribbon.tsx" }]
}

slots, modüller için açtığın yerlerdir. slotContents ise çekirdeğin ya da bir modülün açtığı slot'lara koyduğun şeylerdir.

Modül önermek

{
  "suggestedModules": ["store", "servers"]
}

Operatörün kapatabileceği bir şerit. Hiçbir şey kurulmaz, hiçbir şey etkinleştirilmez.

Kendi metinleri

{
  "translations": {
    "en": { "myTheme": { "joinUs": "Join us" } },
    "tr": { "myTheme": { "joinUs": "Bize katıl" } }
  }
}

Tema etkinleştirildiğinde, platformun getirdiği her dilde senkronlanır.