Тематизация веб-приложения обычно включает замену таблиц стилей или перемещение классов 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 г.