Поделиться через

Использование цветов темы в настройках SharePoint Framework

  • Статья

При создании настроек SharePoint Framework следует использовать цвета темы, чтобы настройки сочетались с дизайном сайта. В этой статье показано, как ссылаться на цвета темы контекстного сайта в решении SharePoint Framework.

Примечание.

В этой статье в качестве примера используется клиентская веб-часть SharePoint Framework, но описанные способы применимы ко всем типам настроек SharePoint Framework.

Фиксированные цвета или цвета темы?

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

Клиентская веб-часть SharePoint Framework, использующая синюю цветовую схему, на современном сайте группы с красной темой

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

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

Использование цветов темы в SharePoint Framework

Работая с фиксированными цветами, вы указываете их в свойствах CSS, как показано в примере ниже.

.button {
  background-color: #0078d7;
}

Чтобы вместо этого использовать цвет темы, замените фиксированный цвет на маркер темы:

.button {
  background-color: "[theme: themePrimary, default: #0078d7]";
}

Когда настройка SharePoint Framework загружается на страницу, пакет @microsoft/load-themed-styles, являющийся частью SharePoint Framework, будет искать маркеры темы в файлах CSS и пытаться заменить их соответствующим цветом из текущей темы. Если значение для указанного маркера недоступно, SharePoint Framework использует значение, указанное с помощью стандартного параметра, поэтому важно, чтобы оно всегда было включено.

Использование цветов темы в настройках

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

Примечание.

Указанные ниже инструкции относятся к клиентской веб-части SharePoint Framework HelloWorld, созданной с помощью React. Для веб-частей, созданных с помощью других библиотек и типов настроек, может потребоваться соответствующая корректировка изменений.

Использование цветов темы

  1. В редакторе кода откройте файл ./src/webparts/helloWorld/components/HelloWorld.tsx и из DIV с классом ms-Grid-row удалите класс ms-bgColor-themeDark.

    Класс

  2. В этой же папке откройте файл HelloWorld.module.scss. Измените селектор .row на следующий:

    .row {
  padding: 20px;
  background-color: "[theme: themeDark, default: #005a9e]";
}

    Область выделения строки, дополненная цветом фона

  3. В селекторе .button замените свойства background-color и border-color указанными ниже:

    .button {
  /* ... */
  background-color: "[theme: themePrimary, default: #0078d7]";
  border-color: "[theme: themePrimary, default: #0078d7]";
  /* ... */
}

    Селектор .button обновлен с использованием цветов темы

  4. При добавлении веб-части на сайт цвета, используемые веб-частью, автоматически адаптируются к цветам темы, используемым на текущем сайте.

    Параллельное представление одной и той же веб-части, отображаемой на двух сайтах с использованием разных цветов; веб-часть соответствует цветовой схеме каждого веб-сайта

Поддержка фона разделов

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

Веб-часть без поддержки вариантов темы использует белый фон независимо от выбранного цвета фона раздела.

настройка без поддержки варианта темы

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

настройка с поддержкой вариантов темы

Доступные маркеры темы и их вхождения

В контексте современных сайтов SharePoint значения, связанные с маркерами тем, имеют многочисленные вхождения в интерфейсной части, системной странице и пользовательском интерфейсе веб-части SharePoint. Чтобы наилучшим образом согласовать ваши настройки с общим внешним видом, следует рассмотреть возможность использования соответствующих жетонов тем.

Вы можете использовать следующие маркеры темы:

Примечание.

Значения по умолчанию ниже соответствуют значениям по умолчанию на современном сайте группы при использовании красной палитры.

Маркер По умолчанию Примечания
themeDark #7c1d21 Некоторые кнопки нажимают и цвет ссылки (например, «Вернуться к классическому SharePoint»). Значок заголовка «Подписаться» в заголовке, если используется третий цвет фона заголовка. Системные страницы: кнопка ОК, граница и наведение.
themeDarkAlt #932227 Множество значков (например, в панели команд), некоторые границы, наведение кнопок / ссылок, фон вращающегося элемента, фокус элемента диапазона, наведение фона флажка, веб-части и списки, наведение кнопки, фокус элемента диапазона, добавление значка веб-части в третьем разделе цвет фона выбран.
themeDarker #5b1519 Наведите курсор на цвет для некоторых ссылок. Системные страницы: Цвет посещенной ссылки.
themeLight #e3afb2 Выбор диапазона наведения и фокусировка фона. Загрузка цвета фона счетчика в режиме просмотра содержимого сайта.
themeLighter #f0d3d4 Цвет фона меню навигации, добавьте цвет фона панели веб-частей, цвет фона изображения в некоторых веб-частях при выборе параметра цвета фона третьего раздела. Системные страницы: Навигация при наведении фона, кнопка отмены при наведении фона.
themeLighterAlt #fbf4f4 Один из вариантов фона раздела. Cogwheel меню наведения фона в представлении содержимого сайта.
themePrimary #a4262c Некоторые фоны кнопок и флажков, ссылки, тексты, границы и значки, значки и ссылки. Также цвет фона нижнего колонтитула и один из вариантов фона раздела. Системные страницы: фон кнопки ОК, текстовые ссылки.
themeSecondary #ae383e Текст панели набора в просмотре содержимого сайта. Наведите курсор на цвет для некоторых ссылок. Цвет фона изображения в некоторых веб-частях при выборе цвета фона четвертого раздела. Второй цвет в значке палитры в «Изменение панели внешнего вида» (отсюда и название токена)
themeTertiary #c86c70 Добавьте значок веб-части, если выбран четвертый цвет фона. Третий цвет в значке палитры в «Изменение панели внешнего вида» (отсюда и название токена)
neutralDark #212121 Некоторые кнопки, ссылки и границы наведения текста, некоторые значки. Системные страницы: страницы хлебных крошек, заголовки текстов.
neutralLight #eaeaea Некоторые границы веб-части, указатель действий на панели команд, фон панели команд при выборе элемента списка, фон заголовка категории представления списка при выборе элемента, указатель кнопки. Системные страницы: фон вкладки ленты, граница кнопки «ОК», фон выбранного элемента навигации, отключенная граница текстового поля. Разделительная веб-часть. Цвет фона изображения в некоторых веб-частях, если выбран параметр цвета фона второго раздела.
neutralLighter #f4f4f4 Некоторые фоны меню (например, панель команд), выбранный левый элемент навигации, некоторые фоны кнопок, одна опция для цвета фона раздела.
neutralLighterAlt #f8f8f8 Левый навигационный фон при наведении, фон текста информационной панели списка, цвет фона изображения в некоторых веб-частях при выборе цвета фона первого раздела, некоторые значки и тексты при редактировании веб-частей. Системные страницы: фон кнопки «Отмена», фон текстового поля отключен.
neutralPrimary #333333 Текст заголовка сайта, тексты в меню навигации, панель команд, кнопки и веб-части, фон значков, связанных с веб-частью, когда страница находится в режиме редактирования, добавление значков и текста панели веб-частей, текст панели настроек веб-части. Системные страницы: цвет стрелки выпадающего меню, некоторые тексты.
neutralPrimaryAlt #3c3c3c Фон панели сюжета в представлении содержимого сайта.
neutralSecondary #666666 Некоторые тексты меню, пустой текст библиотеки, некоторые фоны при наведении иконки, некоторые тексты в веб-частях, стрелки на панели команд, селектор диапазона. Системные страницы: цвет ссылки, некоторые значки и границы.
neutralTertiary #a6a6a6 Некоторые тексты кнопок, некоторые заголовки веб-частей, некоторые тексты настроек веб-частей, некоторые значки веб-частей, наведение курсора в некоторых веб-частях, пунктирная граница раздела в режиме редактирования, граница панели управления настройками веб-части. Наиболее заметно при редактировании веб-частей. Системные страницы: текстовое поле, раскрывающийся список и цвет рамки кнопки.
neutralTertiaryAlt #c8c8c8 Некоторые тексты, например, на панели свойств веб-части, некоторые значки в веб-частях, фон селектора диапазона, некоторые кнопки на фоне щелчка мышью, фон управления переключением да / нет, изменение границы настройки цвета фона раздела.
neutralQuaternary #d0d0d0 Фон панели команд при наведении фона, когда выбран элемент списка. Системные страницы: Границы
black #000000 Текст раскрывающегося списка параметров веб-части, элементы управления карусели, наведите указатель мыши на текст вкладки содержимого сайта, текст панели "Изменить внешний вид".
white #ffffff Основной фон тела, фон ввода поиска, некоторый текст кнопки, текст навигации концентратора, если выбран фон заголовка themePrimary, один из доступных цветов фона раздела. Системные страницы: Фон основного текста
neutralQuaternaryAlt #dadada Значок «Информация» и фон выбранного эллипса в списках, фоны некоторых элементов веб-части в режиме редактирования, фон выпадающего элемента панели свойств веб-части, фон выбранного элемента списка.
accent* #ca5010 Четвертый цвет в палитре на панели «Изменить внешний вид».
whiteTranslucent40* "rgba(255,255,255,.4)" Закрывает остальную часть страницы, когда модальный диалог открыт.
blackTranslucent40* "rgba(0,0,0,.4)" Охватывает оставшуюся часть страницы в определенных состояниях модальных диалоговых окон, например при развертывании диалогового окна поиска веб-частей
backgroundOverlay* (пусто) Основной фон содержимого сайта, некоторые границы, т.е. между центром и навигацией по сайту
primaryBackground* #ffffff Некоторые фоны при редактировании настроек веб-части, некоторые фоны текстового поля

*Не входит в генератор тем.

Вхождение маркеров темы в пользовательском интерфейсе SharePoint зависит от выбранных цветов фона (т. е. маркер темы white используется для ссылок навигации заголовка, если выбран темный фон заголовка, в противном случае используется neutralSecondary). Для получения дополнительной информации см. раздел Дизайн фона» с использованием семантических слотов.

Примечание.

В SharePoint Framework зарегистрировано больше токенов, хотя только подмножество, упомянутое выше, может быть назначено в пользовательских темах на современных сайтах SharePoint (остальные генерируются автоматически механизмом тем). Полный список доступных маркеров см. в значении свойства window.__themeState__.theme (используйте консоль в средствах разработчика веб-браузера).

Настройка цвета темы

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

См. также