Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
 
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313

Тёмная и светлая тема

15.10.2024, 15:54. Показов 2748. Ответов 47
Метки нет (Все метки)

На сайте есть переключатель тёмной и светлой темы и всё что он делает, меняет класс у .wrapper с .light на .dark, через которые задаётся вся тёмная и светлая стилистика. Но тут есть проблемка с линковкой по страницам и с рефрешем, т.к. каждый переход на страницу либо рефреш сбрасывает у .wrapper тему на .light, которая указана первоначально в html, а в данный момент может быть выбрана тема .dark. Собственно вопрос как такой момент правильно обыграть на js? И собственно на каком стадии разработки белые люди это обычно делают, возможно это правильней уже на стадии backend'а делать?

Скрипт переключателя:
JavaScript
1
2
3
$(".hb_theme").click(function() {
  $('.wrapper').toggleClass('light').toggleClass('dark')
});
Пока из мыслей только на все линки проверку ставить, на то, что в данный момент за доп класс у wrapper .light или .dark, и пока нет идей что с рефрешем делать.
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
15.10.2024, 15:54
Ответы с готовыми решениями:

Темная и светлая тема на JS
Здравствуйте! Подскажите пожалуйста, как сделать изменение темы по клику на кнопку с помощью classList.add('класс') и...

Переключение темы светлая/тёмная
В шаблоне сайта, при нажатии на: <input class="form-check-input btn-toggle" type="checkbox" id="flexSwitchCheckChecked"...

Как узнать, какая тема сейчас выбрана на устройстве (iOS) - светлая или тёмная?
Как узнать, какая тема сейчас выбрана на устройстве - светлая или тёмная? Работая в pythonista

47
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
18.10.2024, 14:36  [ТС]
дык это то я придумал уже, в начале ничего не надо показывать. Просто надо что бы белая тема не мелькала за несколько мс до чёрной, в принципе с этим неплохо код выше справился, но если можно ещё как то от мелькающего белого экрана избавиться, то вообще суппер будет.

barabar, Это то я первым делом всё попробовал, ничего к сожалению не поменялось.
0
Заблокирован
18.10.2024, 14:36
И вообще рекомендую отказаться от jQuery. Делать на чистом JS
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
18.10.2024, 14:37  [ТС]
А чем плох jQuery?
0
Заблокирован
18.10.2024, 14:40
Цитата Сообщение от Mailo Посмотреть сообщение
Это то я первым делом всё попробовал, ничего к сожалению не поменялось.
потому что код срабатывает после полной загрузке страницы.
Цитата Сообщение от Mailo Посмотреть сообщение
$(document).ready(function() {
А надо вначале проверять установлена ли тема, а потом загружать страницу

Добавлено через 1 минуту
Цитата Сообщение от Mailo Посмотреть сообщение
А чем плох jQuery?
Он ничем не плох. Просто его время уже прошло и нет никакого смысла его дальше продолжать использовать.
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
18.10.2024, 14:42  [ТС]
Да я вот пробовал закидывать скрипт перед ready строкой да и просто в html там сверху снизу лепил, хотя я может что то ни то копировал, какие строки надо вынести перед ready?

JavaScript
1
2
3
4
5
6
7
8
9
10
//theme swap
$(".hb_theme").click(function() {
  $('.wrapper').toggleClass('light').toggleClass('dark')
  const theme = $('.wrapper').hasClass('light')? 'light' : 'dark'
  localStorage.setItem('theme', theme);
});
 
const theme = localStorage.getItem('theme') ?? 'light'
const state = theme === 'light';
$('.wrapper').toggleClass('light', state).toggleClass('dark', !state);
0
Заблокирован
18.10.2024, 14:46
Цитата Сообщение от Mailo Посмотреть сообщение
какие строки надо вынести перед ready?
вот эти
Цитата Сообщение от Mailo Посмотреть сообщение
const theme = localStorage.getItem('theme') ?? 'light'
const state = theme === 'light';
$('.wrapper').toggleClass('light', state).toggleClass('dark', !state);
И не просто перед ready а сразу после <body> в отдельном тэге <script>

Добавлено через 1 минуту
И файл с jQuery должен быть уже загружен, а то будет ошибка
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
18.10.2024, 14:46  [ТС]
Цитата Сообщение от barabar Посмотреть сообщение
Он ничем не плох. Просто его время уже прошло и нет никакого смысла его дальше продолжать использовать.
А почему прошло то, вроде бы народ пользуется, проекты на нём делает. На Js проблематично с отборкой элементов работать, циклами и т.д. Про отборку из массива я вообще молчу, оч много кода писать, а тут одна строка и готово.
0
Заблокирован
18.10.2024, 14:53
Цитата Сообщение от Mailo Посмотреть сообщение
а тут одна строка и готово.
Замедляет загрузку страницы. Например, Яндексу на это наплевать, а вот Гугл из-за этого понижает выдачу. Визуально ты можешь не заметить, но на подгрузку дополнительного файла с библиотекой jQuery требуется некоторые миллисекунды.

Добавлено через 2 минуты
вот гугловский сервис проверки https://pagespeed.web.dev/?hl=ru
Можешь сам поэкспериментировать. С библиотекой и без неё.
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
18.10.2024, 14:55  [ТС]
Цитата Сообщение от barabar Посмотреть сообщение
И не просто перед ready а сразу после <body> в отдельном тэге <script>
Да именно так и делал, результат не поменялся. Белая тема мелькает. Возможно надо класс light убрать из html, у меня на всех страницах по умолчанию он прописан и как то со скрипта его уже раздавать?
Миниатюры
Тёмная и светлая тема  
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
18.10.2024, 14:58  [ТС]
Цитата Сообщение от barabar Посмотреть сообщение
вот гугловский сервис проверки https://pagespeed.web.dev/?hl=ru
А понял о чём речь, за гуглспидом я ещё перестал гоняться со времён, когда он предзагрузку шрифтов выдумал, там с каждым годом всё больше дичи по требованиям выходит, порой даже банально картинки топ софт сжать не может до того, чего ему надо. В общем я там не знаю что они курят в гугле, полный critical css Как говорится, в зелёную зону упал ну и молодец.
0
Заблокирован
18.10.2024, 15:24

Не по теме:

Ну, точно что-то курят. Самого уже этот Гугл достал. Поставил недавно яндекс-метрику и сразу из зеленой зоны переместился в красную.



Добавлено через 5 минут
Цитата Сообщение от Mailo Посмотреть сообщение
Да именно так и делал, результат не поменялся.
На скрине я вижу это в подвале... в самом низу страницы. Так конечно мелькать будет.

Добавлено через 7 минут
А вообще-то надо было делать, как я предлагал с самого начала на куках. Эту куку проверял бы на бэкенде еще даже до вывода чего-нибудь в браузер. И сразу устанавливал нужную тему.
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
18.10.2024, 15:32  [ТС]
Цитата Сообщение от barabar Посмотреть сообщение
На скрине я вижу это в подвале... в самом низу страницы. Так конечно мелькать будет.
Не если вот так сделать, т.е. перед открытием body, то там уже на рефреше тёмная тема слетает, по сути не работает скрипт целиком.
Миниатюры
Тёмная и светлая тема  
0
Заблокирован
18.10.2024, 15:34
Я еще не видел никогда, что бы так вставляли код) Даже не знаю, будет ли работать или нет)
Ты бы определился. Или в <head> или в <body>. А не между ними)
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
19.10.2024, 10:18
Я не совсем понимаю, как там у вас организовано. Почему классы light и dark ставятся на какой то .wrapper, а не на body, ведь тема применяется ко всей странице. Далее, многое зависит от того, как там организован сам css. Ведь там достаточно переменными задать цвета для темной и светлой тем. Можно сделать два отдельных файла css c переменными для каждой темы. Типа light.css для светлой темы
CSS
1
2
3
4
5
6
body {
--mainbackground: #FFFFFF;
--maintext: #000000;
--linkbackground: #EEEE00;
--linktext: #0000AA;
}
Такой же, но с другими цветами для темной темы dark.css

CSS
1
2
3
4
5
6
body {
--mainbackground: #000000;
--maintext: #FFFFFF;
--linkbackground: #0000AA;
--linktext: #FFFF00;
}
поlключаем в страницу
HTML5
1
2
<link id="lightcss"rel="stylesheet" href="light.css">
<link id="darkcss"rel="stylesheet" href="dark.css">
После них вставляем скрипт работы с темами

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const linklight = document.getElementById('lightcss');
const linkdark = document.getElementById('darkcss');
 
function toggleTheme(theme) {
    const darktheme = theme === 'dark';
    linklight.disabled = darktheme;
    linkdark.disabled = ! darktheme;
}
 
// При открытии страницыпроверяем какая тема была установлена и ставим ее
const theme = localStorage.getItem('theme') ?? 'light';
toggleTheme(theme);
 
document.addEventListener("DOMContentLoaded", () => {
    // Предпологаем, что если на странице есть переключатель тем, 
    // то он всегда имеет класс .hb_theme
    const hbtheme = document.querySelector('.hb_theme')
    if (hbtheme) {
        hbtheme.addEventListener("click", () => {
            const theme = linkdark.disabled ? 'dark', 'light';
            localStorage.setItem('theme', theme);
            toggleTheme(theme);         
        })
    }
});
Добавлено через 6 минут
С точки зрения интерфейса - переключатель темы - бред. Пользователь может настроить и установить себе тему в браузере. Если он привык смотреть страницы в светлой теме, то с какого ему вдруг захочется смотреть ваши страницы в темной?
И наоборот. Если пользователь привык смотреть страницы в темной теме и у него так настроен браузер, то хорошим тоном будет сразу показать ему страницу в темной теме, без всякого переключения.
1
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
19.10.2024, 21:18  [ТС]
voraa, я попробовал этот способ. Т.е. добавил 2 файла ксс со светлой и тёмной темой, и прописал уже классы света и тьмы для body вместо wrapper. Также к сожалению мелькает белый цвет при обновлении страницы в тёмной теме, как и с предыдущим фиксом, возможно это просто так браузер работает, при рефреше белым светится экран.
JavaScript
1
2
3
setTimeout(() => {
  $('body').show();
}, 0);
1) Это последний вышеописанный вариант
2) Тут предыдущей вариант с показом body через 1 секунду
3) Ну а тут вариант промелькиванием белой темы, при рефреше в тёмной теме.
0
Заблокирован
19.10.2024, 22:18
Цитата Сообщение от Mailo Посмотреть сообщение
3) Ну а тут вариант промелькиванием белой темы, при рефреше в тёмной теме.
Вначале класс wrapper light, а когда загрузятся JS-скрипты класс становится wrapper dark. Это видно невооруженным глазом, если открыть консоль. Уже ежу стало бы понятно. Надо сразу подгружать нужный класс. Следовательно проводить проверку еще до вывода в браузер элементов страницы. На куках делай, если не можешь сделать правильно на localStorage
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
19.10.2024, 22:30
Цитата Сообщение от Mailo Посмотреть сообщение
3) Ну а тут вариант промелькиванием белой темы, при рефреше в тёмной теме.
У вас там все скрипты расположены в конце body. Конечно, сначала загрузится страница, покажется (в светлом по умолчанию), а только потом начнут работать скрипты, которые определят, какая должна быть тема.
В моем последнем варианте скрипт будет работать до парсинга html, он сразу определит тему и заблокирует ненужную.
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
19.10.2024, 23:53  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
В моем последнем варианте скрипт будет работать до парсинга html, он сразу определит тему и заблокирует ненужную.
Не на третий вариант не смотрите, это самый первоначальный, ещё где темы скачат. Ваш вариант, тот что последний это 1). Вот в нём на рефреше этот баг, где экран белым моргает на тёмной теме.

Белая тема судя по всему в 1м и 2м варианте уже не моргает, там экран просто белым моргает.
Вложения
Тип файла: mp4 1.mp4 (1.61 Мб, 6 просмотров)
0
 Аватар для Mailo
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
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
23.10.2024, 18:03
Ну так же, запоминать текущий язык при его смене
JavaScript
1
2
3
localStorage.setItem('lang', 'ru');
//или
localStorage.setItem('lang', 'en');
При открытии страницы доставать его
JavaScript
1
lang = localStorage.getItem('lang');
Я бы не так все сделал. У вас фактически два одинаковых div, отличающихся только языком надписей. Тут неприятно то, что если вы захотите менять компоновку, то надо одинаковые изменения делать в двух местах.
По мне проще каждую надпись дублировать только в том месте, где она должна быть. Например
HTML5
1
2
<h1><span data-lang="ru">Современный облачный хостинг провайдер</span>
<span data-lang="en">Modern cloud hosting provider</span></h1>
Т.е. блок у вас один, но все надписи в нем продублированы
А потом нужный язык можно выставлять на какой нибудь объемлющий блок или <body> как классы .lang_ru или .lang_en
И только там менять класс.
А в CSS просто
CSS
1
2
3
4
.lang_ru span[data-lang="en"],
.lang_en span[data-lang="ru"] {
    display:block;
}
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
23.10.2024, 18:03

Сохранить на диск настройки оформления темы (темная/светлая) в FirstFloor.ModernUI
Доброго времени суток. Наставьте пожалуйста на верный путь. Нужно сохранить текущую настройку темы (светлая/темная) на диск: ...

Темная тема
В предыдущей теме: https://www.cyberforum.ru/html/thread2784508.html мне подсказали, как можно выполнить инверсию фона, однако, столкнулся...

Темная тема
Здравствуйте! Необходимо сделать проект - сайт, который должен поддерживать смену темы на темную, а также два языка. Вопрос - каким...

Темная тема на WinForms
Народ! Есть у кого-нибудь опыт построение GUI на WinForms с тёмной темой? Интересует GUI на WinForms со следующими контролами: ...

Тёмная тема в приложении
Помогите с тёмной темой в приложении) Некоторые элементы цвет не меняют, а я вот чет понятия не имею, какие это вообще элементы... Вот...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
40
Ответ Создать тему
Новые блоги и статьи
Клиент
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-слоем модели. Задача:. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru