Temi

I temi consentono di personalizzare l'aspetto di Blockly. Puoi personalizzare i colori dei blocchi, i colori delle categorie e alcuni componenti tramite la classe Themes. Se desideri personalizzare componenti aggiuntivi, forniamo il nome del tema come classe nel div di inserimento. In questo modo gli utenti possono modificare l'aspetto di tutti i componenti non supportati tramite CSS. Il nostro obiettivo principale nella creazione di temi è aiutare gli sviluppatori a creare esperienze Blockly più accessibili.

Proprietà del tema

Un tema è un oggetto con diverse proprietà: il tema di base da cui partire, un oggetto stile per blocchi, categorie, componenti e caratteri e l'opzione per scegliere se utilizzare o meno i cappelli per i blocchi iniziali.

Stile blocco

Uno stile di blocco è costituito da quattro campi:

  • (Obbligatorio) colourPrimary: il colore di sfondo del blocco.
  • (Facoltativo) colourSecondary - Il colore di sfondo se il blocco è un blocco ombra.
  • colourTertiary (facoltativo): il colore del bordo o dell'evidenziazione del blocco.
  • hat (facoltativo) - Aggiunge un cappello a un blocco, se il valore è impostato su cap. Scopri di più sui cappelli.

Blocco con frecce che indicano i colori primario, secondario e terziario

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

Un tema includerà una mappatura del nome dello stile del blocco all'oggetto dello stile del blocco:

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

Stile categoria

Uno stile di categoria contiene solo una proprietà di colore.

  • Colore (obbligatorio): il colore della categoria nella cassetta degli attrezzi. Di solito, questi colori dovrebbero essere gli stessi di colourPrimary nella maggior parte dei blocchi della categoria. In questo modo, gli utenti possono capire facilmente quali blocchi appartengono a una determinata categoria.

Screenshot di una casella degli strumenti con diversi colori per le categorie

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

Un tema includerà una mappatura del nome della categoria all'oggetto dello stile della categoria:

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

Stili dei componenti

Un tema può impostare il colore o il valore dei seguenti componenti:

  • workspaceBackgroundColour: il colore di sfondo dell'area di lavoro
  • toolboxBackgroundColour: colore di sfondo della cassetta degli attrezzi
  • toolboxForegroundColour: colore del testo della categoria della cassetta degli attrezzi
  • flyoutBackgroundColour: colore di sfondo del popup
  • flyoutForegroundColour: colore del testo dell'etichetta popup
  • flyoutOpacity: opacità del menu a scomparsa
  • scrollbarColour: colore della barra di scorrimento
  • scrollbarOpacity: opacità barra di scorrimento
  • insertionMarkerColour: il colore dell'indicatore di inserimento (non accetta nomi di colori)
  • insertionMarkerOpacity: l'opacità dell'indicatore di inserimento
  • markerColour: il colore dell'indicatore visualizzato nella modalità di navigazione da tastiera
  • cursorColour: il colore del cursore visualizzato in modalità di navigazione con la tastiera

La maggior parte degli altri componenti può essere modificata utilizzando il nome del tema nel CSS. Tuttavia, se vuoi modificare un componente che non fa già parte di questo elenco e non può essere modificato utilizzando il CSS, invia un problema con ulteriori informazioni.

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

Stili di carattere

Uno stile di carattere è un oggetto che contiene la famiglia, lo spessore e le dimensioni di un carattere.

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

Cappelli da baseball

Se imposti startHats: true direttamente in un oggetto tema, verrà aggiunto un cappello a tutti i blocchi senza connessioni precedenti o di output. Se vuoi un maggiore controllo su quali blocchi devono avere un cappello, puoi utilizzare la proprietà block style.

Temi personalizzati

Per aggiungere un tema alla tua applicazione Blockly, devi:

  1. Creare un tema
  2. Aggiungere i nomi degli stili
  3. Impostare il tema in uno spazio di lavoro

Creare un tema

Un tema può essere creato utilizzando il costruttore o defineTheme. L'utilizzo di defineTheme semplifica l'estensione di un tema esistente e l'impostazione di tutti i valori con un unico oggetto. Un tema ha un nome ed è un oggetto con gli stili di blocco, gli stili di categoria e altre proprietà, come discusso sopra.

Un tema può avere anche un tema di base, che fornirà valori predefiniti per tutti i valori non specificati nel tema personalizzato.

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

Ecco un esempio di utilizzo di defineTheme.

Aggiungere nomi di stili

Ora che abbiamo creato un tema, dobbiamo aggiungere il nome degli stili alle definizioni di blocchi e categorie.

Categorie

Il modo in cui definisci gli strumenti determina come è necessario aggiungere il nome dello stile. Per ulteriori informazioni, consulta la pagina della cassetta degli attrezzi.

Stoppate

Il modo in cui definisci il blocco determina il modo in cui devi aggiungere il nome dello stile. Puoi trovare maggiori informazioni sulle definizioni dei blocchi nella nostra pagina dei blocchi personalizzati. Devi assegnare al blocco uno degli stili di blocco che hai definito nella proprietà blockStyles del tema.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Imposta il tema

Devi anche indicare a Blockly quale tema utilizzare. Se definisci diversi temi che utilizzano lo stesso stile di blocco e gli stessi nomi di categoria, puoi consentire all'utente di scegliere il tema più adatto alle sue esigenze e modificarlo dinamicamente senza dover modificare le definizioni dei blocchi stessi.

Tema iniziale

Il modo migliore per impostare un tema iniziale è includere options.theme nella chiamata inject. Puoi fornire il tema in JSON o 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
   })
}

Per ulteriori informazioni sulle opzioni, consulta la nostra pagina di configurazione. Se non viene fornito alcun tema, verrà utilizzato per impostazione predefinita il tema classico.

Temi dinamici

Se vuoi modificare il tema in modo dinamico (ad esempio nel caso in cui consenta agli utenti di scegliere un tema da un menu a discesa), puoi chiamare yourWorkspace.setTheme(theme).

Crea script per gli stili dei blocchi

Blockly fornisce uno script che prende una mappa di tonalità o valori esadecimali e calcola i colori secondari e terziari. Lo script si trova nella cartella scripts/themes.

Temi integrati

Blockly fornisce una serie di temi per l'accessibilità, in particolare per alcuni tipi di discromatopsie:

Sono disponibili anche: