Руководство по темам

Обзор

MDC Web включает в себя систему темирования, предназначенную для удобного изменения цветов вашего приложения. Она предоставляет несколько вариантов реализации тем, обеспечивая максимальную гибкость. В настоящее время MDC Web поддерживает темирование с использованием Sass и CSS Custom Property, а также планирует поддержку CDN, как только эта услуга станет доступной.

Цвета

Система темирования MDC Web, как и в Material Design, использует два основных цвета: основной и вторичный. Основной цвет используется в большинстве компонентов и элементов приложения, являясь основным цветом вашего приложения. Вторичный цвет используется для плавающих кнопок действий и других интерактивных элементов, служа визуальным контрастом к основному цвету.

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

Кроме того, MDC Web имеет несколько цветов текста, которые используются для отображения текста и других форм на фоне основного, вторичного и фона. Эти цвета определяются как светлые или темные, чтобы обеспечить достаточный контраст с фоном, и имеют разные уровни прозрачности в зависимости от использования:- Основной, используется для большинства текста.

• Вторичный, используется для текста, который находится ниже в визуальной иерархии.
• Подсказка, используется для текстовых подсказок (например, в полях ввода и метках).
• Отключенный, используется для текста в отключенных компонентах и контенте.
• Иконка, используется для иконок.
• На поверхности, используется для текста, который находится на фоне цвета поверхности.
• На вторичном, используется для текста, который находится на фоне вторичного цвета.
• На основном, используется для текста, который находится на фоне основного цвета.

Создание темированного приложения

Давайте начнем с простого приложения, которое отображает несколько карточек для различных категорий. В конечном итоге мы хотим, чтобы каждая карточка имела цветовую схему, соответствующую своей категории, но сначала мы начнем с темирования по умолчанию, предоставляемого MDC Web.

Вы можете посмотреть конечный результат здесь, но давайте начнем с нуля.

Примечание: В этом руководстве мы не будем рассматривать базовые аспекты запуска проекта MDC Web, поэтому, пожалуйста, обратитесь к руководству по началу работы, если вам требуется дополнительная информация.

Шаг 1: Без теминга```html

  .element-card {
    width: 20em;
    margin: 16px;
  }
</style>

Выберите ваш элемент