Блог экспериментатора инженера-разработчика: Infanty.
Я пишу how-to статьи на редкие темы или статьи обзоры - для себя и тех кто со мной работает.
Блог существует при поддержке: "Оккупационных сил Марса".

Интеграцию с модулем Color проще всего рассмотреть на примере темы: bartik (папка темы расположена в директории: ./core/themes). Первым делом в папке темы создаётся подпапка: color и в ней файл: color.inc, следующего содержания:

<?php

// Массив со всеми настройками.
$info = array(
  // Объявляем все переменные-цвета.
  // Каждая переменная — поле для выбора цвета.
  // Имеют вид: 'ключ' => 'метка'.
  'fields' => array(
    'top' => t('Header background top'),
    'bottom' => t('Header background bottom'),
    'bg' => t('Main background'),
    'sidebar' => t('Sidebar background'),
    'sidebarborders' => t('Sidebar borders'),
    'footer' => t('Footer background'),
    'titleslogan' => t('Title and slogan'),
    'text' => t('Text color'),
    'link' => t('Link color'),
  ),

  // Объявляем базовые цветовые схемы (предустановленные).
  'schemes' => array(
    // Объявляем обязательную схему, которая будет использовать       
    // по-умолчанию, и от которой будет отталкиваться модуль Color.
    'default' => array(
      // Название цветовой схемы. Будет отображаться в списке всех схем.
      'title' => t('Blue Lagoon (default)'),
      // Задаем цвета для каждого ключа ($info['fields']).         
      // Цвет должен быть в HEX формате, начинаться с решетки 
      // и быть в нижнем регистре.
      'colors' => array(
        'top' => '#055a8e',
        'bottom' => '#1d84c3',
        'bg' => '#ffffff',
        'sidebar' => '#f6f6f2',
        'sidebarborders' => '#f9f9f9',
        'footer' => '#292929',
        'titleslogan' => '#fffeff',
        'text' => '#3b3b3b',
        'link' => '#0071B3',
      ),
    ),

    // Добавляем еще одну цветовую схему, но уже с нужными нам цветами.
    'firehouse' => array(
      'title' => t('Firehouse'),
      'colors' => array(
        'top' => '#cd2d2d',
        'bottom' => '#d64e4e',
        'bg' => '#ffffff',
        'sidebar' => '#f1f4f0',
        'sidebarborders' => '#ededed',
        'footer' => '#1f1d1c',
        'titleslogan' => '#fffeff',
        'text' => '#888888',
        'link' => '#d6121f',
      ),
    ),
  ),

  // Подключение CSS для интеграции с Color, из папки "css", в каталоге темы. 
  // CSS содержит вёрстку темы для которой нужно менять цвета.
  // Значения изменяемых цветов, должны совпадать с базовой цветовой схемой. 
  // Принцип работы Color в том, что берётся например первый цвет: #055a8e
  // из default. Далее в файле color.css ищется данный цвет и заменяется на 
  // указанное сейчас значение цвета в данном поле переменной-цвета.
  // Т.е. в цветовой схеме «default» не должно быть совпадающих цветов. 
  // Так же необходимо подключить эту CSS в файле admin_theme.libraries.yml.
  'css' => array(
    'css/colors.css',
  ),

  // Настройки ниже нужны модулю Color, даже если мы их не используем теме.

  // Файлы для копирования.
  'copy' => array(
    'logo.svg',
  ),

  // Объявление градиентов.
  'gradients' => array(
    array(
      'dimension' => array(0, 0, 0, 0),
      'direction' => 'vertical',
      'colors' => array('top', 'bottom'),
    ),
  ),

  // Файлы которые будут использоваться в превью.
  'preview_library' => 'admin_theme/color.preview',
  'preview_html' => 'color/preview.html',

  // Добавление файла логотипа в JavaScript для превью.
  '#attached' => [
    'drupalSettings' => [
      'color' => [
        'logo' => theme_get_setting('logo.url', 'admin_theme'),
      ],
    ],
  ],
); 

После этого из папки color, темы bartik копируем в аналогичную папку собственной темы файлы:

  • preview.html - содержит упрощённую вёрстку темы в "одном" HTML файле для отображения настройки цветов (так же не забываем сменить путь к логотипу в коде HTML);
  • preview.css - содержит стили для preview.html;
  • preview.js - содержит функционал для интеграции формы настройки цветов и превью.

Создаём файл colors.css в папке: "css" с нужными стилями и подключаем эту CSS в файле admin_theme.libraries.yml. В примере ниже, данная CSS подключена после уже существовавшего (и активированного в admin_theme.info.yml) CSS: custom.css.

 global-styling:
  version: 1.x
  css:
    theme:
      css/custom.css: {}
      css/colors.css: {}
      css/print.css: { media: print } 

Так же в файле admin_theme.libraries.yml подключаем preview.js объявленного в color.inc как: 'preview_library' => 'admin_theme/color.preview.

 color.preview:
  version: 1.x
  css:
    theme:
      color/preview.css: {}
  js:
    color/preview.js: {}
  dependencies:
    - color/drupal.color 

После чего можно сбросить кэш и перейти к настройке цветов темы на странице: http://.../admin/appearance/settings/admin_theme.