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 à l'aide de 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 en créant des thèmes est de permettre aux développeurs de créer des expériences Blockly plus accessibles.

Propriétés du thème

Un thème est un objet avec plusieurs propriétés : le thème de base à partir duquel étendre, un objet de style pour les blocs, les catégories, les composants et les polices, et un objet indiquant s'il faut utiliser des chapeaux pour les blocs de départ.

Style de bloc

Un style de bloc se compose 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

Bloc avec des flèches pointant vers les couleurs primaires, secondaires et tertiaires

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 général, ces couleurs doivent être les mêmes que celles de colourPrimary sur la majorité des blocs de la catégorie. Les utilisateurs peuvent ainsi facilement identifier les blocs appartenant à une catégorie donnée.

Capture d'écran de la boîte à outils avec différentes couleurs de catégories

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

Un thème inclut un mappage du nom de la catégorie à l'objet de style de la 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 de l'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 volant
  • scrollbarColour : couleur de la barre de défilement
  • scrollbarOpacity : Opacité de la barre de défilement
  • insertionMarkerColour : couleur du repère d'insertion (les noms de couleurs ne sont pas acceptés)
  • insertionMarkerOpacity : opacité du repère d'insertion
  • markerColour : couleur du marqueur affiché en mode de navigation au clavier
  • cursorColour : couleur du curseur affiché en mode navigation au clavier

La plupart des autres composants peuvent être modifiés en utilisant le 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 du 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épart

Si vous définissez startHats: true directement dans un objet de thème, un chapeau sera ajouté à tous les blocs sans connexions précédentes 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é 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

Un thème peut être créé à l'aide du constructeur ou de defineTheme. L'utilisation de defineTheme facilite l'extension d'un thème préexistant et la définition de 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 fournira 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 blocs et de catégories.

Catégories

Pour utiliser l'un des styles de catégorie définis dans le fichier 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 le fichier 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 le même style de bloc et les mêmes noms de catégories, 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

Le meilleur moyen de définir un thème initial est d'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 classique sera 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 entrée 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 d'accessibilité, en particulier pour certains types de déficiences de la vision des couleurs :

Nous proposons également :