Тёмная тема в OpenCart из коробки, без платных шаблонов и магических заклинаний
Bulma 0.9 - отличный лёгкий фреймворк, чистый, быстрый, без лишнего мусора. Но вот беда: тёмной темы в нём просто нет. В Bulma 1.0 она наконец-то появилась, но цена оказалась непомерно высокой: бандл вырос в два раза, поддержка старого php-sass умерла, а кастомизация требует глубокого понимания логики работы этих самых тем. Я покопался, не вывез - и пришел к выводу, что это не про простоту и гибкость.
Поэтому я сделал свою тёмную тему (с блэкджеком и шлюхами), которая ничего не ломает и не требует переписывать полпроекта.
Опционально и под полным контролем
В настройках системы три варианта:
- Тёмная тема доступна, но пользователь сам выбирает
- Тёмная тема включена по умолчанию
- Тёмная тема выключена полностью
Плюс отдельная галочка - показывать переключатель темы в шапке или нет. Хочешь - оставь только светлую, хочешь - только тёмную, хочешь - пусть юзер сам решает. Никаких "всё или ничего".
Просто CSS-переменные и точечный override - без магии
Вся тёмная тема - это один отдельный файл dark.css. Никаких изменений в Bulma, никаких перекомпиляций SASS, никаких 200-страничных конфигов. Bulma остаётся источником истины: цвета, отступы, типографика - всё берётся оттуда. Dark.css просто переопределяет нужные CSS-переменные (--primary, --background, --text и т.д.) и добавляет несколько правил для специфичных элементов.
Результат: гибкость запредельная. Хочешь поменять один цвет - открыл dark.css, поменял одну строку, готово. Хочешь добавить свои переменные - пожалуйста. Хочешь сделать градиенты, кастомные тени или что угодно - делай, это обычный CSS. Никакой "нужно знать всю внутреннюю кухню Bulma", никакой "пересобери весь проект". Просто, понятно, быстро!
Переключение темы - мгновенное, без перезагрузки страницы (через class на body + cookie). Выглядит красиво, работает шустро, без лишней cуеты.
Всё из коробки. Поставил сборку - увидел в настройках "Тёмная тема" - включил - и сайт перестал выжигать глаза по ночам.
Не благодари, делал для себя.