Thèmes

Les thèmes permettent de personnaliser l'apparence de Blockly. Vous pouvez personnaliser les couleurs des blocs, des catégories et de certains composants via la classe Themes. Si vous souhaitez personnaliser des composants supplémentaires, nous fournissons le nom du thème en tant que classe sur l'injection div. Cela permet aux utilisateurs de modifier l'apparence de tous les composants non compatibles via CSS. Notre objectif principal lors de la création de thèmes est de permettre aux développeurs de créer des expériences Blockly plus accessibles.

Remarque : La façon la plus simple de styliser Blockly consiste à utiliser des thèmes. Si vous avez besoin d'un contrôle plus précis , utilisez CSS.

Remarque : Si vous ne souhaitez contrôler que la couleur principale d'un bloc plutôt que d'avoir un contrôle plus précis sur son apparence, vous pouvez définir la couleur dans la définition du bloc au lieu de créer un thème. Si vous souhaitez modifier la forme d'un bloc plutôt que sa couleur, découvrez les moteurs de rendu.

Propriétés du thème

Un thème est un objet comportant plusieurs propriétés : le thème de base à étendre, un objet de style pour les blocs, les catégories, les composants et les polices, et un paramètre indiquant s'il faut utiliser ou non des chapeaux pour les blocs de démarrage.

Important : Le code de Blockly utilise l'orthographe non américaine de colour. Toutes les propriétés de couleur peuvent être définies en valeurs de teinte ou hexadécimales.

Style de bloc

Un style de bloc est composé de quatre champs :

• colourPrimary (obligatoire) : couleur d'arrière-plan du bloc.
• colourSecondary (facultatif) : couleur d'arrière-plan si le bloc est un bloc d'ombre.
• colourTertiary (facultatif) : couleur de la bordure ou de la mise en surbrillance du bloc.
• hat (facultatif) : ajoute un chapeau à un bloc si la valeur est définie sur cap. En savoir plus sur les chapeaux.

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

Un thème inclut un mappage du nom du style de bloc à l'objet de style de bloc :

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

Style de catégorie

Un style de catégorie ne contient qu'une propriété de couleur.

• Couleur (obligatoire) : couleur de la catégorie dans la boîte à outils. En règle générale, ces couleurs doivent être identiques à la propriété colourPrimary de la majorité des blocs de la catégorie. Cela permet aux utilisateurs de déterminer facilement les blocs qui appartiennent à une catégorie donnée.

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

Un thème inclut un mappage du nom de la catégorie à l'objet de style de catégorie :

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

Styles de composants

Un thème peut définir la couleur ou la valeur des composants ci-dessous :

• workspaceBackgroundColour : couleur d'arrière-plan de l'espace de travail
• toolboxBackgroundColour : couleur d'arrière-plan de la boîte à outils
• toolboxForegroundColour : couleur du texte de la catégorie de la boîte à outils
• flyoutBackgroundColour : couleur d'arrière-plan du menu déroulant
• flyoutForegroundColour : couleur du texte du libellé du menu déroulant
• flyoutOpacity : opacité du menu déroulant
• scrollbarColour : couleur de la barre de défilement
• scrollbarOpacity : opacité de la barre de défilement
• insertionMarkerColour: couleur du marqueur d'insertion (n'accepte pas les noms de couleurs)
• insertionMarkerOpacity : opacité du marqueur d'insertion
• markerColour: couleur du marqueur affiché en mode de navigation au clavier
• cursorColour: couleur du curseur affiché en mode de navigation au clavier

La plupart des autres composants peuvent être modifiés à l'aide du nom du thème dans votre CSS. Toutefois, si vous souhaitez modifier un composant qui ne figure pas déjà dans cette liste et qui ne peut pas être modifié à l'aide de CSS, veuillez signaler un problème en fournissant plus d' informations.

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

Styles de police

Un style de police est un objet qui contient la famille, l'épaisseur et la taille d'une police.

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

Chapeaux de démarrage

**Conseil** : Pour en savoir plus sur les cas d'utilisation des chapeaux de démarrage, consultez notre page sur la conception d'applications.

Si vous définissez startHats: true directement dans un objet de thème, un chapeau est ajouté à tous les blocs sans connexion précédente ni de sortie. Si vous souhaitez contrôler plus précisément les blocs qui reçoivent un chapeau, vous pouvez utiliser la propriété de style de bloc.

Thèmes personnalisés

Pour ajouter un thème à votre application Blockly, vous devez procéder comme suit :

1. Créer un thème
2. Ajouter des noms de styles
3. Définir votre thème dans un espace de travail

Créer un thème

Vous pouvez créer un thème à l'aide du constructeur ou de defineTheme. L'utilisation de defineTheme permet d'étendre facilement un thème préexistant et de définir toutes les valeurs avec un seul objet. Un thème a un nom et est un objet avec les styles de bloc, les styles de catégorie et d'autres propriétés, comme indiqué ci-dessus.

Un thème peut également avoir un thème de base, qui fournit des valeurs par défaut pour toutes les valeurs non spécifiées dans le thème personnalisé.

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

Voici un exemple d'utilisation de defineTheme.

Ajouter des noms de styles

Maintenant que nous avons créé un thème, nous devons ajouter le nom des styles aux définitions de bloc et de catégorie.

Catégories

Pour utiliser l'un des styles de catégorie définis dans categoryStyles de votre thème, ajoutez-le à la définition de votre catégorie :

JSON

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

XML

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

Blocs

Pour utiliser l'un des styles de bloc définis dans blockStyles de votre thème, ajoutez-le à la définition de votre bloc :

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Définir votre thème

Vous devez également indiquer à Blockly le thème à utiliser. En définissant plusieurs thèmes qui utilisent les mêmes noms de styles de bloc et de catégorie, vous pouvez permettre à l'utilisateur de choisir le thème qui lui convient le mieux et de le modifier de manière dynamique sans avoir à modifier les définitions de bloc elles-mêmes.

Thème initial

La meilleure façon de définir un thème initial consiste à inclure l'option de configuration theme dans votre appel à Blockly.inject. Vous pouvez fournir le thème en JSON ou en JavaScript.

JSON

Blockly.inject('blocklyDiv', {
  theme: {
     "blockStyles" : {
        "list_blocks": {
           "colourPrimary": "#4a148c",
           "colourSecondary":"#AD7BE9",
           "colourTertiary":"#CDB6E9"
        }
     },
     "categoryStyles" : {
        "list_category": {
           "colour": "#4a148c"
        }
     },
     "componentStyles" : {
        "workspaceBackgroundColour": "#1e1e1e"
     }
  },
  ...
});

JavaScript

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

Si aucun thème n'est fourni, le thème classiqueest utilisé par défaut.

Thèmes dynamiques

Si vous souhaitez modifier votre thème de manière dynamique (par exemple, pour permettre aux utilisateurs de choisir un thème dans un menu déroulant), vous pouvez appeler yourWorkspace.setTheme(theme).

Créer un script de styles de bloc

Blockly fournit un script qui prend en compte une carte de teintes ou de valeurs hexadécimales et calcule les couleurs secondaires et tertiaires correspondantes. Le script se trouve dans le dossier scripts/themes.

Thèmes intégrés

Blockly propose plusieurs thèmes pour l'accessibilité, en particulier pour certains types de déficiences de la vision des couleurs :

• Contraste élevé
• Deutéranopie/Protanopie
• Tritanopie

Nous proposons également les thèmes suivants :

• Thème classique
• Moderne
• Mode sombre