Верстка светлой и тёмной темы без лишних стилей в CSS из-за color-scheme

Рет қаралды 26,310

Күн бұрын

👇 Переходи по ссылке и смотри трансляцию с VK Open: vk.cc/coVQTQ
Реклама. ООО "В Контакте" Erid: LjN8JzLfq
Таймкоды:
00:00 Про color-scheme
01:22 VK Mini Apps
02:55 Разбор разметки
04:44 Пишем стили
08:43 Пишем скрипт
10:05 Проверяем результат
10:18 Выводы
Демо - codepen.io/anna_blok/pen/ZEmpLMb
Поддержка - caniuse.com/?search=color-scheme
Плейлист с новинками CSS - • Новинки CSS
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/

Пікірлер: 111

@annblok_webdev Жыл бұрын

✨ Поддержать выход нового полезного контента можно на Boosty: boosty.to/annblok

@user-me8cn1hk6j Жыл бұрын

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

@michaelkamko 10 ай бұрын

Я не знал такого. Переписывал все цаета лоя темной темы. Анюта, ты умничка! Спасибо!

@AlexandrosPapas Жыл бұрын

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

@annblok_webdev Жыл бұрын

❤

@user-xj6ur2ei9k Жыл бұрын

Ваше видео будет необычайно полезно для многих из нас! Новые технологии не всегда удается проследить!

@user-olena_shatun Жыл бұрын

Как всегда с новинками и полезной, а главным бесплатной и такой нужной информацией

@Alex_Presli Жыл бұрын

Хорошее обучающее видео, кстати давно искал как писать скрипты, и вот наконец-то вы меня порадовали. Спасибо!

@user-gz7mj1qj6h Жыл бұрын

Спасибо за подробные советы этой нелёгкой темы!

@sergeymickolaenko1161 Жыл бұрын

Да иногда возникал такой вопрос, благодаря вам теперь в курсе как это сделать💯👍

@JeanaUchiha Жыл бұрын

Очень четко и понятно все объяснили, огромное спасибо, что помогли разобраться с версткой тем

@alexwill7818 Жыл бұрын

Из опыта, на проектах дизайнеры все равно для всего и для фона и для бордеров поставят свои цвета, а чекбоксы вообще будут кастомные, так что переопределять придется Только для мини проектов на показ годится

@O1dCo1d Жыл бұрын

Поддерживаю. Также крайне удобно для цветовой темы использовать 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 и это уже другая история

@kobalt-tv-777 Жыл бұрын

Спасибо. )) Эта тема меня интересовала.

@Svet__alya Жыл бұрын

Я искала как же это можно сделать, и вы мне помогли, теперь я знаю как можно сменить цветовую схему😍👍 Спасибо)

@yurijshmelkov8320 Жыл бұрын

отличный механизм для применения. спасибо

@Youtuber__I Жыл бұрын

максимально подробно и наглядно все объяснили , большое спасибо

@user-sq9mb8qo3e Жыл бұрын

Очень интересное и полезное видео, ведь использование переменных в CSS открывает нам возможность создания и применения тем на веб-странице. Спасибо за видео!

@tetyana5295 Жыл бұрын

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

@tolasnisar2494 Жыл бұрын

Честно говоря я и незнал об этой функции, спасибо за обзор.

@user-hs7fi5se4f Жыл бұрын

Понятно и просто всё объяснили , видео получилось информативным и полезным.

@gamestudio9722 Жыл бұрын

Да, интересно получается, мне нравится такой подход.

@alinaevhenivn6 Жыл бұрын

Вы очень легко и четко обьяснили🙏🏻🙏🏻🙏🏻

@andreylagno2372 Жыл бұрын

неплохое видео про верстку светлой или темной темы.нужный контент

@marinagor Жыл бұрын

очень полезная информация, легко и просто все рассказано)

@fbdnfndbdbdb1523 Жыл бұрын

Спасибо вы мне очень помогли мало кто сейчас говорит об этом

@wizardoflightnings6841 Жыл бұрын

Супер!

@asiafruite26 Жыл бұрын

Вообще бомба, даже не знал про такую возможность ❤, Как дурачок все стили сам адаптировал на темную тему😅

@annblok_webdev Жыл бұрын

Главное, что теперь знаете, как надо 👍

@user-ol8wp5fs4l Жыл бұрын

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

@user-gq4lg1fq9u Жыл бұрын

Еще интересно будет услышать про цветовые темы в фавиконках и собственно о создании темных стилей для сайта - что стоит менять, что не стоит, как не испортить доступность-удобность.

@stalker8828 Жыл бұрын

довольно таки полезная информация у вас на канале

@911allcausticcamera9 Жыл бұрын

Паралельно занимаюсь и через ваши советы плюс на стороне есть условия

@user-hk6km8ou6d Жыл бұрын

Здравствуйте! Вы такая милая и очеравательная! Вам идут косы! И спасибо за видео!

@agustinoz 7 ай бұрын

Молодец, полезно 👍

@vavanmozg2915 Жыл бұрын

Полезное видео, для тех, кто интересуется этой темой!!!

@mclotos Жыл бұрын

о! color-scheme! Давно её ждали! Раньше приходилось писать кучу css, чтобы сделать это =) Но я бы использовал hsl - кода было бы меньше

@user-ct2dv3vr1n Жыл бұрын

Объяснили очень грамотно, думаю если следовать инструкциям все получиться, ну может не с первого раза.

@user-th4gy4sz8j 10 ай бұрын

Анна класс👌

@golovin.n Жыл бұрын

Интеграция с вк, уровень👍

@krakanosh Жыл бұрын

Крутой ролик, очень полезная информация. Я хоть и ударился в back-end но скиллы по верстке терять нельзя)). Спасибо😎👍

@annblok_webdev Жыл бұрын

Правильно! 😎

@vadymvv 10 ай бұрын

Я наоборот понял что недостаточно знаю фронт.

@CityGorsk Жыл бұрын

Вообще, это уже должны знать все, но такой новичек, как я, узнал об этой смене тем, только что от вас.

@viktordybach8763 Жыл бұрын

Отличная информация для тех кто интересуется данной темой

@gobpblueex Жыл бұрын

Не поставить лайк под этим видео совершено невозможно. Через 5 минут рука самопроизвольно тянется к кнопке подписки, а сейчас с трудом себя сдерживаю, чтоб не сделать предложение :).

@Stanley19708 Жыл бұрын

Только упорство в этом деле даст результат, и ты будешь себя чувствовать как спец

@elinalara1752 Жыл бұрын

Хорошая возможность для смены темы в цветовом оформлении

@through-it 10 ай бұрын

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

@fcvaivai...............1268 Жыл бұрын

эта информация действительно может пригодиться...

@Heymdall_ 11 ай бұрын

Добрый день, подскажите мне как новичку в этой сфере, стоит ли сразу изучать бинарные массивы, или можно отложить их на потом?

@mybestislands8646 Жыл бұрын

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

@user-sb5dv5pe8k Жыл бұрын

Полностью с вами согласна. Тоже люблю во всем разбираться сама, но не всегда получается. А с помощью этого канала, намного проще.

@rojiblanco5553 Жыл бұрын

Nützliches Video für diejenigen, die sich für dieses Thema interessieren!!!

@user-dr8bp1ln2x Жыл бұрын

Интересное, но редко применяемое свойство. Очень редко захотят использовать такой кислотный черный. Надо что-то помягче для глаз. И по хорошему надо было рассказать и про prefers-color-scheme.

@Favorables Жыл бұрын

Лучшая

@yurok1991 Жыл бұрын

Не знал о таком. Я как-то верстал темную-светлую тему и намучался под каждый тег подгонять свой цвет. Зря раньше видео не выпустила 🤣

@annblok_webdev Жыл бұрын

Упс 😅

@user-gw1qc9oy2c Жыл бұрын

Можно для html с классом dark переопределить переменные, не вижу принципиальной разницы

@melnikovGames Жыл бұрын

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

@annblok_webdev Жыл бұрын

Конечно. Цель видео была показать, как работать со стилями. Если дальше углубляться, то по хорошему еще бы сохранять выбранную тему на стороне пользователя.

@liki7483 Жыл бұрын

Спасибо за видео. Но можете ещё рассказать про значения этого свойства как: only light/dark и про тип dark light?

@annblok_webdev Жыл бұрын

Да, расскажу

@liki7483 Жыл бұрын

@@annblok_webdev спасибо

@via754 Жыл бұрын

Ок. Когда делаешь не по макетам - отлично помогает. Но в макетах для светлой и темной темы придется переносить каждый цвет и не факт, что то что в Светлой теме будет #333, в темной теме будет везде белым, зачастую будут варианты, здесь белым, а здесь #f6f6f6

@sashabest1479 Жыл бұрын

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

@Oxygen_56 Жыл бұрын

Привет, думаешь так вообще корректно делать? if (button.textContent === "Перейти на темную тему")

@user-dw2tc4cq9x Жыл бұрын

Использование переменных в CSS открывает нам возможность создания и применения тем на веб-странице.

@user-xc2yu7ib3r Жыл бұрын

А как получить в js со стороны пользователя true / false в зависимости от его световой темы?

@user-iz9qp7xt2d Жыл бұрын

Всегда благодарен людям которые делают обучающие ролики, экономят наша время и нежалеют свое!

@user-he7sp9ik1q 11 ай бұрын

Экономят? Этот ролик можно было в шортсы запихнуть, а не растягивать на 12 минут ))

@jamjam3337 Жыл бұрын

👏👍

@petersen1554 Жыл бұрын

Супер. Но есть нюанс. Добавь, пжл, код, чтобы при обновлении страницы тема не слетала, а оставалась такой, какую выбрал пользовтель.

@benhummer185 Жыл бұрын

Можно сделать, чтоб на сайте быд тип схемы выставненный в винде :)

@jmol1003 Жыл бұрын

Приходится быть на чеку и учиться на ходу чего не знал раньше

@True_Ulatim Жыл бұрын

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

@user-xo7pd1jr7m Жыл бұрын

Вообще круто! Но вот с bootstrap облом ((( Если подключен bootstrap.min.css, то эта штука не срабатывает, или я что-то делаю не так. А если нет bootstrap, то срабатывает, спасибо за супер мега лайф хак инфу

@user-FedorVorobyev Жыл бұрын

Да, тут слов нет, как выразить восторг этой качественной верстке светлой и тёмной темы без лишних стилей в CSS из-за color-scheme

@user-jq4mm8it1g Жыл бұрын

прикольный видео урок сделайте по возможности по JavaScript подробный курс бесплатный

@raselbabu2486 Жыл бұрын

Amazing

@ksasrg Жыл бұрын

почему сначала к кнопке обращаемся через button, который получили из querySelector, а потом прямо по id themeToggle ?

@annblok_webdev Жыл бұрын

По невнимательности. Так действительно было бы логичнее сделать) Пример в демке поправила.

@flacs Жыл бұрын

Идея для обложки видео - ангелок или демон)

@nekonatapersono8754 Жыл бұрын

Подскажите пожалуйста, что за IDE используете?)

@annblok_webdev Жыл бұрын

Codepen

@nekonatapersono8754 Жыл бұрын

@@annblok_webdev спасибо)

@Serega5j 8 ай бұрын

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

@fruktiliyagoda6555 10 ай бұрын

Я до самого конца не понимал, как его использовать. Честно говоря, я для переключения темы всегда создавал 3 css файла (2 с переменными и 1 со стилем страницы), и просто менял свойство href тега link, к которому я привязал id

@senya959 Жыл бұрын

Хороший контент но это наверное для веб дизайна больше подходит.

@PearlDpUa Жыл бұрын

Сейчас почти на каждом сайте такое есть.

@MrLizard Жыл бұрын

Круто, оказывается в css переменные завезли

@justfisher2920 Жыл бұрын

Они там и были, просто ты наверное не плотно изучал его и не знал об этом😊

@user-eq9kk8cs6c 10 ай бұрын

Только начинаю свой путь во фронте и задумываюсь,а надо ли уже учить версту,если есть ии ....?

@vadymvv 10 ай бұрын

Я бы в скрипте проверял не тект, а наличие класса dark

@rexenpro2747 Жыл бұрын

Анна, подписота спрашивает, как здесь на канале просмотреть ВСЕ видео? Без плейлистов. Тупо ВСЕ подряд - зарядить пачкой, а не тыкать в каждое?

@shaykhinurov 10 ай бұрын

Соль

@never.m1nd 2 ай бұрын

color-scheme упрощает работу если дизайнером не определена темная тема в макете

@user-is8ov1km3t 10 ай бұрын

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

@annblok_webdev 10 ай бұрын

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

@user-is8ov1km3t 10 ай бұрын

@@annblok_webdev эх, где б найти проекты без дизайнеров)) чтоб сделать все систематически, компонентно, лаконично и понятно)