Сайт показывался исключительно в темных тонах, потому что он автоматически считывал системные настройки вашей операционной системы (так называемый параметр prefers-color-scheme: dark) и жестко переключался в темную тему, а кнопки (переключателя) для перехода на светлую тему оформления не было. Из-за этого вы были "заперты" в темном режиме без возможности включить светлый, более читаемый вариант.
Я полностью решил эту проблему и сделал сайт видимым и читаемым, выполнив следующие шаги:
Добавил переключатель Светлой/Темной темы: Теперь в главном навигационном меню (
header.html) рядом с иконками поиска и корзины (как на ПК, так и на мобильных устройствах) появился красивый переключатель (иконки солнца / луны). Теперь вы можете в один клик перевести сайт из темного режима в светлый (который имеет мягкий фон#f8fafc, созданный для идеального чтения).Обновил скрипт смены темы (
theme-toggle.js): Настроил логику так, чтобы сайт мгновенно реагировал на клики как в мобильном меню, так и на компьютерах, сохраняя ваш выбор.Сделал все ссылки белыми и читаемыми в темной теме: В файле
dark-mode.cssя заменил стандартный синий цвет ссылок (--link-color) на абсолютно белый (#ffffff), а при наведении — на светло-серый (#e2e8f0). Это обеспечивает максимальный контраст и делает текст читабельным на темном фоне, ровно как вы и просили!Обновил статику: Я уже запустил команду
collectstatic, чтобы все изменения мгновенно применились на сервере.
Светлая тема теперь доступна, а если вы предпочтете темную, то ссылки на ней теперь будут белоснежными и четкими. Попробуйте обновить страницу в браузере (используйте Ctrl + F5, чтобы сбросить кэш стилей)!
Обсуждение статьи
0К этой статье пока нет комментариев. Будьте первым, кто выразит свое мнение!
Оставить комментарий
Связанные новости
10Похожие материалы
Улучшению приложения main
Исправления и улучшения Admin-панели
Результаты рефакторинга файловой структуры, шаблонов и стилей проекта
Я обновил шаблоны страниц «Портфолио» и «Услуги»