Dmitriy_2014

Dmitriy_2014
Рейтинг
370
Регистрация
01.07.2014
Интересы
Веб-технологии
Как думаете что если украсть цвета с https://www.linux.org.ru/, он вроде темненький как раз под темный режим.
temniy #:
Инструкция с примером - https://opensource.com/article/22/9/dark-theme-website

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

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

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

Но показалось что не с первого счелчка переключилось на темную, но потом вроде со второго переключилось и стало работать нормально, так и не понял баг это или случайность.
webinfo #:

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

Понятно, ладно надо попробовать… Хотя бы цвет фона поменять и сохранить :)
webinfo #:

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

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

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

Почему не сделать кучу переменных в css в root’е пример:

    --ytd-searchbox-border-color: hsla(0,0%,53.3%,0.2);

    --ytd-searchbox-legacy-border-color: #ccc;

    --ytd-searchbox-legacy-border-shadow-color: #eee;

    --ytd-searchbox-legacy-button-color: #f8f8f8;

    --ytd-searchbox-legacy-button-border-color: #d3d3d3;

    --ytd-searchbox-legacy-button-focus-color: #e9e9e9;

    --ytd-searchbox-legacy-button-hover-color: #f0f0f0;

    --ytd-searchbox-legacy-button-hover-border-color: #c6c6c6;

    --ytd-searchbox-legacy-button-icon-color: #333;

    --ytd-searchbox-background: hsl(0,0%,100%);

    --ytd-searchbox-text-color: hsl(0,0%,6.7%);

И не поменять их всех одним кликом с помощью js, да и все?
Михаил #:

Поменять стиль страницы – не проблема. Главная задача, как я понимаю – в том, чтобы запомнить, какую тему выбрал гость (ну или хотя бы если тем всего две и стартовая известна – то запомнить, что гость сменил стартовую тему на другую). Вот для этой задачи я выше решение и изложил. Не знаю, может, это и на основе JS можно решить, но я в этом не силён, но не стал бы на него полагаться, JS как-никак работает на стороне клиента, а не сервера. А вот если нужно сменить тему «на лету», не перезагружая страницу – тут JS, бесспорно, идеален (само собой, задача с запоминанием выбора гостя остаётся).

Откровенно признаюсь, что как именно будет реализовано описание тем – будь это Bootstrap, чистый CSS или вообще быстрый скачок из WordPress в Bitrix – в контексте вопроса ТС мне представляется несущественным.

Да про запоминание, это отдельный вопрос, ну через js как в выше приведенной статье через cookies или LocalStorage. Не заморочек через сервер точно не нужно, пусть это на клиенте работает, это переключение тем функция по скольку по стольку, я когда о ней начинаю думать, думаю оставлю я все как есть :-), но не надо заморочится и сделать хотябы простой вариант.
makepuff #:

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

https://dev.to/whitep4nth3r/the-best-lightdark-mode-theme-toggle-in-javascript-368f


ты про это пишешь? Если да, то это пользовательские стили и все равно нужен будет js с переключением не класса а data в теге html

Да про пользовательские свойства, они же типа переменные в css, понятно что JS нужен будет, но почему бы их просто пачкой значение не поменять да и все, а так да что-то на вроде этого.
webinfo #:

Я тебе написал: через JS надо изменять общий класс. А уже в CSS прописываешь свои переменные для каждого класса. Так будет и проще, и правильнее.

Так это надо классы менять добавлять, а так я бы по клику значения в переменных поменял бы и все.
Sly32 #:

Он не плохой, просто примитивный. Я бы заморочился и сделал бы автопереключение темы. Было бы круче, как можно посмотреть в бутстрапе и наваять что-то свое.

Так мне и нужно примитивный. Не, не, без заморочек, без автопереключния определения и т.п. без идей бутстрапа, просто чтобы белое менялось на черное по клику, тем 0.005% которые сходят с ума по темной теме :).

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

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