Зачем это

У API несколько сценариев использования:

  • получить текущую тему shell;
  • получить список тем;
  • получить конкретную тему (детализацию) из списка тем
  • создать (временную) тему прямо из плагина, а не просить пользователя руками забивать цвета;
  • переключить текущую тему UI;
  • удалить тему.

В результате мы имеем практически полноценный CRUD и ротацию тем оформления.

В рамках демонстрации функционала, добавлено несколько стандартных тем оформления:

  • light
  • dark
  • brand
Светлая, тёмная и фирменная тема MinaChan
Наглядное отображение светлой, темной и фирменной темы.

Что есть в API

В shell зарегистрированы шесть runtime-команд:

  • ui:theme-current
  • ui:theme-list
  • ui:theme-get
  • ui:theme-add
  • ui:theme-delete
  • ui:theme-activate

Пример запроса ui:theme-get:

{
  "id": "Brand"
}

Пример ответа ui:theme-get:

{
  "theme": {
    "id": "brand",
    "name": "Brand",
    "brightness": "dark",
    "builtIn": true,
    "colors": {
      "background": "#0B0F19",
      "surface": "#1A1330",
      "primary": "#B794F4",
      "secondary": "#FF9CF1",
      "text": "#EDE7FF",
      "hint": "#9CA3AF",
      "appBarBackground": "#0B0F19",
      "outline": "#43375F"
    }
  }
}

Создание своей темы

Самый приятный сценарий у нового API не чтение, а запись. Плагин теперь может принести в MinaChan свою тему, а потом сразу активировать её.

Payload для ui:theme-add:

{
  "name": "Night Shift",
  "id": "night-shift",
  "brightness": "dark",
  "colors": {
    "background": "#0B1020",
    "surface": "#151B2F",
    "primary": "#7DD3FC",
    "secondary": "#C084FC",
    "text": "#E6EEF8",
    "hint": "#94A3B8",
    "appBarBackground": "#0A0F1D",
    "outline": "#334155"
  }
}

После успешного ответа можно сразу переключиться используя ui:theme-activate:

{
  "themeId": "night-shift"
}

Что прилетает в UI-окна

Если плагин работает через gui:set-panel и ui:window-create, в state прилетают поля примерно такого вида:

{
  "shellTheme": "midnight-rose",
  "shellThemeData": {
    "id": "midnight-rose",
    "name": "Midnight Rose",
    "brightness": "dark",
    "builtIn": false,
    "colors": {
      "background": "#0B0F19",
      "surface": "#1A1330",
      "primary": "#B794F4",
      "secondary": "#FF9CF1",
      "text": "#EDE7FF",
      "hint": "#9CA3AF",
      "appBarBackground": "#0B0F19",
      "outline": "#43375F"
    }
  }
}

Послесловие

Моя главная задумка заключалась в том, чтобы дать возможность гибко настраивать цветовые палитры для тем, обмениваться ими, возможно применять какие-то ИИ-шные штуки для наведения марофета.