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 dans la div d'injection. Cela permet aux utilisateurs de modifier l'apparence de tous les composants non compatibles via CSS. Notre objectif principal 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 indicateur indiquant si ou non utiliser des chapeaux pour les blocs de début.

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 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 la couleur primaire, secondaire et tertiaire

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 à colourPrimary pour la majorité des blocs de la catégorie. Les utilisateurs peuvent ainsi facilement voir à quels blocs 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 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 des composants

Un thème peut définir la couleur ou la valeur des composants suivants:

  • 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é déroulant
  • flyoutOpacity: opacité du pop-up
  • 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 de 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é en mode de navigation au clavier

Vous pouvez modifier la plupart des autres composants en utilisant le nom du thème dans votre CSS. Toutefois, si vous souhaitez modifier un composant qui ne figure pas encore 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 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 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, procédez 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. 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 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 bloc et de catégorie.

Catégories

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

Blocs

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

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Définir votre thème

Vous devez également indiquer à Blockly quel 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
   })
}

Pour en savoir plus sur ces options, consultez la page de configuration. Si aucun thème n'est fourni, le thème classique est 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 création de styles de bloc

Blockly fournit un script qui reçoit une carte de teintes ou de valeurs hexadécimales et calcule les couleurs secondaires et tertiaires. 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 daltonisme:

Nous proposons également: