Анна, я просто не перестаю удивляться тому потоку информации, который получаю с вашего канала. Ваши гайды по фронт-энду и новых фишек, о которых я даже не знал заставляют таких менее опытных людей, как я, расти в этой области. Спасибо вам огромное за ваш труд и желание делиться информацией с другими людьми! Вот вам от меня пятюня
Не поставить лайк под этим видео совершено невозможно. Через 5 минут рука самопроизвольно тянется к кнопке подписки, а сейчас с трудом себя сдерживаю, чтоб не сделать предложение :).
Из опыта, на проектах дизайнеры все равно для всего и для фона и для бордеров поставят свои цвета, а чекбоксы вообще будут кастомные, так что переопределять придется Только для мини проектов на показ годится
Поддерживаю. Также крайне удобно для цветовой темы использовать data-atribute. Например "data-colorScheme=dark" Если на проекте семантические цвета, то все цвета представляются в виде CSS переменных и потом CSS переменные оборачиваются в SASS переменные для удобства. И дальше в css файле делается вот так: [colorScheme=dark]: {--main: #000;} [colorScheme=light]: {--main: #fff;}, где мы переопределяем CSS переменные Если на проекте не семантические цвета и темную тему завезли позже, то можно сделать так, чтобы data-atribute был только когда есть темная тема. И дальше мы пользуемся тем, что у функции "var()" 2 аргумента: если указанной переменной не существует, то берется резервное значение. И мы делаем что-то типо такого: "background: var(--black, white)". Т.е. если темная тема есть, то у нас будет существовать --black и будет черный фон. Если темы нету, то переменная пропустится и будет белый фон. ...Ну а вообще в современных проектах зачастую CSS-in-JS и это уже другая история
Очень интересное и полезное видео, ведь использование переменных в CSS открывает нам возможность создания и применения тем на веб-странице. Спасибо за видео!
т.к. я занимаюсь системным программированием и к фронту имею ровно никакое отношение, то могу просто отметить что Вы выглядите просто замечательно и вас очень приятно слушать!
Еще интересно будет услышать про цветовые темы в фавиконках и собственно о создании темных стилей для сайта - что стоит менять, что не стоит, как не испортить доступность-удобность.
Для решения многих проблем , возникающих у меня в процессе работы на компьютере , мне частенько приходится обращаться к дочери , а это зачастую очень неудобно . Ваш ролик поможет мне для решения вопросов . Спасибо и лайк .
спасибо за такой прекрасный видеообзор мне понравился для себя кое что полезное спасибо большое этому каналу который очень полезным побольше бы таких мне лайк и подписка
Интересное, но редко применяемое свойство. Очень редко захотят использовать такой кислотный черный. Надо что-то помягче для глаз. И по хорошему надо было рассказать и про prefers-color-scheme.
Конечно. Цель видео была показать, как работать со стилями. Если дальше углубляться, то по хорошему еще бы сохранять выбранную тему на стороне пользователя.
Ок. Когда делаешь не по макетам - отлично помогает. Но в макетах для светлой и темной темы придется переносить каждый цвет и не факт, что то что в Светлой теме будет #333, в темной теме будет везде белым, зачастую будут варианты, здесь белым, а здесь #f6f6f6
Вообще круто! Но вот с bootstrap облом ((( Если подключен bootstrap.min.css, то эта штука не срабатывает, или я что-то делаю не так. А если нет bootstrap, то срабатывает, спасибо за супер мега лайф хак инфу
Вообще то я привыкший переключать тему врукопашку и потому использование медиазапроса стало небольшой неожиданностью. В общем решение и так понятное. Я бы сделал немного по другому, но тоже коротко.
Если основной плюс этого подхода в том, что браузер сам допридумывает некоторые цвета, то какой от этого толк, если есть готовый дизайн, и все цвета должны соответствовать макету.
На мой взгляд, это можно использовать, как готовое решение, если дизайнер не участвует в проекте. К тому же, порой, какие-то моменты могут быть упущено и это свойство временно может спасти.
Я до самого конца не понимал, как его использовать. Честно говоря, я для переключения темы всегда создавал 3 css файла (2 с переменными и 1 со стилем страницы), и просто менял свойство href тега link, к которому я привязал id
✨ Поддержать выход нового полезного контента можно на Boosty: boosty.to/annblok
Анна, я просто не перестаю удивляться тому потоку информации, который получаю с вашего канала. Ваши гайды по фронт-энду и новых фишек, о которых я даже не знал заставляют таких менее опытных людей, как я, расти в этой области. Спасибо вам огромное за ваш труд и желание делиться информацией с другими людьми! Вот вам от меня пятюня
❤
Я не знал такого. Переписывал все цаета лоя темной темы.
Анюта, ты умничка! Спасибо!
Ваше видео будет необычайно полезно для многих из нас! Новые технологии не всегда удается проследить!
Очень четко, без лишней воды и понятно все объяснили. Огромное спасибо, что помогаете людям подобными видео.
Крутой ролик, очень полезная информация. Я хоть и ударился в back-end но скиллы по верстке терять нельзя)). Спасибо😎👍
Правильно! 😎
Я наоборот понял что недостаточно знаю фронт.
Не поставить лайк под этим видео совершено невозможно. Через 5 минут рука самопроизвольно тянется к кнопке подписки, а сейчас с трудом себя сдерживаю, чтоб не сделать предложение :).
Спасибо. )) Эта тема меня интересовала.
отличный механизм для применения. спасибо
Полезное видео, для тех, кто интересуется этой темой!!!
неплохое видео про верстку светлой или темной темы.нужный контент
Вообще бомба, даже не знал про такую возможность ❤, Как дурачок все стили сам адаптировал на темную тему😅
Главное, что теперь знаете, как надо 👍
Из опыта, на проектах дизайнеры все равно для всего и для фона и для бордеров поставят свои цвета, а чекбоксы вообще будут кастомные, так что переопределять придется
Только для мини проектов на показ годится
Поддерживаю.
Также крайне удобно для цветовой темы использовать data-atribute. Например "data-colorScheme=dark"
Если на проекте семантические цвета, то все цвета представляются в виде CSS переменных и потом CSS переменные оборачиваются в SASS переменные для удобства.
И дальше в css файле делается вот так: [colorScheme=dark]: {--main: #000;} [colorScheme=light]: {--main: #fff;}, где мы переопределяем CSS переменные
Если на проекте не семантические цвета и темную тему завезли позже, то можно сделать так, чтобы data-atribute был только когда есть темная тема.
И дальше мы пользуемся тем, что у функции "var()" 2 аргумента: если указанной переменной не существует, то берется резервное значение. И мы делаем что-то типо такого:
"background: var(--black, white)". Т.е. если темная тема есть, то у нас будет существовать --black и будет черный фон. Если темы нету, то переменная пропустится и будет белый фон.
...Ну а вообще в современных проектах зачастую CSS-in-JS и это уже другая история
Да иногда возникал такой вопрос, благодаря вам теперь в курсе как это сделать💯👍
Вообще, это уже должны знать все, но такой новичек, как я, узнал об этой смене тем, только что от вас.
Как всегда с новинками и полезной, а главным бесплатной и такой нужной информацией
Спасибо за подробные советы этой нелёгкой темы!
Спасибо вы мне очень помогли мало кто сейчас говорит об этом
Очень четко и понятно все объяснили, огромное спасибо, что помогли разобраться с версткой тем
Я искала как же это можно сделать, и вы мне помогли, теперь я знаю как можно сменить цветовую схему😍👍 Спасибо)
Объяснили очень грамотно, думаю если следовать инструкциям все получиться, ну может не с первого раза.
спасибо, что рассказали нам о том как легко можно поменять светлую и темную темы, эта информация действительно может пригодиться
Очень интересное и полезное видео, ведь использование переменных в CSS открывает нам возможность создания и применения тем на веб-странице. Спасибо за видео!
довольно таки полезная информация у вас на канале
максимально подробно и наглядно все объяснили , большое спасибо
Супер!
Честно говоря я и незнал об этой функции, спасибо за обзор.
Да, интересно получается, мне нравится такой подход.
Понятно и просто всё объяснили , видео получилось информативным и полезным.
т.к. я занимаюсь системным программированием и к фронту имею ровно никакое отношение, то могу просто отметить что Вы выглядите просто замечательно и вас очень приятно слушать!
Паралельно занимаюсь и через ваши советы плюс на стороне есть условия
Вы очень легко и четко обьяснили🙏🏻🙏🏻🙏🏻
Интеграция с вк, уровень👍
Еще интересно будет услышать про цветовые темы в фавиконках и собственно о создании темных стилей для сайта - что стоит менять, что не стоит, как не испортить доступность-удобность.
Хорошее обучающее видео, кстати давно искал как писать скрипты, и вот наконец-то вы меня порадовали. Спасибо!
Для решения многих проблем , возникающих у меня в процессе работы на компьютере , мне частенько приходится обращаться к дочери , а это зачастую очень неудобно . Ваш ролик поможет мне для решения вопросов . Спасибо и лайк .
Полностью с вами согласна. Тоже люблю во всем разбираться сама, но не всегда получается. А с помощью этого канала, намного проще.
очень полезная информация, легко и просто все рассказано)
Только упорство в этом деле даст результат, и ты будешь себя чувствовать как спец
Всегда благодарен людям которые делают обучающие ролики, экономят наша время и нежалеют свое!
Экономят? Этот ролик можно было в шортсы запихнуть, а не растягивать на 12 минут ))
спасибо за такой прекрасный видеообзор мне понравился для себя кое что полезное спасибо большое этому каналу который очень полезным побольше бы таких мне лайк и подписка
Хорошая возможность для смены темы в цветовом оформлении
Nützliches Video für diejenigen, die sich für dieses Thema interessieren!!!
Отличная информация для тех кто интересуется данной темой
о! color-scheme! Давно её ждали! Раньше приходилось писать кучу css, чтобы сделать это =)
Но я бы использовал hsl - кода было бы меньше
эта информация действительно может пригодиться...
Молодец, полезно 👍
Анна класс👌
Не знал о таком. Я как-то верстал темную-светлую тему и намучался под каждый тег подгонять свой цвет. Зря раньше видео не выпустила 🤣
Упс 😅
Интересное, но редко применяемое свойство. Очень редко захотят использовать такой кислотный черный. Надо что-то помягче для глаз. И по хорошему надо было рассказать и про prefers-color-scheme.
Очень полезно, спасибо) Однако, я так понимаю при перезагрузке страницы все слетит без localStorage?
Конечно. Цель видео была показать, как работать со стилями. Если дальше углубляться, то по хорошему еще бы сохранять выбранную тему на стороне пользователя.
Ок. Когда делаешь не по макетам - отлично помогает. Но в макетах для светлой и темной темы придется переносить каждый цвет и не факт, что то что в Светлой теме будет #333, в темной теме будет везде белым, зачастую будут варианты, здесь белым, а здесь #f6f6f6
Спасибо за видео. Но можете ещё рассказать про значения этого свойства как: only light/dark и про тип dark light?
Да, расскажу
@@annblok_webdev спасибо
Использование переменных в CSS открывает нам возможность создания и применения тем на веб-странице.
Да, тут слов нет, как выразить восторг этой качественной верстке светлой и тёмной темы без лишних стилей в CSS из-за color-scheme
Любопытно узнать, как сейчас обстоят дела с искусственным интеллектом по поводу верстки и изменения цветовых стилей.
Приходится быть на чеку и учиться на ходу чего не знал раньше
Идея для обложки видео - ангелок или демон)
Вообще круто! Но вот с bootstrap облом ((( Если подключен bootstrap.min.css, то эта штука не срабатывает, или я что-то делаю не так. А если нет bootstrap, то срабатывает, спасибо за супер мега лайф хак инфу
прикольный видео урок
сделайте по возможности по JavaScript подробный курс
бесплатный
Супер. Но есть нюанс. Добавь, пжл, код, чтобы при обновлении страницы тема не слетала, а оставалась такой, какую выбрал пользовтель.
Лучшая
Добрый день, подскажите мне как новичку в этой сфере, стоит ли сразу изучать бинарные массивы, или можно отложить их на потом?
Вообще то я привыкший переключать тему врукопашку и потому использование медиазапроса стало небольшой неожиданностью. В общем решение и так понятное. Я бы сделал немного по другому, но тоже коротко.
Хороший контент но это наверное для веб дизайна больше подходит.
👏👍
Можно для html с классом dark переопределить переменные, не вижу принципиальной разницы
Круто, оказывается в css переменные завезли
Они там и были, просто ты наверное не плотно изучал его и не знал об этом😊
Amazing
Привет, думаешь так вообще корректно делать? if (button.textContent === "Перейти на темную тему")
Если основной плюс этого подхода в том, что браузер сам допридумывает некоторые цвета, то какой от этого толк, если есть готовый дизайн, и все цвета должны соответствовать макету.
На мой взгляд, это можно использовать, как готовое решение, если дизайнер не участвует в проекте. К тому же, порой, какие-то моменты могут быть упущено и это свойство временно может спасти.
@@annblok_webdev эх, где б найти проекты без дизайнеров)) чтоб сделать все систематически, компонентно, лаконично и понятно)
А как получить в js со стороны пользователя true / false в зависимости от его световой темы?
Я до самого конца не понимал, как его использовать. Честно говоря, я для переключения темы всегда создавал 3 css файла (2 с переменными и 1 со стилем страницы), и просто менял свойство href тега link, к которому я привязал id
Сейчас почти на каждом сайте такое есть.
Анна, подписота спрашивает, как здесь на канале просмотреть ВСЕ видео? Без плейлистов. Тупо ВСЕ подряд - зарядить пачкой, а не тыкать в каждое?
Можно сделать, чтоб на сайте быд тип схемы выставненный в винде :)
Разве не нужно в колбек функцию аргументом передавать event, что бы потом к нему обратиться?
почему сначала к кнопке обращаемся через button, который получили из querySelector, а потом прямо по id themeToggle ?
По невнимательности. Так действительно было бы логичнее сделать) Пример в демке поправила.
Только начинаю свой путь во фронте и задумываюсь,а надо ли уже учить версту,если есть ии ....?
Я бы в скрипте проверял не тект, а наличие класса dark
color-scheme упрощает работу если дизайнером не определена темная тема в макете
Очень практичный урок по верстке. А фамилия Блок это псевдо или реальная фамилия?
Соль
Сложно на первый взгляд. Я из тех людей, кто всегда делает что-то не правильно. Или оно само так получается...
мне еще очень далеко до создания и верстке сайтов
Вроде бы всё просто так, а всё равно ничего непонятно.
Стили тёмной темы,будут потомками того же родительского класса.
А вы долго всему этому учились ?
Найс байт на превью со слайдером
Вот то что сво-во бордеры перекрашивает и прочие системные элементы делает кго по настоящему полезным.
-ytd-rich-grid-items-per-row: 4
event.preventDefault(); - переменная event не определена, т.ч. эта строка бессмысленная.