Thèmes

Les thèmes permettent de personnaliser l'apparence de Blockly. Vous pouvez personnaliser les couleurs des blocs, des catégories et 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'élément div d'injection. Cela permet aux utilisateurs de modifier l'apparence de tous les composants non compatibles via CSS. L'objectif principal de la création de thèmes est d'aider les développeurs à créer des expériences Blockly plus accessibles.

Propriétés du thème

Un thème est un objet doté de plusieurs propriétés: le thème de base à partir duquel s'étendre, un objet de style pour les blocs, les catégories, les composants et les polices, et l'utilisation ou non de chapeaux pour les blocs de départ.

Style de bloc

Un style de volume 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

Bloc avec des flèches pointant vers les couleurs primaire, secondaire et tertiaire

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

Un thème inclura un mappage entre le nom du style de bloc et 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 définie dans la boîte à outils. En général, ces couleurs doivent être identiques à colourPrimary sur la majorité des blocs de la catégorie. Les utilisateurs peuvent ainsi identifier facilement les blocs qui appartiennent à une catégorie donnée.

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

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

Un thème inclura un mappage entre le nom de la catégorie et l'objet de style de catégorie:

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

Styles de composant

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 de la vue volante
  • flyoutForegroundColour: couleur du texte du libellé de la fenêtre dynamique
  • flyoutOpacity: opacité de la fenêtre externe
  • scrollbarColour: couleur de la barre de défilement
  • scrollbarOpacity: opacité de la barre de défilement
  • insertionMarkerColour: couleur du repère d'insertion (n'accepte pas les noms de couleur)
  • insertionMarkerOpacity: opacité du repère d'insertion
  • markerColour: couleur du repère affiché en mode de navigation au clavier
  • cursorColour: couleur du curseur affichée en mode de navigation au clavier

Vous pouvez modifier la plupart des autres composants en utilisant le nom du thème dans votre code 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 code CSS, veuillez nous signaler un problème en nous fournissant davantage d'informations.

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

Styles de police

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

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 connexion précédente ni de sortie. Si vous souhaitez avoir plus de contrôle sur les blocs qui portent un chapeau, vous pouvez utiliser la propriété style de bloc à la place.

Thèmes personnalisés

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

  1. Créer un thème
  2. Ajouter des noms de styles
  3. Définir votre thème sur 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 porte un nom. Il s'agit d'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.

Categories

La façon dont vous définissez votre boîte à outils détermine la manière dont vous devez ajouter le nom du style. Pour en savoir plus, consultez la page des outils.

Blocages

La façon dont vous définissez votre bloc détermine la manière dont vous devez ajouter le nom du style. Pour en savoir plus sur les définitions de blocs, consultez notre page sur les blocs personnalisés. Vous allez attribuer à votre bloc l'un des styles de bloc que vous avez définis dans la propriété blockStyles du thème.

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 consiste à inclure options.theme dans votre appel d'injection. Vous pouvez fournir le thème au format JSON ou 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
   })
}

Vous trouverez plus d'informations sur les options sur la page de configuration. 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 utilise un mappage de teintes ou de valeurs hexadécimales pour calculer les couleurs secondaires et tertiaires correspondantes. Vous trouverez le script dans le dossier scripts/themes.

Thèmes intégrés

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

Nous proposons également: