Temalar

Temalar, Blockly'nin görünümünü ve tarzını özelleştirmenin bir yoludur. Themes sınıfını kullanarak blok renklerini, kategori renklerini ve belirli bileşenleri özelleştirebilirsiniz. Ek bileşenleri özelleştirmek istiyorsanız tema adını, enjeksiyon div'inde sınıf olarak sağlarız. Bu sayede kullanıcılar, desteklenmeyen bileşenlerin görünümünü CSS aracılığıyla değiştirebilir. Tema oluşturmadaki temel amacımız, geliştiricilerin daha erişilebilir Blockly deneyimleri oluşturmasını sağlamaktır.

Tema Özellikleri

Tema, çeşitli özelliklere sahip bir nesnedir: genişletilecek temel tema, bloklar, kategoriler, bileşenler ve yazı tipleri için bir stil nesnesi ve başlangıç blokları için şapka kullanılıp kullanılmayacağı.

Blok Stili

Blok stili dört alandan oluşur:

  • colourPrimary (zorunlu) - Bloğun arka plan rengi.
  • colourSecondary (isteğe bağlı): Blok gölge bloksa arka plan rengi.
  • colourTertiary (isteğe bağlı): Bloğun kenarlık veya vurgu rengi.
  • hat (isteğe bağlı) - Değer cap olarak ayarlanırsa bir bloğa şapka ekler. Şapkalar hakkında daha fazla bilgi edinin.

Birincil, ikincil ve üçüncül rengi gösteren oklarla blok

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

Bir tema, blok stili adının blok stili nesnesi ile eşlemesini içerir:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

Kategori Stili

Kategori stili yalnızca bir renk özelliği içerir.

  • Renk (zorunlu): Araç kutusundaki kategorinin rengi. Genellikle bu renkler, kategorideki blokların çoğundaki colourPrimary ile aynı olmalıdır. Bu sayede kullanıcılar, hangi blokların belirli bir kategoriye ait olduğunu kolayca anlayabilir.

Farklı kategori renklerinin gösterildiği araç kutusunun ekran görüntüsü

const mathCategory = {
   'colour':'290'
}

Tema, kategori adının kategori stili nesnesi ile eşlemesini içerir:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

Bileşen stilleri

Temalar aşağıdaki bileşenlerin rengini veya değerini ayarlayabilir:

  • workspaceBackgroundColour: Çalışma alanının arka plan rengi
  • toolboxBackgroundColour: Araç kutusu arka plan rengi
  • toolboxForegroundColour: Araç kutusu kategorisi metin rengi
  • flyoutBackgroundColour: Açılır menü arka plan rengi
  • flyoutForegroundColour: Açılır menü etiketi metin rengi
  • flyoutOpacity: Açılır menü opaklığı
  • scrollbarColour: Kaydırma çubuğu rengi
  • scrollbarOpacity: Kaydırma çubuğu opaklığı
  • insertionMarkerColour: Ekleme işaretçisinin rengi (Renk adları kabul edilmez)
  • insertionMarkerOpacity: Ekleme işaretçisinin opaklığı
  • markerColour: Klavye gezinme modunda gösterilen işaretçinin rengi
  • cursorColour: Klavye gezinme modunda gösterilen imlecin rengi

Diğer bileşenlerin çoğu, CSS'nizde tema adı kullanılarak değiştirilebilir. Ancak bu listede yer almayan ve CSS kullanılarak değiştirilemeyen bir bileşeni değiştirmek istiyorsanız lütfen daha fazla bilgi içeren bir sorun kaydı oluşturun.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

Yazı Tipi Stilleri

Yazı tipi stili, bir yazı tipinin ailesini, ağırlığını ve boyutunu içeren bir nesnedir.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

Start Şapkaları

startHats: true değerini doğrudan bir tema nesnesinde ayarlarsanız önceki veya çıkış bağlantısı olmayan tüm bloklara bir şapka eklenir. Şapkanın hangi bloklara uygulanacağı üzerinde daha fazla kontrol sahibi olmak istiyorsanız bunun yerine blok stili özelliğini kullanabilirsiniz.

Özel Temalar

Blockly uygulamanıza tema eklemek için aşağıdakileri yapmanız gerekir:

  1. Tema oluşturma
  2. Stil adları ekleme
  3. Çalışma alanında temanızı ayarlama

Tema oluşturma

Tema, kurucu kullanılarak veya defineTheme kullanılarak oluşturulabilir. defineTheme'ü kullanmak, önceden var olan bir temayı genişletmeyi ve tüm değerleri tek bir nesneyle ayarlamayı kolaylaştırır. Temaların bir adı vardır ve yukarıda açıklanan blok stilleri, kategori stilleri ve diğer özelliklere sahip bir nesnedir.

Bir temanın temel teması da olabilir. Bu tema, özel temada belirtilmeyen tüm değerler için varsayılan değerler sağlar.

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

defineTheme kullanan bir örnek aşağıda verilmiştir.

Stil adları ekleme

Bir tema oluşturduğumuza göre, stil adlarını blok ve kategori tanımlarına eklememiz gerekiyor.

Kategoriler

Temanınızın categoryStyles bölümünde tanımlanan kategori stillerinden birini kullanmak için kategori tanımınıza ekleyin:

JSONXML
{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

<category name="Logic" categorystyle="logic_category"></category>

Bloklar

Temanızın blockStyles bölümünde tanımlanan blok stillerinden birini kullanmak için ilgili stili blok tanımınıza ekleyin:

JSONJavaScript
"style":"logic_blocks"

this.setStyle('logic_blocks');

Temanızı ayarlama

Ayrıca Blockly'ye hangi temayı kullanacağını da söylemeniz gerekir. Aynı blok stilini ve kategori adlarını kullanan birkaç tema tanımlayarak kullanıcının kendisi için en uygun temayı seçmesine ve blok tanımlarını değiştirmek zorunda kalmadan dinamik olarak değiştirmesine izin verebilirsiniz.

İlk tema

İlk temayı ayarlamanın en iyi yolu, options.theme öğesini ekleme çağrınıza eklemektir. Temayı JSON veya JavaScript olarak sağlayabilirsiniz.

JSONJavaScript
{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

Tema belirtilmezse varsayılan olarak Klasik Tema kullanılır.

Dinamik temalar

Temanızı dinamik olarak değiştirmek istiyorsanız (örneğin, kullanıcıların açılır menüden tema seçmesine izin veriyorsanız) yourWorkspace.setTheme(theme) işlevini çağırabilirsiniz.

Blok Stili Komut Dosyası Oluşturma

Blockly, ton veya onaltılık değer haritası alan ve bu tonlar için ikincil ve üçüncül renkleri hesaplayan bir komut dosyası sağlar. Komut dosyasını scripts/themes klasöründe bulabilirsiniz.

Yerleşik temalar

Blockly, erişilebilirlik için çeşitli temalar sunar. Özellikle belirli renk görme bozukluğu türleri için:

Ayrıca: