Я улучшил цветовую гамму и адаптировал стили, чтобы весь сайт имел единый современный темный стиль (Premium Dark Mode) без резких перепадов цветов, а тексты стали читаемыми.
Я улучшил цветовую гамму и адаптировал стили, чтобы весь сайт имел единый современный темный стиль (Premium Dark Mode) без резких перепадов цветов, а тексты стали читаемыми.Что было сделано:Глобальные переопределения в base.css:Я заметил, что некоторые стандартные классы Bootstrap (например, .card, .bg-light, .bg-white, .text-muted, формы управления и модальные окна) использовали стандартные светлые цвета, которые конфликтовали с основной темной гаммой из variables.css. Текст на них становился нечитаемым (например, серый текст на белом или темный текст на темном).Теперь все ключевые компоненты через класс-переопределения строго наследуют переменные из вашей глобальной цветовой схемы (такие как var(--bg-card), var(--neutral-800), var(--text-primary)). Это гарантирует, что любая .card или таблица будет иметь правильный темный фон и белый читаемый текст.Элементы форм (.form-control, .form-select) теперь также темные с акцентными контурами, что улучшает визуальное восприятие при наборе текста.Оптимизация цвета текста:Классы .text-muted, .text-secondary и другие жестко привязаны к переменной цвета var(--text-muted) (#94a3b8) и var(--text-secondary), что делает их немного светлее и полностью читаемыми на темных фонах.Очистка локальных стилей (на примере новостей):Шаблон news/category.html содержал «жестко» прописанные цвета в блоке <style> (например, #1e1e1e, #e0e0e0, #0d6efd), что выбивалось из общего стиля сайта. Я подключил их напрямую к переменным var(--bg-card), var(--primary-color) и var(--neutral-800), чтобы они поддерживали централизованную цветовую гамму.Также были исправлены светлые элементы фильтрации новостей и услуг, теперь поля поиска с лупой (.input-group-text) корректно вписываются в темный стиль.Благодаря этим изменениям все страницы сайта — новости, услуги, разделы контактов — теперь выглядят как единое целое (выдержаны в цветовом коде Cosmic Scheme), а тексты отлично читаются в любом блоке.
Обсуждение статьи
0К этой статье пока нет комментариев. Будьте первым, кто выразит свое мнение!
Оставить комментарий
Связанные новости
10Похожие материалы
Улучшению приложения main
Исправления и улучшения Admin-панели
Результаты рефакторинга файловой структуры, шаблонов и стилей проекта
Я обновил шаблоны страниц «Портфолио» и «Услуги»