Как работает тематизация EUI

EUI можно легко настроить с помощью переопределения глобальных переменных стиля. В настоящее время мы поддерживаем следующие темы:

• theme_light (стандартная тема EUI);
• theme_dark (та же тема, но в тёмном оформлении);
• theme_amsterdam_light (следующая итерация светлой темы EUI);
• theme_amsterdam_dark (следующая итерация тёмной темы EUI).

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

Как создать и протестировать тему

Настройте Sass

1. Создайте каталог src/themes/my_theme_name/.
2. Добавьте в эту папку любые файлы .scss, которые вам нужны для вашей темы (например, src/themes/my_theme_name/my_theme_color.scss).
3. Скопируйте файл src/theme_light.scss и назовите его src/my_theme_name.scss.
4. Импортируйте свои переменные в начало этого файла, убедившись, что глобальные переменные и компоненты загружаются после него.

// Эти переопределения переменных используются только для этой темы.
@import 'themes/my_theme_name/my_them_name_sizes';
@import 'themes/my_theme_name/my_theme_name_colors';

// Глобальный стиль
@import 'global_styling/index';

// Компоненты
@import 'components/index';

Сделайте свою тему доступной в документации

Наконец, убедитесь, что ваша тема включена в файл /src-docs/index.js, чтобы она была доступна через селектор тем.

Советы по тематизации

Изменяйте как можно меньше переменных. По своей природе EUI очень жёсткий. Вам не нужно много делать, чтобы кардинально изменить цвет. Большинство тем содержат менее дюжины переопределений переменных.

• Как правило, следует переопределять только переменные, содержащиеся в папке src/global_styling.
• Не изменяйте отдельные переменные компонентов или имена классов. Хотя это, безусловно, возможно, компоненты гораздо более подвержены изменениям, и вы рискуете нарушить работу вашей темы.