Верстка сайта - Делаем темную версию сайта
HTML-код
- Опубликовано: 25 янв 2021
- Многие уже давно заметили тенденцию что темная тема сайта или приложения стала очень популярна. В этом видео я покажу как сделать темную версию сайта с нуля даже если вы начинающий.На самом деле темная тема сайта при верстке делается очень легко. Есть множество вариантов как делать версии сайтов и я покажу один из самых простых и используемых. Верстка сайта после данных уроков это очень легко даже если вы не особо ориентируетесь в HTML и CSS.
Привет! Короткие видео с заданиями это то, что надо. Спасибо!
Спасибо, без воды и по сути !
Как по мне, лучше просто к body добавить класс dark-mode (а в css уже просто допилить цвета) и еще сохранять запись в localStorage и при следующей загрузке смотреть туда. Твой варик подойдет только для лендоса и только для одной загрузки. При следующем варианте все равно придется переключаться. Не удобно и не универсально.
Да правильно мыслиш и кстати спасибо тебе по твоему коду смог сделаь тёмную тему
супер полезно и понятно!!!!однозначно лайк!!!побольше бы таких видео в таком формате (обсуждая какую-нибудь фишку).
Как всегда все коротко и ясно, с меня лайкос.
Хороший формат, реально коротенькие видосы с интересными решениям )
Чувак, ты просто лучший. Огромное тебе спасибо :)
Всё сработало, это конечно круто.
Сделай пожалуйста видео о том, как сделать так чтобы тема сохранялась при переходе со страницы на страницу.
Спасибо! Я почему-то думала что можно как-то обойтись с 3 файлами, а оказывается нет
Все коротко и по делу! Круто
Спасибо вам огромное!!! пол дня сижу уже думаю как сделать этот темный режим и ничего не выходит, благодаря вам все вышло!!!!
Классный урок! Ждём ещё
Спасибо огромное вы меня выручили такими темами
Привет. Темная тема это круто. Глаза меньше устают. Всегда использую темную тему. Как раз искал как ее сделать на своем проекте
Прикольно, но чисто теория. в рабочих проектах использовать нельзя. Полностью копировать css странная идея, можно же подключить dark_mode.css после основного файла стилей и переопределить в нем только color и background. А также допилить сохранение темы через куки. Тогда видео станет гораздо полезней.
Еще есть одна штука - prefers-color-scheme медиа-запрос, который можно использовать для определения системных настроек цветовой схемы пользователя и выдавать ему по дефолту черную тему на основе его темы в операционной системе
А это куда писать нужно?
@@velson9466 в гугл
@@velson9466 в js конечно, хотя можно и на стороне сервера это проделать
Спасибо, очень востребованная сейчас тема в версте.
Отличный урок. А как смену стиля привязать к пользователю что бы тёмная тема оставалась при переходе по страницам?
Спасибо)
Спасибо!!!
Как сделать сайт многоязычным? Запиши на эту тему пожалуйста.
I18n
Думаю все тоже самое только с заменой html файла с тоже структурой но на английском
@@touw6940 Если сайт динамически выдает контент через бд?
@@touw6940 если сайт многостраничный лучше с ini файлами, копировать сайт лишние мб на сервере и не профессионально.
@@additRU А можете ПОДРОБНЕЕ рассказать, как Вы это делаете?)
пригодится !) Спасибо
Темная тема везде стоит у меня, глазам легче работать
Круто лайк
Рекомендовать такой способ точно не нужно, при любой правке стилей нужно во всех файлах одно и тоже фиксить
Интересно посмотреть другие способы.
Как сделать многостраничный сайт с помощью gulp ,запили Видосик очень полезный контент снимаешь ,побольше подписчиков))
подскажите, что нужно дописать, чтобы выбранная тема сохранялась при перезагрузке страницы?
Интересная идея
Интересная тема
Привет, как насчет того чтобы сохранять выбранный стиль независимо от перезагрузок ?
спасибо
Гоу полное видео про React Native с андроид студио
Ждём всей страной😆
*Л. а. й. к. о. с.* за видос. ы)
Это все что б набрать классы 👌🏻👌🏻😂
@@SuprunAlexey да, другие способы сделать тёмную тему тоже будут интересны)
Только недавно задумывался как её сделать
При обновлении страницы, включается светлая тема. Как исправить это принудительное переключение?
У меня резко меняется тема, как сделать плавный переход из одной темы в другую? (Заранее спасибо!)
а реализация по типу:
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"}
}
нормальная ?
Спасибо за полезную информацию) Есть в планах сделать курс по натяжке верстки на WooCommerce? Было бы очень интересно посмотреть. Если в планах нет, то можете запланировать?))
Может быть
Способ твой неплох по идее. Его усовершенствовать можно записав в LocalStorage значение, которое стоит у пользователя и просто сразу подгружать тому, кто выбрал тёмную тему именно её. Не знаю только как такую вещь на wp или любой другой cms провернуть. Разве что в куки записывать, а не LocalStorage
А как сделать, что бы темная тема сохранялась при переходе на другую страницу?
Балдеж
Конечно, для тех кто уже шарит видос мб помог, а вот для чайников всё происходит слишком быстро и без объяснений. Но я мимо проходил, хз на кого расчитан твой клан, мб чисто на опытных
Почему onclick срабатывает со второго клика?
Жаль что объяснялось не на примере дизайна с превьюшки, очень бы хотелось такой проект в портфолио
Сработало.
Круто
Не знаю почему но у меня не работает вообще, я нажимаю на кнопку по 500 раз, ничего не меняется , пробовал другой браузер, пробовал перезагружать страницу , абсолютно ничего не срабатывает, переписывал код, не могу понять почему
Было бы интересно узнать какие плагины ты используешь для хрома)
никакие
adblock, touch VPN все
а не проще ли иметь один файл стилей, а тему менять добявляя скасс body dark-mode, например ?
Если сайт большой, то к каждому элементу приписывать если будешь(а придется), то это увеличит скорость загрузки страницы и её вес. Но плюс в том, что если препроцессор используешь, то легче настраивать)
когда я услышал про "тренд появился год назад" я чуть чаем не подавился, не надо так шутить
ты дизлайк поставил ?))
@@enigma9445 я дизы вообще не ставлю в ютюбе никогда
@@eugenenovikov671 видимо год назад (относительно даты публикации ролика) это стало массовым явлением.
@@kirillperov3843 нет, это типичный блоггерский штамп, это у всех блоггеров такая фраза, расчитана на новичков.
Проще подключать файлы тем с :root переменными и тогда менять его, а в файлах оформления ничего не копипастить
я об этом говорил
@@SuprunAlexey извиняюсь, видимо прослушал.
Если делаете spa, предлагаю использовать material ui, там можно это реализовать через theme
это так для ознакомления
а как сделать чтобы когда переходил в другую страницу сайта и там остался последняя активная тема?
JavaScript тут поможет
Привет! Помоги пожалуйста , как бэкендер)
У меня на гл. странице сайта есть кнопки "Войти" и "регистрация". Как сделать так чтобы после авторизации, у меня на сайте главном поменялись эти кнопки на "Кабинет" и "Выход" ?? Помоги(те) пожалуйста!
Смотря на чем делать, на многих фреймворках это уже предустановленной
@Данил Мальков на Node.js? Ясно спасибо что предупредили)
@@SuprunAlexey а на движках?
А при помощи Jquery можно сделать такое же?
Можно
Спасибо. Попробую разобраться. Хорошего вечера
PhpStorm темная тема
использую везде где можно
крут
В интелтидж идеа работаю с темной темой, на маке темная тема, даже хром и тот черный.
Никогда не болел за ситхов. Как вернуться на светлую сторону силы???
А надо ли?
Как сделать плавную анимацию переменения темы?
Посмотрите видео, я там показал
@@SuprunAlexey я смотрел, нету
@@SuprunAlexey я ставил в body и ничего
сделать что бы в темное время суток применялись темные стили автоматом было бы норм
можно на основании темы в операционной системе сделать через медиа-запрос prefers-color-scheme
Ну или взять объект дата и прлучить время. И по условию менять тему.
Так я так и не понял, как получить после кнопки отображение текста на экране ?
ruclips.net/video/ym5p6Wgx0jM/видео.html
голос знакомый, ты случаем не whyme758?
нет, я Web developer blog:)
Так вот, я кншн знаю что ты это читаешь - сделай видео про движок dle - эффективный , на Ютубе мало чего
читаю
а шо если обновить все слетает
Да
В командной строке темная тем по умолчанию
Причём тут командная строка?
А не проще было через toogle? чуть меньше когда будет.
Toggle.
А если через sass просто ввести переменные с цветами и по addEventListener менять их значения?
Как ты собираешься менять переменные, которых не существует в исходном css коде?...
Конечно так быстрее
за onclick меня бы на работе убили
почему?
@@staff_buff3430 понятия не имею, но инфа 146%. ты заметил, что уже 15 лет никто так не пишет? ни в одной книге, ни в каком видео, ни в каком проекте.
@@eugenenovikov671 я только недавно начал изучать веб разработку, пока html и css
а в джаве пока не шарю
@@staff_buff3430 смотри не ляпни про "джаву" нигде
@@eugenenovikov671 ну js ОК
8 минут ради 5 строк JS и ни слова а том, как сохранить выбор темы для пользователя. Хоть на одном сайте сделано, что бы надо было каждый раз тему менять? Смысл такого видео..
LocalStorage
как тебе темная тема такая которую сделал в прошлом году... ну и игра сама?
wovka27.github.io/sBattle/
Дай исходный код, плиз!!!
Перепишите
нет
Хоть бы исходники выложил , дизлайк
Темная тема меньше глаза убивает в ночное время работы