Верстка сайта - Делаем темную версию сайта

Многие уже давно заметили тенденцию что темная тема сайта или приложения стала очень популярна. В этом видео я покажу как сделать темную версию сайта с нуля даже если вы начинающий.На самом деле темная тема сайта при верстке делается очень легко. Есть множество вариантов как делать версии сайтов и я покажу один из самых простых и используемых. Верстка сайта после данных уроков это очень легко даже если вы не особо ориентируетесь в HTML и CSS.

[@alexdom5671]

Как по мне, лучше просто к body добавить класс dark-mode (а в css уже просто допилить цвета) и еще сохранять запись в localStorage и при следующей загрузке смотреть туда. Твой варик подойдет только для лендоса и только для одной загрузки. При следующем варианте все равно придется переключаться. Не удобно и не универсально.

[@BEKBOLSUNTURSUN]

[@speedcubersuzb]

Да правильно мыслиш и кстати спасибо тебе по твоему коду смог сделаь тёмную тему

[@arturj5574]

Привет! Короткие видео с заданиями это то, что надо. Спасибо!

[@ВладимирДмитриев-щ7з]

Всё сработало, это конечно круто. Сделай пожалуйста видео о том, как сделать так чтобы тема сохранялась при переходе со страницы на страницу.

[@X_X1236]

Спасибо! Я почему-то думала что можно как-то обойтись с 3 файлами, а оказывается нет

[@ruruqeqe216]

супер полезно и понятно!!!!однозначно лайк!!!побольше бы таких видео в таком формате (обсуждая какую-нибудь фишку).

[@funnylive3309]

Спасибо вам огромное!!! пол дня сижу уже думаю как сделать этот темный режим и ничего не выходит, благодаря вам все вышло!!!!

[@OskarPrice]

Спасибо, без воды и по сути !

[@htmlbookpro]

Еще есть одна штука - prefers-color-scheme медиа-запрос, который можно использовать для определения системных настроек цветовой схемы пользователя и выдавать ему по дефолту черную тему на основе его темы в операционной системе

[@velson9466]

А это куда писать нужно?

[@alrun6458]

@@velson9466 в гугл

[@anuar9314]

@@velson9466 в js конечно, хотя можно и на стороне сервера это проделать

[@battalov_u]

Как всегда все коротко и ясно, с меня лайкос.

[@АлексейЛитвинов-й5в]

Прикольно, но чисто теория. в рабочих проектах использовать нельзя. Полностью копировать css странная идея, можно же подключить dark_mode.css после основного файла стилей и переопределить в нем только color и background. А также допилить сохранение темы через куки. Тогда видео станет гораздо полезней.

[@zhakshylykkozhobekov5377]

Как сделать сайт многоязычным? Запиши на эту тему пожалуйста.

[@akzhansarzhanuly1654]

I18n

[@touw6940]

Думаю все тоже самое только с заменой html файла с тоже структурой но на английском

[@lotvaplotol5578]

@@touw6940 Если сайт динамически выдает контент через бд?

[@additRU]

@@touw6940 если сайт многостраничный лучше с ini файлами, копировать сайт лишние мб на сервере и не профессионально.

[@АндрейБелоусов-э3ъ]

@@additRU А можете ПОДРОБНЕЕ рассказать, как Вы это делаете?)

[@denysivashchenko2080]

Хороший формат, реально коротенькие видосы с интересными решениям )

[@ПростоЧел-с2ы9б]

Спасибо, очень востребованная сейчас тема в версте.

[@nefedoff3679]

Отличный урок. А как смену стиля привязать к пользователю что бы тёмная тема оставалась при переходе по страницам?

[@aleksandr95]

Чувак, ты просто лучший. Огромное тебе спасибо :)

[@frozeninside5004]

пригодится !) Спасибо Темная тема везде стоит у меня, глазам легче работать

[@alexwill7818]

Рекомендовать такой способ точно не нужно, при любой правке стилей нужно во всех файлах одно и тоже фиксить

[@aleksandryushka9571]

Привет. Темная тема это круто. Глаза меньше устают. Всегда использую темную тему. Как раз искал как ее сделать на своем проекте

[@ВолосатыйЖмых-в1б]

Все коротко и по делу! Круто

[@Milkyway20239]

Классный урок! Ждём ещё

[@длякомментов-и4э]

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

[@justfisher2920]

При обновлении страницы, включается светлая тема. Как исправить это принудительное переключение?

[@young7124]

Ждём всей страной😆

[@anesthetic7541]

Как сделать многостраничный сайт с помощью gulp ,запили Видосик очень полезный контент снимаешь ,побольше подписчиков))

[@hutoryanin]

*Л. а. й. к. о. с.* за видос. ы)

[@SuprunAlexey]

Это все что б набрать классы 👌🏻👌🏻😂

[@hutoryanin]

@@SuprunAlexey да, другие способы сделать тёмную тему тоже будут интересны)

[@dima_krupa]

Спасибо за полезную информацию) Есть в планах сделать курс по натяжке верстки на WooCommerce? Было бы очень интересно посмотреть. Если в планах нет, то можете запланировать?))

[@SuprunAlexey]

Может быть

[@ShortsPageTech]

Круто лайк

[@guffboss2358]

Жаль что объяснялось не на примере дизайна с превьюшки, очень бы хотелось такой проект в портфолио

[@АлексейТитов-у2г]

Конечно, для тех кто уже шарит видос мб помог, а вот для чайников всё происходит слишком быстро и без объяснений. Но я мимо проходил, хз на кого расчитан твой клан, мб чисто на опытных

[@osada4367]

Привет, как насчет того чтобы сохранять выбранный стиль независимо от перезагрузок ?

[@АртёмЛукичёв-п2ы]

Способ твой неплох по идее. Его усовершенствовать можно записав в LocalStorage значение, которое стоит у пользователя и просто сразу подгружать тому, кто выбрал тёмную тему именно её. Не знаю только как такую вещь на wp или любой другой cms провернуть. Разве что в куки записывать, а не LocalStorage

[@eugenenovikov671]

когда я услышал про "тренд появился год назад" я чуть чаем не подавился, не надо так шутить

[@enigma9445]

ты дизлайк поставил ?))

[@eugenenovikov671]

@@enigma9445 я дизы вообще не ставлю в ютюбе никогда

[@kirillperov3843]

@@eugenenovikov671 видимо год назад (относительно даты публикации ролика) это стало массовым явлением.

[@eugenenovikov671]

@@kirillperov3843 нет, это типичный блоггерский штамп, это у всех блоггеров такая фраза, расчитана на новичков.

[@zvezd1ktv]

Гоу полное видео про React Native с андроид студио

[@jamic7569]

Спасибо!!!

[@demidovmaxim1008]

Проще подключать файлы тем с :root переменными и тогда менять его, а в файлах оформления ничего не копипастить

[@SuprunAlexey]

я об этом говорил

[@demidovmaxim1008]

@@SuprunAlexey извиняюсь, видимо прослушал.

[@АлексейВанюшин-з9ж]

Спасибо)

[@thelifeofprogrammer133]

Только недавно задумывался как её сделать

[@Игорь-к4м3ч]

А как сделать, что бы темная тема сохранялась при переходе на другую страницу?

[@FRAGILE304]

Интересно посмотреть другие способы.

[@fsnareuu]

Не знаю почему но у меня не работает вообще, я нажимаю на кнопку по 500 раз, ничего не меняется , пробовал другой браузер, пробовал перезагружать страницу , абсолютно ничего не срабатывает, переписывал код, не могу понять почему

[@kabito_sao]

У меня резко меняется тема, как сделать плавный переход из одной темы в другую? (Заранее спасибо!)

[@Nikita-qb3hu]

Интересная идея

[@ВладЛисовский-м7б]

а реализация по типу: html: css: button{ width:50%; left:0; background:white; }\js: b.onclick=function(){ if(get.ElementById(b).style.background=="white" get.ElementById(b).style.background="black" else{ get.ElementById(b).style.background="white"} } нормальная ?

[@akzhansarzhanuly1654]

Если делаете spa, предлагаю использовать material ui, там можно это реализовать через theme

[@SuprunAlexey]

это так для ознакомления

[@АнтонМолчанов-ы7ц]

Почему onclick срабатывает со второго клика?

[@pxeexe4571]

спасибо

[@olegostakhov8499]

а не проще ли иметь один файл стилей, а тему менять добявляя скасс body dark-mode, например ?

[@muresda2047]

Если сайт большой, то к каждому элементу приписывать если будешь(а придется), то это увеличит скорость загрузки страницы и её вес. Но плюс в том, что если препроцессор используешь, то легче настраивать)

[@dog_matches]

Балдеж

[@VladislavSumets]

Было бы интересно узнать какие плагины ты используешь для хрома)

[@SuprunAlexey]

никакие

[@anuar9314]

adblock, touch VPN все

[@aleksandryushka9571]

Сработало.

[@SuprunAlexey]

Круто

[@6yJldog]

8 минут ради 5 строк JS и ни слова а том, как сохранить выбор темы для пользователя. Хоть на одном сайте сделано, что бы надо было каждый раз тему менять? Смысл такого видео..

[@Kl-hk4lw]

LocalStorage

[@Ald1n-w3y]

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

[@SuprunAlexey]

JavaScript тут поможет

[@Alexander-wx1hy]

сделать что бы в темное время суток применялись темные стили автоматом было бы норм

[@htmlbookpro]

можно на основании темы в операционной системе сделать через медиа-запрос prefers-color-scheme

[@McNeelone]

Ну или взять объект дата и прлучить время. И по условию менять тему.

[@eugenenovikov671]

за onclick меня бы на работе убили

[@staff_buff3430]

почему?

[@eugenenovikov671]

@@staff_buff3430 понятия не имею, но инфа 146%. ты заметил, что уже 15 лет никто так не пишет? ни в одной книге, ни в каком видео, ни в каком проекте.

[@staff_buff3430]

@@eugenenovikov671 я только недавно начал изучать веб разработку, пока html и css а в джаве пока не шарю

[@eugenenovikov671]

@@staff_buff3430 смотри не ляпни про "джаву" нигде

[@staff_buff3430]

@@eugenenovikov671 ну js ОК

[@confymarlow]

Так вот, я кншн знаю что ты это читаешь - сделай видео про движок dle - эффективный , на Ютубе мало чего

[@SuprunAlexey]

читаю

[@confymarlow]

Привет! Помоги пожалуйста , как бэкендер) У меня на гл. странице сайта есть кнопки "Войти" и "регистрация". Как сделать так чтобы после авторизации, у меня на сайте главном поменялись эти кнопки на "Кабинет" и "Выход" ?? Помоги(те) пожалуйста!

[@SuprunAlexey]

Смотря на чем делать, на многих фреймворках это уже предустановленной

[@confymarlow]

@Данил Мальков на Node.js? Ясно спасибо что предупредили)

[@confymarlow]

@@SuprunAlexey а на движках?

[@Betularaaa]

голос знакомый, ты случаем не whyme758?

[@SuprunAlexey]

нет, я Web developer blog:)

[@morsyuk]

использую везде где можно

[@SuprunAlexey]

крут

[@aleksandryushka9571]

А при помощи Jquery можно сделать такое же?

[@SuprunAlexey]

Можно

[@aleksandryushka9571]

Спасибо. Попробую разобраться. Хорошего вечера

[@spawnnouveauii6501]

В командной строке темная тем по умолчанию

[@SuprunAlexey]

Причём тут командная строка?

[@velson9466]

Как сделать плавную анимацию переменения темы?

[@SuprunAlexey]

Посмотрите видео, я там показал

[@velson9466]

@@SuprunAlexey я смотрел, нету

[@velson9466]

@@SuprunAlexey я ставил в body и ничего

[@user-gf5jd2zs7m]

PhpStorm темная тема

[@CptMerkury]

А не проще было через toogle? чуть меньше когда будет.

[@kirillperov3843]

Toggle.

[@trance_hardstyle]

Так я так и не понял, как получить после кнопки отображение текста на экране ? kzbin.info/www/bejne/r56YoWmNnN1joK8

[@jamescook3239]

а шо если обновить все слетает

[@SuprunAlexey]

Да

[@semionrutshtein1745]

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

[@iksoldragon4374]

А надо ли?

[@rodion_google]

А если через sass просто ввести переменные с цветами и по addEventListener менять их значения?

[@danielkhachaturian]

Как ты собираешься менять переменные, которых не существует в исходном css коде?...

[@ИванТамбовцев-ь9ц]

Конечно так быстрее

[@wooovka]

как тебе темная тема такая которую сделал в прошлом году... ну и игра сама? wovka27.github.io/sBattle/

[@karabaevnuriddin4364]

нет

[@ldvweb]

Дай исходный код, плиз!!!

[@SuprunAlexey]

Перепишите

[@АртемИсакин-х1л]

Хоть бы исходники выложил , дизлайк

[@ЮрийЧепкасов-ъ4п]

Темная тема меньше глаза убивает в ночное время работы