Давайте определим наши темы в новом Enum:
Теперь нам нужны некоторые ресурсы, мы создадим colors.scss, fonts.scss, mixins.scss, variables.scss, themes.scss в папке с ресурсами.
Давайте начнем с цветов и шрифтов, которые мы хотим использовать в нашем приложении:
Теперь мы создаем файл variables.scss, в котором мы определяем переменные для каждой темы, которую хотим использовать:
Как видите, вы можете установить переменные цвета, переменные шрифта или даже URL-адрес фонового изображения.
Чтобы использовать эти переменные темы в проекте, нам нужно создать spread-map с помощью scss mixin:
теперь давайте создадим все наши переменные в корневом классе, чтобы все остальные наши классы знали переменные:
Хорошо… теперь у нас есть все наши ресурсы/активы. Давайте реализуем тематический сервис, который может менять тему приложения:
При установке новой темы мы хотим удалить старую. Реализация removeClasses() очень проста, из наших классов документов мы удаляем выбранный с помощью функции remove(). Функция addClasses() будет реализована почти так же, просто используйте функцию add() вместо remove(). Эти два метода могут быть приватными, потому что для изменения темы мы будем использовать нашу общедоступную функцию с именем setTheme(), где параметром будет наше перечисление Theme. >. В этой функции мы удаляем старую тему, добавляем новую и устанавливаем общедоступный атрибут класса currentTheme, чтобы все остальные классы могли знать, какая тема используется.
И это почти все. Но не забудьте установить какую-либо тему по умолчанию в styles.scss, а также импортировать themes.scss, потому что нет переменных для тем будет создан. Вот как выглядит мой файл styles.scss:
Теперь я могу менять темы везде, где добавляю theming.service.ts. Вот пример использования:
Аааа.. вот как это выглядит:
Надеюсь, вам понравится, если вы хотите увидеть исходный код, вот ссылка на GitHub:
