Тематизация веб-приложения обычно включает замену таблиц стилей или перемещение классов CSS. Но что, если у вас есть одностраничное приложение? Это немного сложно, но EmberJS и SASS делают это невероятно простым.
Цели
Я хотел достичь двух основных целей:
Быстро меняйте темы
Вместо того, чтобы изменять цвета, шрифты и т. Д. Кода на лету, гораздо удобнее иметь эти стили, предварительно определенные в CSS.
Быть расширяемым
При представлении в виде надстройки Ember наша реализация должна позволять третьим сторонам легко добавлять свои собственные темы.
Как это работает
Эта реализация предполагает несколько вещей:
Основная часть работы по переключению тем выполняется службой тем и некоторыми миксинами SASS.
Давайте получим SASSy
Давайте сначала посмотрим на код SASS. Объявлена карта $ themes. Написано так, что в базе есть базовые темы и темы. Например, предположим, что у вас есть разные области вашего приложения для темы, но они все равно должны быть частью вашей общей темы (например, пространство имен):
- foo-primary
- foo-secondary
В этом примере foo - это базовая тема, а основная и вторичная - подтемы.
Свойства карты произвольны, но они являются тем, что вы позже будете использовать в CSS, что-то вроде API темы. Думайте об этом как о «для этого div.class-name используйте основной цвет фона».
Примечание. Мы будем использовать атрибут data-theme в тегах HTML. Я думал, что это чище, чем замена атрибутов класса, и цель ясна в разметке.
Вот суть функциональности SASS для переключения тем. Я скоро вернусь к его использованию.
Тематическая служба
Теперь давайте посмотрим на тематический сервис. Все, что будет использовать эту услугу, сможет:
- привязать к текущей теме
- установить базовую тему
- установить подтему
Тематическое оформление вашего приложения
Как вы определяете, когда темы меняются, зависит от вас. Но вот пример обмена темами на маршруте:
Выбор темы тоже зависит от вас. Предположим, у вас есть компонент. Вот пример использования службы тем:
Обратите внимание на две вещи:
- Ваш компонент внедряет службу тем
- В вашем шаблоне есть div с атрибутом data-theme, который привязан к theme.name.
При изменении свойства theme.name изменится и ваша тема данных.
Наконец, чтобы связать все это вместе, вам нужно стилизовать свой div с тем свойством, которое вы хотите. Например:
Релевантны только первые пару строк, остальные показывают, как будет выглядеть результирующий CSS.
Продление
В коде SASS он объединяет свойство $ theme-additional, если оно существует, с картой $ themes. Если бы этот код был доступен как надстройка, вы могли бы добавить свои собственные темы следующим образом:
- Создайте свою собственную карту темы с именем $ theme-additional.
- Убедитесь, что вы @import перед $ themes.
Заключение
Если вам это показалось интересным, вы нашли способ улучшить его или сделали с ним что-то классное, я хотел бы услышать об этом.
Вот пример переключения тем в действии:
Если вы хотите вживую увидеть переключение тем и изменить мир к лучшему, почему бы не попробовать Измерение того, что важнее всего? Вы также можете просмотреть полную здесь.
Веб-разработка, Ember, JavaScript
Первоначально опубликовано на jonpitcherella.com 2 апреля 2016 г.