|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
||||||
Тёмная и светлая тема15.10.2024, 15:54. Показов 2748. Ответов 47
Метки нет (Все метки)
На сайте есть переключатель тёмной и светлой темы и всё что он делает, меняет класс у .wrapper с .light на .dark, через которые задаётся вся тёмная и светлая стилистика. Но тут есть проблемка с линковкой по страницам и с рефрешем, т.к. каждый переход на страницу либо рефреш сбрасывает у .wrapper тему на .light, которая указана первоначально в html, а в данный момент может быть выбрана тема .dark. Собственно вопрос как такой момент правильно обыграть на js? И собственно на каком стадии разработки белые люди это обычно делают, возможно это правильней уже на стадии backend'а делать?
Скрипт переключателя:
0
|
||||||
| 15.10.2024, 15:54 | |
|
Ответы с готовыми решениями:
47
Темная и светлая тема на JS Переключение темы светлая/тёмная Как узнать, какая тема сейчас выбрана на устройстве (iOS) - светлая или тёмная? |
|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
|
| 18.10.2024, 14:36 [ТС] | |
|
дык это то я придумал уже, в начале ничего не надо показывать. Просто надо что бы белая тема не мелькала за несколько мс до чёрной, в принципе с этим неплохо код выше справился, но если можно ещё как то от мелькающего белого экрана избавиться, то вообще суппер будет.
barabar, Это то я первым делом всё попробовал, ничего к сожалению не поменялось.
0
|
|
|
Заблокирован
|
|
| 18.10.2024, 14:36 | |
|
И вообще рекомендую отказаться от jQuery. Делать на чистом JS
0
|
|
|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
|
| 18.10.2024, 14:37 [ТС] | |
|
А чем плох jQuery?
0
|
|
|
Заблокирован
|
||||
| 18.10.2024, 14:40 | ||||
|
Добавлено через 1 минуту
0
|
||||
|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
||||||
| 18.10.2024, 14:42 [ТС] | ||||||
|
Да я вот пробовал закидывать скрипт перед ready строкой да и просто в html там сверху снизу лепил, хотя я может что то ни то копировал, какие строки надо вынести перед ready?
0
|
||||||
|
Заблокирован
|
|||
| 18.10.2024, 14:46 | |||
|
Добавлено через 1 минуту И файл с jQuery должен быть уже загружен, а то будет ошибка
0
|
|||
|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
||
| 18.10.2024, 14:46 [ТС] | ||
|
0
|
||
|
Заблокирован
|
||
| 18.10.2024, 14:53 | ||
|
Добавлено через 2 минуты вот гугловский сервис проверки https://pagespeed.web.dev/?hl=ru Можешь сам поэкспериментировать. С библиотекой и без неё.
0
|
||
|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
||
| 18.10.2024, 14:55 [ТС] | ||
|
0
|
||
|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
||
| 18.10.2024, 14:58 [ТС] | ||
Как говорится, в зелёную зону упал ну и молодец.
0
|
||
|
Заблокирован
|
||
| 18.10.2024, 15:24 | ||
|
Не по теме: Ну, точно что-то курят. Самого уже этот Гугл достал. Поставил недавно яндекс-метрику и сразу из зеленой зоны переместился в красную. Добавлено через 5 минут Добавлено через 7 минут А вообще-то надо было делать, как я предлагал с самого начала на куках. Эту куку проверял бы на бэкенде еще даже до вывода чего-нибудь в браузер. И сразу устанавливал нужную тему.
0
|
||
|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
||
| 18.10.2024, 15:32 [ТС] | ||
|
0
|
||
|
Заблокирован
|
|
| 18.10.2024, 15:34 | |
|
Я еще не видел никогда, что бы так вставляли код) Даже не знаю, будет ли работать или нет)
Ты бы определился. Или в <head> или в <body>. А не между ними)
0
|
|
|
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
|
|||||||||||||||||||||
| 19.10.2024, 10:18 | |||||||||||||||||||||
|
Я не совсем понимаю, как там у вас организовано. Почему классы light и dark ставятся на какой то .wrapper, а не на body, ведь тема применяется ко всей странице. Далее, многое зависит от того, как там организован сам css. Ведь там достаточно переменными задать цвета для темной и светлой тем. Можно сделать два отдельных файла css c переменными для каждой темы. Типа light.css для светлой темы
С точки зрения интерфейса - переключатель темы - бред. Пользователь может настроить и установить себе тему в браузере. Если он привык смотреть страницы в светлой теме, то с какого ему вдруг захочется смотреть ваши страницы в темной? И наоборот. Если пользователь привык смотреть страницы в темной теме и у него так настроен браузер, то хорошим тоном будет сразу показать ему страницу в темной теме, без всякого переключения.
1
|
|||||||||||||||||||||
|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
||||||
| 19.10.2024, 21:18 [ТС] | ||||||
|
voraa, я попробовал этот способ. Т.е. добавил 2 файла ксс со светлой и тёмной темой, и прописал уже классы света и тьмы для body вместо wrapper. Также к сожалению мелькает белый цвет при обновлении страницы в тёмной теме, как и с предыдущим фиксом, возможно это просто так браузер работает, при рефреше белым светится экран.
2) Тут предыдущей вариант с показом body через 1 секунду 3) Ну а тут вариант промелькиванием белой темы, при рефреше в тёмной теме.
0
|
||||||
|
Заблокирован
|
||
| 19.10.2024, 22:18 | ||
|
0
|
||
|
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
|
||
| 19.10.2024, 22:30 | ||
|
В моем последнем варианте скрипт будет работать до парсинга html, он сразу определит тему и заблокирует ненужную.
0
|
||
|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
||
| 19.10.2024, 23:53 [ТС] | ||
|
Белая тема судя по всему в 1м и 2м варианте уже не моргает, там экран просто белым моргает.
0
|
||
|
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
|
|
| 23.10.2024, 14:49 [ТС] | |
|
voraa, не подскажешь, а как ту же самую тему со сменой языков провернуть с local storage, чот у меня какая то фигня выходит?
По сути меняются только 2 вещи на всех страницах: после клика на кнопке .l_eng>a 1) <div class="hb_lang eng"> становится с припиской eng, убирается приписка ru, если она была 2) .wrapper.eng начинает отображаться, .wrapper.ru скрывается после клика на кнопке .l_ru>a 1) <div class="hb_lang ru"> становится с припиской ru , убирается приписка eng, если она была 2) .wrapper.ru начинает отображаться, .wrapper.eng скрывается сам сайт
0
|
|
|
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
|
|||||||||||||||||||||
| 23.10.2024, 18:03 | |||||||||||||||||||||
|
Ну так же, запоминать текущий язык при его смене
По мне проще каждую надпись дублировать только в том месте, где она должна быть. Например
А потом нужный язык можно выставлять на какой нибудь объемлющий блок или <body> как классы .lang_ru или .lang_en И только там менять класс. А в CSS просто
1
|
|||||||||||||||||||||
| 23.10.2024, 18:03 | |
|
Сохранить на диск настройки оформления темы (темная/светлая) в FirstFloor.ModernUI Темная тема Темная тема Темная тема на WinForms
Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
|||
|
Клиент
Uhbif79 18.06.2026
Здесь простой клиент для работы с сервером.
|
Сервер
Uhbif79 18.06.2026
Выкладываю простейший сервер.
|
Дефенестрация
kumehtar 18.06.2026
Узнал интересное слово. Дефенестрация. Это когда ты выбрасываешь кого-либо или что-либо из окна. Возьму на вооружение)))
|
Дихотомия добра и зла
kumehtar 18.06.2026
Как Дзен-буддисты говорят о добре и зле: не нужно воевать против зла, нужно воевать против невежества. Тогда добро станет ествественным, и поэтому вечным. Но дело в том, что невежество всё время. . .
|
|
Своя Интернет-Компания
iceja 18.06.2026
Я программист с экономическим образованием, пишу свой проект, это SaaS для бизнесов. Мне нужен co-founder с высшим экономическим образованием, и/ или инвестор. Сейчас проект в интенсивной разработке,. . .
|
24 Мат модель здравосохранения: функциональные требования к строительству пищеблока
anaschu 18.06.2026
СРесурсами1: финансовый SD-контур, калькулятор функциональных требований пищеблока
Сегодня разделили затраты в агенте Экономика по образцу модели НАСОСЫ, добавили расчёт ROI и построили первый. . .
|
23. что сделано за последнее время.
anaschu 17.06.2026
• Эталон: Клиника НИИ питания РАМН, Москва — централизованный пищеблок, 225 коек, 180 пациентов
• Git: репозиторий med2, ветка абсентеизм. Рабочий файл: СРесурсами1_v4. alp
• Смежный проект:. . .
|
22. Подключение слоя системной динамики (потоковые диффуры): экономические метрики модели
anaschu 17.06.2026
Апдейт модели: финансовый контур, разделение затрат
Продолжаю развивать модель рабочего коллектива на AnyLogic. В этот раз работа шла над агентом Экономика — финансовым SD-слоем модели. Задача:. . .
|