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 surcap
. En savoir plus sur les chapeaux
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.
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 travailtoolboxBackgroundColour
: couleur d'arrière-plan de la boîte à outilstoolboxForegroundColour
: couleur du texte de la catégorie de la boîte à outilsflyoutBackgroundColour
: couleur d'arrière-plan de la vue volanteflyoutForegroundColour
: couleur du texte du libellé de la fenêtre dynamiqueflyoutOpacity
: opacité de la fenêtre externescrollbarColour
: couleur de la barre de défilementscrollbarOpacity
: opacité de la barre de défilementinsertionMarkerColour
: couleur du repère d'insertion (n'accepte pas les noms de couleur)insertionMarkerOpacity
: opacité du repère d'insertionmarkerColour
: couleur du repère affiché en mode de navigation au claviercursorColour
: 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:
- Créer un thème
- Ajouter des noms de styles
- 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:
- Thème classique
- Moderne
- Mode sombre