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

123 4
Dmitriy_2014
На сайте с 01.07.2014
Offline
344
641

Всем привет!

Как бы самым простым и не напряжным способом сделать пусть кривой косой но быстро, переключатель темы со светлого на темную?

Как вы думаете лучше через переменные CSS это сделать с их изменением по JS или вторым файлом css, или добавлением кучи доп. классов а-ля lithetheme, darktheme?

Вот мне кажется что вариант с переменными css самый вроде бы не напряжный, кликнул по кнопке js поменял значения переменных.

Псевдокод:

Вот допустим у нас есть две переменные:

--text: #000;

--background: #fff;

В js выбираем элемент по id(кнопка которая будет менять) и изменяем при клике значение переменных.

А состояние запоминаем через куки допустим, создаем куку с каким-то значением, светлая одно, темное другое и меняем в зависимости от значения, честно я не знаю как сделать чтобы запомнился и зафиксировался выбор темы.

Или менять css файлы, там с темной dark.css на светлую light.css как вариант.

Как бы реализовать это чтобы это было не сложно и ненапряжно.

Заранее всем спасибо за ответы!


Михаил
На сайте с 02.03.2007
Offline
181
#1
Лично когда мне нужно каким-либо образом идентифицировать визитёра – беру конкатенацию его IP + UserAgent, шифрую в MD5, добавляю «соль», шифрую повторно и обрезаю полученный хэш символов до восьми. Способ серверный (подделывать входящий IP и UserAgent реальному клиенту лениво и не нужно), а потому наименее капризный и неплохо идентифицирует гостей.  Полученной в результате процедуры последовательностью символов обзываю текстовый файл и в него уже пишу всё, что заблагорассудится – скажем, настройки для гостя или условия блокировки. Естественно, при таком подходе, если гость сменит тёмную тему на светлую, а затем зайдёт на сайт из другого браузера – он снова получит тёмную тему, т. к. UserAgent у него будет уже другой. Правда, есть ещё те, кто в процессе сеанса по десять раз меняет UserAgent, то и дело подставляя новые значения – но этим, поверьте, абсолютно без разницы, какая на сайте тема – светлая или тёмная. В вашем же случае в этом текстовом файлике можно записать, к примеру, указание на css-стиль.
Вот видишь, Алиса, что нужно бежать со всех ног, чтобы оставаться на месте! А чтобы куда-нибудь добраться – нужно бежать вдвое быстрее!
W1
На сайте с 22.01.2021
Offline
306
#2
Dmitriy_2014 :
lithetheme

Это что за буквосочетание ты придумал?

Dmitriy_2014 :
Как бы реализовать это

По клику на кнопку изменяй класс body с light на dark или обратно.

Мой форум - https://webinfo.guru –Там я всегда на связи
S3
На сайте с 29.03.2012
Online
340
#3

Ну прикрути бутстрап как в примере и будет у тебя все по-взрослому! Или посмотри код и перепиши под себя - ты ж даркнет кодер великий 💪

https://getbootstrap.com/docs/5.3/examples/sign-in/


W1
На сайте с 22.01.2021
Offline
306
#4
Sly32 #:
Ну прикрути бутстрап как в примере и будет у тебя все по-взрослому!

Опять ты предлагаешь совершенно ненужную хрень. Причём в данном случае вообще мимо цели.

S3
На сайте с 29.03.2012
Online
340
#5
webinfo #:

Опять ты предлагаешь совершенно ненужную хрень.

А ты - ездить на форде из 90-х, когда есть машины поудобнее. Для тебя это хрень по очень простой причине - не умеешь пользоваться

Dmitriy_2014 :
Как бы самым простым и не напряжным способом

Пора бы уже перестать искать простой, начинай искать правильный 

W1
На сайте с 22.01.2021
Offline
306
#6
Sly32 #:
Для тебя это хрень по очень простой причине - не умеешь пользоваться

Судя по твоим советам, ты вообще не представляешь, зачем эта хрень нужна. Предлагать поставить на сайт буцтрап для смены цветовой гаммы - это вообще шедеврально. Продолжай!

S3
На сайте с 29.03.2012
Online
340
#7
webinfo #:

Судя по твоим советам, ты вообще не представляешь, зачем эта хрень нужна. Предлагать поставить на сайт буцтрап для смены цветовой гаммы - это вообще шедеврально. Продолжай!

Попробуй перечитать мой совет целиком для начала. 

W1
На сайте с 22.01.2021
Offline
306
#8
Sly32 #:

Попробуй перечитать мой совет целиком для начала. 

Достаточно вот этого:

Sly32 #:
прикрути бутстрап

Чтобы понять, что яйцо тухлое, не обязательно съедать его целиком (С).

S3
На сайте с 29.03.2012
Online
340
#9
webinfo #:

Достаточно вот этого:

Чтобы понять, что яйцо тухлое, не обязательно съедать его целиком (С).

Тухлый пример, в программировании нельзя не дочитать до конца и делать выводы. Бутстрап здорово облегчает жизнь, если хочешь сэкономить время на фронте. И уж точно будет полезен не только для одной кнопки. А вариант - посмотреть как и сделать красиво ты даже не дочитал.  Но тебе этого не понять, ты все гоняешь на форде из 90-х

Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#10

Да не мне бы что-то свое, не подключать никакие библиотеки и плагины, скрипты и т.п. Но так добавил пару строк в js файл и css поменять чуть-чуть и все, просто чтобы черное менялось на белое и наоборот хотя бы для текста и фона, что-то вот максимально простое, переменные в css как бы уже некоторые есть, можно ещё подбить под эту тему.

Так, а что вариант с изменением переменных в css через js плохой? Мне кажется он самым простым.
123 4

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