CSS light-dark() - Dark Mode a Partir de Agora é ASSIM!
HTML-код
- Опубликовано: 3 окт 2024
- light-dark() é a nova função de CSS para fazer Dark Mode. Saiba mais e faça Dark Mode ASSIM a partir de agora.
Esqueça tudo o que você sabe sobre Dark Mode no CSS! A partir de agora, você vai usar a nova função de CSS light-dark().
Com essa nova feature de CSS, você vai conseguir fazer código relacionado a dark mode e light mode da maneira mais simples e direta possível, usando o que há de mais moderno em CSS no momento.
Essa nova função de cores de CSS permite especificar 2 cores para uma propriedade CSS de uma só vez, uma para light e outra para dark, o que vai agilizar e tornar qualquer código muito mais simples e legível.
➡️ Dark Mode com CSS: Simples, Rápido e Fácil
• Dark Mode com CSS: Sim...
✏️ Vários artigos sobre Dark Mode em nosso blog
desenvolviment...
==========
📷 Equipamentos usados para gravar este vídeo
Sony Alpha a6400: amzn.to/3LZ9Zkv
Cartão 128GB Extreme PRO SDXC: amzn.to/3rqVPRg
Tripé Weifeng WT6734: amzn.to/3LYWUb4
==========
Assine o canal! bit.ly/dpw-youtube
Facebook: / desenvolvweb
Instagram: / desenvolvweb
Twitter: / desenvolvweb
Conheça o blog desenvolvimento para web: desenvolviment...
esse é o melhor canal de css que existe, muito bom
Muito obrigado pela consideração, Igor. Um dia chegamos lá... 😃
@@dpwoficialDepois que eu descobri esse canal meu CSS evoluiu muito, só tenho a te agradecer por esse conhecimento fantástico ❤🎉
@@igorvinicios4704 Eu que agradeço demais pelas palavras! :D
Obrigado, Tarcio. Sempre bom ver você compartilhando seus conhecimentos.
Eu que agradeço! Tamos aê.
Um detalhe, pra emular a preferência do usuário, tem um pincelzinho ali no painel de CSS do devtools ao lado direito da barra de filtro, é basicamente um atalho pra onde você chegou pelo painel de "Rendering"
Rapaaaz, esqueci de falar do pincelzim! x)
+1 inscrito, gostei bastante do modelo de vídeo, direto, rápido, prático e bem explicado. Completo!
Muito obrigado 😁
Excelente, mais uma coisa linda de Deus do CSS
haha CSS é demais!
Acredito que de para otimizar ainda mais o uso da função a implementando em variáveis ao invés de diretamente nas classes; tipo:
```
:root {
color-scheme: light dark;
--primary-color: light-dark(#f3f, #a00);
}
body {
background-color: var(--primary-color);
}
```
Gostei vou começar a implementar nos meus projetinhos!
Esse é o uso mais "do mundo real", mesmo. Comentei rapidamente que dá para usar em variáveis, mas fiz sem mais por motivos didáticos.
Provavelmente, teremos mais vídeos sobre o assunto, daí vou mostrar dessa forma.
vlwww
Muito top cara 👏🏾👏🏾👏🏾, show de bola, pena que temos que esperar um tempo até que esses recursos novos vão se adaptando aos navegadores, dependendo da aplicação já da pra ir simulando né.
Pois é, tem sempre uma curva de adoção... Que eu saiba, ainda não tem polyfill desse carinha, mas já dá para ir brincando sim.
Excelente conteúdo viu, parabéns!
Obrigado, João!
Só olhando o vídeo eu achei muita coisa pra digitar, assim como na media query, tem que duplicar o valor, diferente de custom properties que vc muda só baseando numa classe dentro do body. Mas todos sabemos dos BOs de flash que tem nessa abordagem né, vou testar essa função pra ver como vai se vou gostar
Com light-dark() não precisa duplicar valores, somente colocar nos params da função um valor para light e outro para dark.
Ao invés de passar isso pra cada elemento que vá fazer algum uso de cor, defina nas custom properties usadas como design-tokens, e aí resolve o que provavelmente vc identificou como incomôdo. A definição fica centralizada somente em um lugar.
O legal é que ainda dá pra sobrescrever a propriedade em si na cascata quando fizer sentido tbm. Parece bem melhor do que um media query sobrescrevendo todos os tokens, pelo menos.
Que massaa, adorei. Obrigada por compartilhar!
Qual video vc recomendou no final? É que pra mim nao apareceu, desculpa.. poderia colocar na descrição, por favor? 😅
Obrigado, Pats!
Então... Meu eu-do-futuro ainda vai fazer esse vídeo e colocar aí no final. 😅
Mas nesse você já encontra bastante coisa legal: ruclips.net/video/57PPx_EjlfY/видео.html
Cara, muito da hora, não sabia da existência dessa função! Sabe se tem algo assim pra imagens?
Se for dar um talento em imagens dependendo do tema, por enquanto, o jeito é usar refers-color-scheme, mesmo.
Aí dá para colocar um filtro ou algo assim para se adaptarem melhor.
Muito bom! 🎉
Muito obrigado, Eduardo! 😁
não entendi o only. Não seria só especificar uma cor só?
Pode parecer que sim, mas perceba que, quando se define o color-scheme no :root, você está informando que isso vale para todo o site, certo?
Daí, podem existir algumas situações, como:
- Algum elemento específico não pode dar suporte ao outro esquema de cores (tipo um ad de terceiros);
- Um dos temas ainda está em desenvolvimento e não é disponibilizado no momento (ou por falta de budget etc.);
- Você simplesmente quer que o site só tenha 1 esquema de cores (questões de direção de arte);
- Dentre outros.
Enfim, as situações podem ser várias.
Diz aí se eu entendi sua pergunta corretamente e consegui responder.
vlwww
Lembrando que a compatibilidade com browsers hoje é bem fraca. Nem 50% na data deste vídeo.
Tal como mostrado no vídeo. 👍
Sinceramente, não gostei muito. Há formas de fazer temas claro/escuro atualmente que separa apropriadamente os elementos de cada um em um bloco conciso em que facilmente você consegue identificar e modificar elementos de um tema. Com essa nova função, não existe mais essa separação em blocos e faz-se necessário ter que escrever dois valores sempre, em contraste com outros métodos que basta atribuir uma variável para um valor, e ao querer mudar o tema, mudar apenas o valor da variável.
light-dark() é como fazer isso de trocar o valor da variável caso seja dark, com a diferença que já se define tudo de uma vez só.
@@dpwoficialruim, pq vc condiciona as variáveis para light e dark e o alto contraste fica de fora...
@@iamcoelho Se uma variável CSS tem o valor com light-dark(), ele ainda pode ser trocado com base em alguma media feature.
@@dpwoficial justo! Mas seria legal estenderem isso para esse viés da acessibilidade tb... Pq na prática, são regras tratadas da mesma forma, né? Pelo menos, eu as colecionaria dessa forma. Abs
Dark mode sem Javascript? Interessante...
Já dá para fazer há tempos, conforme mostrado no início; light-dark() é um facilitador.
Ótimo vídeo, usei esses dias a prefers-color-scheme.
Bacana. Agora já pode ir brincando com a nova função também. 👍
MDS.
😁