Как самым простым способом сделать переключатель светлая/темная тема на сайте?

1 234
W1
На сайте с 22.01.2021
Offline
306
#21
Dmitriy_2014 #:
поменять их всех одним кликом с помощью js

Тебе это уже несколько раз предложили. Это делается через изменение общего атрибута. Ты троллишь штоле? Или реально не понимаешь, о чём речь?

Мой форум - https://webinfo.guru –Там я всегда на связи
Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#22
webinfo #:

Тебе это уже несколько раз предложили.

Тогда, наверное, так и попробую.

Просто что-то я не понял, что там за фишка с data-атрибутом, почему без неё не обойтись.
W1
На сайте с 22.01.2021
Offline
306
#23
Dmitriy_2014 #:

я не понял, что там за фишка с data-атрибутом, почему без неё не обойтись.

Да без разницы, какой атрибут: data или  class. Главное, что через изменение этого атрибута можно изменить все соответствующие стили.

Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#24
webinfo #:

Да без разницы, какой атрибут: data или  class. Главное, что через изменение этого атрибута можно изменить все соответствующие стили.

Понятно, ладно надо попробовать… Хотя бы цвет фона поменять и сохранить :)
temniy
На сайте с 15.03.2008
Offline
257
#25
Инструкция с примером - https://opensource.com/article/22/9/dark-theme-website
A beginner's guide to making a dark theme for a website
A beginner's guide to making a dark theme for a website
  • Sachin Samal
  • opensource.com
Learn how to program dark website themes using HTML, CSS variables, classes, and JavaScript methods.
⭐ Лучший хостинг от 4 евро, VPS от 6 евро, VPN недорого - разные локации - любые карты - скидки до 20% - https://fornex.com/c/ffi2e3/ru/services/
Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#26
temniy #:
Инструкция с примером - https://opensource.com/article/22/9/dark-theme-website

Спасибо, но пока, по этой статье делаю, вроде все просто, но придется кучу переменных в css для разных элементов понадобовлять:

https://frontendtoday.ru/articles/dark-mode-best-practice/

Единственное, то ли глюк какой, то ли я чет тормазнул,

Но показалось что не с первого счелчка переключилось на темную, но потом вроде со второго переключилось и стало работать нормально, так и не понял баг это или случайность.
Темный режим и как его лучше делать — Фронтенд сегодня
Темный режим и как его лучше делать — Фронтенд сегодня
  • frontendtoday.ru
Вы, наверное, уже заметили, что в последнее время все начали предлагать своим пользователям темный режим (Dark Mode), в котором в основном используются темные цвета, вместо традиционных белых и ярких тонов. Темный режим сегодня является одним из самых главных тенденций в современном дизайне пользовательского интерфейса. Операционные системы...
Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#27
Как думаете что если украсть цвета с https://www.linux.org.ru/, он вроде темненький как раз под темный режим.
LINUX.ORG.RU — Русская информация об ОС Linux
  • 2024.07.15
  • www.linux.org.ru
16.07.24 : Холли «Шаман» Миллион уходит с поста исполнительного директора Фонда Gnome после 9 месяцев работы (40 комментариев)
S3
На сайте с 29.03.2012
Offline
349
#28
Dmitriy_2014 #:
Но показалось что не с первого счелчка переключилось на темную, но потом вроде со второго переключилось и стало работать нормально, так и не понял баг это или случайность.

Так посмотри в дебагере - возможно у тебя неправильно тригеряться евенты по щелчку, может нужно начальное значение не так указать. JS же довольно хорошо дебажиться прямо в браузере, поправь меня если не так?

Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#29
Sly32 #:

Так посмотри в дебагере - возможно у тебя неправильно тригеряться евенты по щелчку, может нужно начальное значение не так указать. JS же довольно хорошо дебажиться прямо в браузере, поправь меня если не так?

Да похоже это так и есть, в другом браузере щелкнул и опять только со второго раза переключилось, потом нормально, странно…
Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#30
Пощелкайте кому не жалко, на этом сайте - https://frontendtoday.ru/articles/dark-mode-best-practice/ там рабочий пример есть в codepen, Run Pen, с первого ли раза переключается, когда по кнопке Dark щелкаешь.
Темный режим и как его лучше делать — Фронтенд сегодня
Темный режим и как его лучше делать — Фронтенд сегодня
  • frontendtoday.ru
Вы, наверное, уже заметили, что в последнее время все начали предлагать своим пользователям темный режим (Dark Mode), в котором в основном используются темные цвета, вместо традиционных белых и ярких тонов. Темный режим сегодня является одним из самых главных тенденций в современном дизайне пользовательского интерфейса. Операционные системы...
1 234

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий