Разработка элегантной цветовой схемы для вашего мобильного приложения может занять много времени. Почему бы не позволить пользователю выбрать свою любимую тему?

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

В этом посте Medium мы будем работать над проектом, в котором будет несколько тем, которые пользователь может выбрать во время выполнения, как указано выше. Когда тема выбирается пользователем, в идеале это изменение должно происходить в режиме реального времени, а не требовать от пользователя повторного открытия приложения.

Установка и начало работы

Ionic, если вы не использовали его раньше, - это платформа для мобильных приложений, которая позволяет писать мобильные приложения на HTML, CSS и Typescript. С помощью одной общей кодовой базы вы можете разработать приложение для iOS или Android или развернуть его как веб-приложение.

Чтобы установить Ionic, откройте терминал и введите:

npm install -g ionic@latest

Примечание: у вас должны быть установлены Node JS и npm. Если вы получаете сообщение об ошибке с кодом EACCES, вам могут потребоваться права sudo или администратора.

Для этого урока шаблон бокового меню является хорошей отправной точкой. Чтобы сгенерировать проект с этим шаблоном, введите эту команду в терминал:

ionic start <name of your app> sidemenu

После создания проекта перейдите в каталог с:

cd <name of your app>

Теперь у вас есть проект Ionic с боковым меню и двумя страницами, готовыми к работе! Чтобы увидеть свое творение, введите ionic serve в свой терминал.

Настройка первых двух тем: Todoist Red vs Noir

Чтобы настроить первые две темы, нам нужно выполнить ряд шагов. Практически все эти шаги необходимо выполнить, чтобы темы заработали.

Во-первых, нам нужно указать файл SCSS, который будет использоваться при применении темы. В каталоге src/theme вашего проекта вы найдете variables.scss. Здесь также находятся соответствующие файлы тем. Создайте новый файл с именем:

red.theme.scss

Этот файл будет использоваться для применения первой темы. Из этого файла можно переопределить любой ионный стиль по умолчанию. Есть два варианта применения тем:

Вариант 1. Стилизация только панели навигации и определенных элементов

Вариант 2. Применение темы ко всему фоновому контенту

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

Это первый созданный файл SCSS! Далее будет темный режим. Создайте еще один новый файл с именем:

noir.theme.scss

Этот файл будет использоваться для применения второй темы. Чтобы вторая тема работала, нам не нужно ничего особо менять, кроме изменения значений шестнадцатеричного кода на такой цвет, как #33333.

Однако важно отметить, что нам нужно будет переименовать класс SCSS с theme-red во что-то уникальное для этой темы. Я назову свой theme-noir.

Следующим шагом будет импорт файлов SCSS в само приложение. Это важно, иначе тема не загрузится в приложение. Перейдите в app.scss файл, расположенный по адресу src/app/app.scss, где вы можете импортировать тему следующим образом:

@import '../theme/red.theme';
@import '../theme/noir.theme';

Теперь, когда мы создали и импортировали файлы темы в проект, мы позаботились о SCSS! Теперь о машинописном тексте и HTML.

Программное изменение темы

Для изменения самой темы потребуется всего три дополнительных шага для простой настройки:

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

Класс AppState

Класс AppState будет внедряемым компонентом Angular, который содержит текущую тему, и который также может использоваться для обновления темы.

Нет ничего особенного в том, как это работает, кроме того, что у него есть внутренняя переменная состояния. Когда вызывается операция Get, возвращается клон состояния. Когда происходит Set, свойство состояния обновляется новым значением, в данном случае темой.

AppState будет содержать текущую тему и разрешать модификацию, но ее нужно будет импортировать в компонент, с которым вы хотите ее использовать.

При первой настройке приложения Ionic с помощью интерфейса командной строки вы найдете в app.component.ts следующий код:

// used for an example of ngFor and navigation
this.pages = [
{ title: 'Default Red Theme', component: HomePage },
{ title: 'List', component: ListPage }
];

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

Измените значения в this.pages, чтобы отразить имена тем, которые вы хотите, чтобы пользователь видел (например, файл темы, который будет применен, и любые другие ресурсы, например файлы изображений).

В этом примере «файл темы» будет именем класса CSS, который мы хотим использовать. К моменту запуска приложения мы уже импортировали файлы SCSS. Поэтому вместо доступа к самому файлу мы обращаемся к корневому классу в этом файле. В случае красной темы будет применен класс «тема-нуар».

Отображение доступных тем и применение оболочки

Последний шаг, который нам нужно сделать, - это добавить обертку div. Это будет элемент верхнего уровня в файле app.html. К этой оболочке будет применена выбранная тема, что позволит дочерним элементам также получать обновления стиля. Пример этого в app.html будет выглядеть так:

<!-- Wrapper over the app which will use the theming-->
<div class="{{global.state['theme']}}">
    //in here you will have the rest of app.html 
</div>

Что касается отображения, если вы следовали выше и переименовали массив this.pages в this.themes, чтобы он содержал ваши доступные темы, то вам не нужно ничего менять для отображения!

Боковое меню изначально использовалось для перехода к доступным страницам в приложении, но теперь это отличный переключатель тем. Имена каждой доступной темы отображаются с помощью NgFor и некоторой привязки данных с массивом this.themes. В результате получится очень простой список, в котором будет указано название темы для каждой записи. При щелчке по записи будет применена эта тема.

На репозитории Github вы можете найти лучший пример с цветным индикатором рядом с каждой записью.

Резюме

Хорошо, время для быстрого обзора того, что мы здесь сделали. На данный момент мы внесли следующие изменения, чтобы тема работала:

  • Созданы файлы SCSS для каждой желаемой темы.
  • Импортировал созданные файлы темы в основной файл Sass, расположенный по адресу src/app/app.scss
  • Настройте класс AppState, чтобы указать, какая тема применяется в данный момент.
  • Настройте очень маленькую функцию changeTheme, которая установит новую тему в AppState.
  • Добавлен элемент оболочки поверх app.html, к которому будет применена тема

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

С помощью этих пяти шагов вы можете создать динамическую тематику в любом приложении Ionic. Прелесть решения в том, что оно хорошо работает на всех платформах, поскольку не использует собственных плагинов - все в HTML, CSS и TS.

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

Заключение:

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

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

Весь исходный код этого руководства можно найти в этом репозитории Github.

Пожалуйста, подумайте о том, чтобы оставить звезду на репо. Я приветствую любые дополнения.