Все больше и больше приложений позволяют пользователям изменять или применять собственные темы. Некоторые причины для добавления поддержки тем:
- Дать пользователям почувствовать себя более комфортно. Тематика может способствовать хорошему пользовательскому опыту; пользователи могут чувствовать себя более комфортно с дизайном, который они выбрали сами.
- Многие компании хотят использовать свой собственный брендинг во всех своих приложениях, например, использовать цвет из своего логотипа в верхней панели навигации.
- Тематика может быть премиальной, за которую вы можете взимать дополнительную плату.
Но есть и потенциальные недостатки темы:
- Если вы разрешите пользователю выбирать произвольные цвета, они могут создать плохой UX (то есть затруднить чтение сайта).
- Последовательный интерфейс может быть важен для вас или вашего клиента.
- Тематика в основном имеет смысл в веб-приложениях. Лучше не размещать их на домашних страницах или целевых страницах.
Поэтому будьте осторожны, чтобы учитывать эти плюсы и минусы при рассмотрении вопроса о добавлении тем в свои проекты.
Что такое CSS-переменные?
Чем они отличаются от Sass, Stylus или других типов переменных?
Чтобы упростить ситуацию, когда я говорю «переменные CSS», мы говорим о пользовательских свойствах CSS.
Если вы использовали препроцессоры, такие как Sass, Stylus или Less, то вы, вероятно, уже знакомы с концепцией переменных. Вот как отличаются CSS-переменные:
- Переменные CSS могут обновляться динамически с помощью стандартного JavaScript, перезагрузка не требуется;
- Вы можете предоставить запасное значение в случае, если переменная CSS не определена;
- Их поддерживают инструменты разработки IDE и браузера (Webstorm, различные инструменты Chrome для браузеров);
- Переменные CSS могут использоваться везде: чистый CSS, Sass, Stylus, Less и т. д.
На следующих примерах видно как добавить поддержку тем на свой веб-сайт. Вы можете использовать это как для статических веб-сайтов, так и для одностраничных приложений, используя такие фреймворки, как Angular, React или Vue.js.
Как добавить тематику на веб-сайты, используя CSS-переменные
- Объявите свои CSS-переменные. Рекомендуется использовать селектор :root.
- Используйте CSS-переменные в вашем коде, например, так: var (- variableName, optionFallbackValue).
- Чтобы обновить CSS-переменную с помощью JavaScript, вы можете использовать setProperty, который является обычным JavaScript и поддерживается в каждом браузере.
- Если вам требуется поддержка старых браузеров, таких как Internet Explorer 11, необязательно применять опцию: добавить polyfill / ponyfill . Я могу порекомендовать этот пакет: css-vars-ponyfill.
Вот каким образом вы можете использовать переменные CSS:
:root {
--navbar-background = #000;
--primary-color = #123e6d;
}nav {
background: var(--navbar-background);
}button {
background: var(--primary-color, #123e6d);
}
С помощью JavaScript вы можете обновить любую переменную CSS:
document.documentElement.style.setProperty(cssVariableName, value);
Заключение
Спасибо за чтение. Как видите, добавить поддержку тем можно на любой веб-сайт. Помимо IE11, любой современный веб-браузер поддерживает переменные CSS. Пишите в комментариях, что вы думаете об использовании таких переменных CSS.
Источник - https://medium.com