Использование цветов темы в настройках 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 по умолчанию используется фиксированная синяя палитра. Ниже приведены действия, которые необходимо выполнить, чтобы веб-часть использовала цвета темы.

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

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]";
     /* ... */
   }
   

   

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

   

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

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

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

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

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

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

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

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

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

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

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

См. также

• Темы и цвета SharePoint
• Проектирование фоновых разделов с использованием семантических слотов
• Фоны раздела SharePoint
• Использование цветов темы в веб-частях SPFX, Стефан Бауэр (разработка для Office, MVP)
• Как создать разноцветную тему для современного сайта SharePoint Online, Лаура Коккаринен (SharePoint PnP Core MVP)