Обзор тем

Примечание

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

В этой статье вы познакомитесь с функцией базовых тем. Для расширенной настройки темы см. Изменить CSS.

Включение базовых тем для существующих порталов

  1. Выполните вход в Power Apps.

  2. Выберите Приложения в левой области навигации, а затем выберите портал.

    Выберите приложения и портал.

  3. Выберите Дополнительные команды (...), затем выберите Правка.

    Редактировать портал.

  4. Выберите Темы на левой панели навигации, а затем включите Включить базовую тему.

    Включить базовые темы.

Изменение темы для портала

Вы можете установить любую существующую тему на портале в качестве темы по умолчанию.

  1. Выполните вход в Power Apps.

  2. Выберите Приложения в левой области навигации, а затем выберите портал.

  3. Выберите Дополнительные команды (...), затем выберите Правка.

  4. Выберите Тема в области компонентов.

    Выберите значок темы.

  5. Выберите любую тему по умолчанию из доступных предустановок (в нашем примере мы выбрали зеленую).

    Выбор темы по умолчанию.

Выбранная тема будет применена к порталу.

Примененная тема.

Примечание

После изменения темы или свойств темы, таких как цвета, внутри студии, выберите Обзор веб-сайта для просмотра изменений в отдельной вкладке браузера. Если вы вносите несколько изменений с помощью этого метода и переключаетесь на разные страницы внутри браузера, устаревший кеш браузера может привести к тому, что ваш браузер покажет изменения темы, которые не являются последними. Если это произойдет, используйте Ctrl+F5, чтобы перезагрузить страницу.

Создание новой темы

  1. Выполните вход в Power Apps.

  2. Выберите Приложения в левой области навигации, а затем выберите портал.

  3. Выберите Дополнительные команды (...), затем выберите Правка.

  4. Выберите Тема в области компонентов.

  5. Выберите Создать тему.

    Создание новой темы.

Изменение сведений о теме

Вы можете изменить название темы, описание, цвет и другие параметры оформления в Power Apps Studio.

  1. Выполните вход в Power Apps.

  2. Выберите Приложения в левой области навигации, а затем выберите портал.

  3. Выберите Дополнительные команды (...), затем выберите Правка.

  4. Выберите Тема в области компонентов.

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

    Сведения о теме.

  6. Отредактируйте сведения о теме, такие как имя, описание и цвет для разных областей.

    Параметр цвета Затронутая область
    Основной Цвета кнопок и ссылок.
    Заголовок Цвет фона верхнего колонтитула.
    Текст меню верхнего колонтитула Цвет текста меню верхнего колонтитула.
    Цвет меню верхнего колонтитула при наведении Цвет фона пунктов меню, когда на них наведен курсор.
    Фон основного текста Цвет фона раздела тела.
    Цвет фона нижнего колонтитула Цвет фона нижнего колонтитула.
    Текст нижнего колонтитула Цвет текста в нижнем колонтитуле.
  7. Сохраните и опубликуйте изменения.

Копирование предустановленной темы

  1. Выполните вход в Power Apps.

  2. Выберите Приложения в левой области навигации, а затем выберите портал.

  3. Выберите Дополнительные команды (...), затем выберите Правка.

  4. Выберите Тема в области компонентов.

  5. Выберите тему из предустановок, которую вы хотите скопировать, выберите ..., а затем выберите Настроить.

    Копирование предустановленной темы.

  6. Обновите сведения о теме, как описано в предыдущем разделе, а затем сохраните тему.

Переменные Sass

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

Например, если вы хотите, чтобы цвет верхнего колонтитула был на 25 процентов светлее, чем Основной цвет, вы можете использовать следующее значение вместо определенного цвета:

lighten($primaryColor, 25%);

Пример Sass.

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

Параметр цвета Имя переменной Sass
Основной $primaryColor
Заголовок $headerColor
Текст меню верхнего колонтитула $headerMenuTextColor
Цвет меню верхнего колонтитула при наведении $headerMenuHoverColor
Фон основного текста $bodyBackground
Цвет фона нижнего колонтитула $footerColor
Текст нижнего колонтитула $footerTextColor

Порядок переменной Sass

Переменные Sass работают сверху вниз. Вы можете задать цвет Верхнего колонтитула как lighten($primaryColor, 25%);. Но вы не можете задать цвет Основной как lighten($headerColor, 25%);, потому что Верхний колонтитул ниже Основной в списке вариантов цвета.

Соображения, связанные с базовыми темами

  • У вас не может быть двух тем с одинаковым именем или именем файла темы.
  • Любое значение цвета, которое вы вводите вручную, должно соответствовать действительному цвету.
  • Изменение CSS для предустановленных тем не поддерживается.
  • Рекомендуемое соотношение контрастности цвета переднего плана и фона для специальных возможностей составляет 4,5:1.

Дальнейшие действия

Редактировать тему CSS

См. также

Студия порталов Power Apps
Создание веб-страниц и управление ими
Редактор WYSIWYG

Примечание

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).