Tema

Tema digunakan untuk menyesuaikan tampilan dan nuansa Blockly. Anda dapat menyesuaikan warna blok, warna kategori, dan komponen tertentu melalui class Themes. Jika Anda ingin menyesuaikan komponen tambahan, kami memberi nama tema sebagai class pada div injeksi. Ini memungkinkan pengguna mengubah tampilan komponen yang tidak didukung melalui CSS. Sasaran utama kami dalam membuat tema adalah memberdayakan developer untuk membuat pengalaman Blockly yang lebih mudah diakses.

Catatan: Jika Anda hanya ingin mengontrol warna utama blok, daripada memiliki kontrol yang lebih mendetail atas tampilan, Anda dapat menyetel warna dalam definisi blok, bukan membuat tema. Jika Anda ingin mengubah bentuk blok dan bukan warnanya, pelajari lebih lanjut renderer.

Properti Tema

Tema adalah objek dengan beberapa properti: tema dasar yang diperluas, objek gaya untuk blok, kategori, komponen, dan font, serta apakah akan menggunakan topi untuk blok awal atau tidak.

Penting: Kode di Blockly menggunakan ejaan colour non-AS. Semua properti warna dapat ditentukan dalam nilai hue atau hex.

Model Blok

Gaya blok terdiri dari empat bidang:

• colourPrimary (wajib) - Warna latar belakang blok.
• colourSecondary (opsional) - Warna latar belakang jika blok adalah blok bayangan.
• colourTertiary (opsional) - Warna batas atau sorotan blok.
• hat (opsional) - Menambahkan topi ke blok, jika nilainya disetel ke cap. Pelajari topi lebih lanjut.

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

Tema akan menyertakan pemetaan nama gaya blok untuk memblokir objek gaya:

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

Gaya Kategori

Gaya kategori hanya memiliki properti warna.

• Warna (wajib) - Warna kategori di toolbox. Biasanya warna ini harus sama dengan colourPrimary pada sebagian besar blok dalam kategori tersebut. Hal ini memudahkan pengguna untuk mengetahui blok mana yang termasuk dalam kategori tertentu.

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

Tema akan menyertakan pemetaan nama kategori ke objek gaya kategori:

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

Gaya Komponen

Tema dapat menetapkan warna atau nilai komponen di bawah:

• workspaceBackgroundColour: Warna latar belakang ruang kerja
• toolboxBackgroundColour: Warna latar belakang toolbar
• toolboxForegroundColour: Warna teks kategori kotak alat
• flyoutBackgroundColour: Warna latar belakang flyout
• flyoutForegroundColour: Warna teks label flyout
• flyoutOpacity: Opasitas menu keluar
• scrollbarColour: Warna scrollbar
• scrollbarOpacity: Opasitas scrollbar
• insertionMarkerColour: Warna penanda penyisipan (Tidak menerima nama warna)
• insertionMarkerOpacity: Opasitas penanda penyisipan
• markerColour: Warna penanda yang ditampilkan dalam mode navigasi keyboard
• cursorColour: Warna kursor yang ditampilkan dalam mode navigasi keyboard

Sebagian besar komponen lain dapat diubah dengan menggunakan nama tema di CSS Anda. Namun, jika ada komponen yang ingin Anda ubah yang belum menjadi bagian dari daftar ini dan tidak dapat diubah menggunakan CSS, ajukan masalah dengan menyertakan informasi selengkapnya.

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

Gaya Font

Gaya {i>font<i} adalah objek yang menyimpan jenis, ketebalan, dan ukuran {i>font<i}.

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

Topi Start

Tips: Pelajari lebih lanjut kasus penggunaan start topi di halaman paradigma blok kami.

Jika Anda menetapkan startHats: true secara langsung dalam objek tema, topi akan ditambahkan ke semua blok tanpa koneksi sebelumnya atau output. Jika Anda menginginkan kontrol lebih besar atas jenis blok yang mendapatkan topi, Anda dapat menggunakan properti gaya blok.

Tema Kustom

Untuk menambahkan tema ke aplikasi Blockly, Anda harus melakukan hal berikut:

1. Membuat tema
2. Menambahkan nama gaya
3. Menetapkan tema di ruang kerja

Membuat Tema

Tema dapat dibuat menggunakan konstruktor atau dengan menggunakan defineTheme. Menggunakan defineTheme akan memudahkan Anda memperluas tema yang sudah ada dan menetapkan semua nilai dengan satu objek. Tema memiliki nama, dan merupakan objek dengan gaya blok, gaya kategori, dan properti lainnya seperti yang dibahas di atas.

Tema juga dapat memiliki tema dasar, yang akan memberikan nilai default untuk nilai apa pun yang tidak ditentukan dalam tema kustom.

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

Berikut adalah contoh penggunaan defineTheme.

Menambahkan Nama Gaya

Setelah membuat tema, kita perlu menambahkan nama gaya ke definisi blok dan kategori.

Kategori

Cara Anda mendefinisikan toolbox menentukan cara Anda menambahkan nama gaya. Lihat halaman peralatan untuk mengetahui informasi selengkapnya.

Block

Cara Anda mendefinisikan blok menentukan cara Anda menambahkan nama gaya. Anda dapat menemukan informasi selengkapnya tentang definisi blok di halaman blok kustom kami. Anda akan menetapkan salah satu gaya blok yang ditentukan di properti blockStyles tema ke blok Anda.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Setel Tema Anda

Anda juga perlu memberi tahu Blockly tema yang akan digunakan. Dengan menentukan beberapa tema yang menggunakan gaya blok dan nama kategori yang sama, Anda dapat memungkinkan pengguna memilih tema yang paling cocok untuk mereka, dan mengubahnya secara dinamis tanpa harus mengubah definisi blok itu sendiri.

Tema awal

Cara terbaik untuk menetapkan tema awal adalah dengan menyertakan options.theme dalam panggilan injeksi. Anda dapat menyediakan tema di JSON atau JavaScript.

JSON

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

JavaScript

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

Informasi lebih lanjut mengenai opsi dapat ditemukan di halaman konfigurasi kami. Jika tidak ada tema yang disediakan, tema akan ditetapkan secara default ke Tema Klasik.

Tema dinamis

Jika ingin mengubah tema secara dinamis (misalnya dalam kasus mengizinkan pengguna memilih tema dari menu dropdown), Anda dapat memanggil yourWorkspace.setTheme(theme).

Membuat Skrip Gaya Blok

Blockly menyediakan skrip yang akan mengambil peta warna atau nilai heksadesimal, dan akan menghitung warna sekunder dan tersier. Skrip dapat ditemukan di folder skrip/tema.

Tema bawaan

Blockly menyediakan sejumlah tema untuk aksesibilitas, khususnya jenis kekurangan penglihatan warna tertentu:

• Kontras tinggi
• Deuteranopia/Protanopia
• Tritanopia

Kami juga memiliki:

• Tema klasik
• Modern
• Mode gelap