Темы

Темы — это способ настроить внешний вид Blockly. Вы можете настроить цвета блоков, цвета категорий и некоторых компонентов с помощью класса Themes . Если вы хотите настроить дополнительные компоненты, мы предоставляем имя темы в виде класса в div-инъекции. Это позволяет пользователям изменять внешний вид любых неподдерживаемых компонентов с помощью CSS. Наша главная цель при создании тем — дать разработчикам возможность создавать более доступные возможности Blockly.

Примечание. Если вы хотите управлять только основным цветом блока, а не более детально контролировать его внешний вид, вы можете установить цвет в определении блока вместо создания темы. Если вы хотите изменить форму блока, а не его цвет, узнайте больше о средствах визуализации .

Свойства темы

Тема — это объект с несколькими свойствами: базовая тема для расширения, объект стиля для блоков, категорий, компонентов и шрифтов, а также возможность использования заглавных букв для начальных блоков.

Важно: код в Blockly использует неамериканское написание colour . Все свойства цвета могут быть определены либо в оттенках, либо в шестнадцатеричных значениях.

Блочный стиль

Стиль блока состоит из четырех полей:

• colourPrimary (обязательно) — цвет фона блока.
• colourSecondary (необязательно) — цвет фона, если блок является теневым.
• colourTertiary (необязательно) — цвет рамки или выделения блока.
• hat (необязательно) — добавляет шляпу к блоку, если установлено значение cap . Узнайте больше о шляпах .

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

Тема будет включать в себя сопоставление имени стиля блока с объектом стиля блока:

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

Категория Стиль

Стиль категории содержит только свойство цвета.

• Цвет (обязательно) — цвет категории на панели инструментов. Обычно эти цвета должны совпадать с colourPrimary большинства блоков в категории. Это позволяет пользователям легко определить, какие блоки относятся к определенной категории.

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

Тема будет включать в себя сопоставление имени категории с объектом стиля категории:

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

Стили компонентов

Тема может устанавливать цвет или значение следующих компонентов:

• workspaceBackgroundColour : цвет фона рабочей области.
• toolboxBackgroundColour : Цвет фона панели инструментов.
• toolboxForegroundColour : Цвет текста категории панели инструментов.
• flyoutBackgroundColour : Цвет фона всплывающего окна.
• flyoutForegroundColour : Цвет текста метки всплывающего окна.
• flyoutOpacity : Непрозрачность всплывающего окна.
• scrollbarColour : цвет полосы прокрутки.
• scrollbarOpacity : Непрозрачность полосы прокрутки.
• insertionMarkerColour : цвет маркера вставки (не принимает названия цветов).
• insertionMarkerOpacity : Непрозрачность маркера вставки.
• markerColour : цвет маркера, отображаемого в режиме навигации с помощью клавиатуры.
• cursorColour : цвет курсора, отображаемого в режиме навигации с помощью клавиатуры.

Большинство других компонентов можно изменить, используя имя темы в CSS. Однако, если есть компонент, который вы хотели бы изменить, но который еще не входит в этот список и не может быть изменен с помощью CSS, сообщите о проблеме с дополнительной информацией.

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

Стили шрифтов

Стиль шрифта — это объект, который содержит семейство, вес и размер шрифта.

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

Старт Шапки

Совет: Узнайте больше о вариантах использования стартовых шапок на нашей странице парадигм блоков .

Если вы установите startHats: true непосредственно в объекте темы, шляпа будет добавлена ​​ко всем блокам без каких-либо предыдущих или выходных соединений. Если вам нужен больший контроль над тем, какие именно блоки получат шляпу, вы можете вместо этого использовать свойство стиля блока .

Пользовательские темы

Чтобы добавить тему в приложение Blockly, вам необходимо сделать следующее:

1. Создать тему
2. Добавьте названия стилей
3. Установите свою тему в рабочей области

Создать тему

Тему можно создать с помощью конструктора или с помощью defineTheme . Использование defineTheme позволяет легко расширить уже существующую тему и установить все значения с помощью одного объекта. Тема имеет имя и представляет собой объект со стилями блоков, стилями категорий и другими свойствами, как описано выше.

Тема также может иметь базовую тему, которая будет предоставлять значения по умолчанию для любых значений, не указанных в пользовательской теме.

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

Вот пример использования defineTheme .

Добавить имена стилей

Теперь, когда мы создали тему, нам нужно добавить названия стилей к определениям блоков и категорий.

Категории

То, как вы определяете свой набор инструментов, определяет, как вам нужно добавить имя стиля. Дополнительную информацию смотрите на странице панели инструментов .

Блоки

То, как вы определяете свой блок, определяет, как вам нужно добавить имя стиля. Дополнительную информацию об определениях блоков можно найти на нашей странице пользовательских блоков . Вы присвоите своему блоку один из стилей блоков, которые вы определили в свойстве blockStyles темы.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Установите свою тему

Вам также необходимо указать Blockly, какую тему использовать. Определив несколько тем, которые используют один и тот же стиль блока и имена категорий, вы можете позволить пользователю выбрать тему, которая лучше всего подходит для него, и динамически изменять ее без необходимости изменять сами определения блоков.

Начальная тема

Лучший способ установить исходную тему — включить options.theme в вызов инъекции. Вы можете предоставить тему в формате JSON или 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
   })
}

Более подробную информацию об опциях можно найти на нашей странице конфигурации . Если тема не указана, по умолчанию будет использоваться классическая тема .

Динамические темы

Если вы хотите динамически изменить свою тему (например, в случае, если пользователям разрешено выбирать тему из раскрывающегося меню), вы можете вызвать yourWorkspace.setTheme(theme) .

Создать скрипт стилей блоков

Blockly предоставляет скрипт, который принимает карту оттенков или шестнадцатеричных значений и рассчитывает для них вторичные и третичные цвета. Скрипт можно найти в папке scripts/themes .

Встроенные темы

Blockly предоставляет ряд тем для доступности, в частности, определенные типы нарушений цветового зрения:

• Высокий контраст
• Дейтеранопия/Протанопия
• Тританопия

У нас также есть:

• Классическая тема
• Современный
• Темный режим