Skip to main content
adicionou 52 caracteres ao conteúdo
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

A forma exata como o navegador vai interagir com o OS eu não dizer exatamente. O que eu posso dizer é que a configuração do color schemecolor scheme é definida no próprio OS, e normalmente a intenção de se optar por um tema darkdark ou lightlight é por questões de contraste de cores assim melhorando a acessibilidade. No fundo essa feature foi criada para melhorar a leitura de quem tem problemas de legibilidade, invertendo a cor padrão de fundo branco e fonte preta, para fonte branca e fundo preto (logicamente existem outras correções de cores para quem precisa de auto contraste para poder ler em telas).

Hoje o iOS e o Windows 10 oferecem opções para o usuário configurar o OS como um todo para funcionar com um tema lightlight (default) ou tema Darkdark se optar por escolher manualmente essa opção nas configurações do OS.

O Chrome particularmente não fica preso nisso, ele oferece alguns plugins como esse que te auxiliam a colocar o documento que está acessando em auto contraste, ou tema tema darkdark se preferir.

Lembro mais uma vez que o ponto principal desse tipo de "artifício" é melhorar a acessibilidade e leitura, não simplesmente colocar um tema escuro porque é bonitinho. Tem um fundamento por trás das telas escuras (além de poupar alguma energia e economizar bateria em dispositivos móveis, mais sensíveis a isso). Aqui tem um artigo bem interessante de 2019 que fala da adoção do dark modedark mode no WhatsApp e no Google por exemplo :D.

O próprio Material Design tem um guia de estilos que já trata o dark-themedark-theme. Repare como ele entra em alguns detalhes de acessibilidade de contraste entre Cor/Fundo.

E a Google não para por aí. Recentemente foi liberado o dark-modedark-mode para o Google Chrome.

Atualmente esse recurso de tela escura tem sido amplamente utilizado para melhorar a UX dos usuários. No site do ilustríssimo Willian Justen podemos ver um exemplo de dark modedark mode aplicado.

Então não necessariamente você precisa do CSS para mudar um tema. Não fique dependente do OS do usuário para deixar seu site acessível. Tem gente que usa até hoje Windows XP que é um OS que não tem a opção de Color SchemeColor Scheme nas configurações. Então se precisar use JavaScript para preparar seu site para ser mais inclusivo com quem tem problemas de visão. Não espere o suporte dos browsers para essas novas features, melhore a UX já =)

Nos drafts dos Media Queries de nível 5Media Queries de nível 5 ainda existe muito mais por vir como se pode consultar na documentação oficial da W3C.

  • prefers-reduced-transparencyprefers-reduced-transparency: O recurso de mídia de prefers-reduced-transparency é usado para detectar se o usuário solicitou ao sistema minimizar a quantidade de efeitos de camada transparente ou translúcida que utiliza.
  • prefers-contrastprefers-contrast: O recurso de mídia de prefers-contrast é usado para detectar se o usuário solicitou que o sistema aumente ou diminua a quantidade de contraste entre as cores adjacentes. Por exemplo, muitos usuários têm dificuldade em ler texto que tem uma pequena diferença em contraste com o plano de fundo do texto e prefere um contraste maior.
  • forced-colorsforced-colors: O recurso de mídia de forced-colors é usado para detectar se o user-agent ativou um modo de cores forçadas, onde aplica uma paleta de cores limitada escolhida pelo usuário na página.

Nos primórdios já se usava o dark modedark mode, como você pode ver nesse interessante artigo.

A forma exata como o navegador vai interagir com o OS eu não dizer exatamente. O que eu posso dizer é que a configuração do color scheme é definida no próprio OS, e normalmente a intenção de se optar por um tema dark ou light é por questões de contraste de cores assim melhorando a acessibilidade. No fundo essa feature foi criada para melhorar a leitura de quem tem problemas de legibilidade, invertendo a cor padrão de fundo branco e fonte preta, para fonte branca e fundo preto (logicamente existem outras correções de cores para quem precisa de auto contraste para poder ler em telas).

Hoje o iOS e o Windows 10 oferecem opções para o usuário configurar o OS como um todo para funcionar com um tema light (default) ou tema Dark se optar por escolher manualmente essa opção nas configurações do OS.

O Chrome particularmente não fica preso nisso, ele oferece alguns plugins como esse que te auxiliam a colocar o documento que está acessando em auto contraste, ou tema dark se preferir.

Lembro mais uma vez que o ponto principal desse tipo de "artifício" é melhorar a acessibilidade e leitura, não simplesmente colocar um tema escuro porque é bonitinho. Tem um fundamento por trás das telas escuras (além de poupar alguma energia e economizar bateria em dispositivos móveis, mais sensíveis a isso). Aqui tem um artigo bem interessante de 2019 que fala da adoção do dark mode no WhatsApp e no Google por exemplo :D

O próprio Material Design tem um guia de estilos que já trata o dark-theme. Repare como ele entra em alguns detalhes de acessibilidade de contraste entre Cor/Fundo.

E a Google não para por aí. Recentemente foi liberado o dark-mode para o Google Chrome.

Atualmente esse recurso de tela escura tem sido amplamente utilizado para melhorar a UX dos usuários. No site do ilustríssimo Willian Justen podemos ver um exemplo de dark mode aplicado.

Então não necessariamente você precisa do CSS para mudar um tema. Não fique dependente do OS do usuário para deixar seu site acessível. Tem gente que usa até hoje Windows XP que é um OS que não tem a opção de Color Scheme nas configurações. Então se precisar use JavaScript para preparar seu site para ser mais inclusivo com quem tem problemas de visão. Não espere o suporte dos browsers para essas novas features, melhore a UX já =)

Nos drafts dos Media Queries de nível 5 ainda existe muito mais por vir como se pode consultar na documentação oficial da W3C.

  • prefers-reduced-transparency: O recurso de mídia de prefers-reduced-transparency é usado para detectar se o usuário solicitou ao sistema minimizar a quantidade de efeitos de camada transparente ou translúcida que utiliza.
  • prefers-contrast: O recurso de mídia de prefers-contrast é usado para detectar se o usuário solicitou que o sistema aumente ou diminua a quantidade de contraste entre as cores adjacentes. Por exemplo, muitos usuários têm dificuldade em ler texto que tem uma pequena diferença em contraste com o plano de fundo do texto e prefere um contraste maior.
  • forced-colors: O recurso de mídia de forced-colors é usado para detectar se o user-agent ativou um modo de cores forçadas, onde aplica uma paleta de cores limitada escolhida pelo usuário na página.

Nos primórdios já se usava o dark mode, como você pode ver nesse interessante artigo.

A forma exata como o navegador vai interagir com o OS eu não dizer exatamente. O que eu posso dizer é que a configuração do color scheme é definida no próprio OS, e normalmente a intenção de se optar por um tema dark ou light é por questões de contraste de cores assim melhorando a acessibilidade. No fundo essa feature foi criada para melhorar a leitura de quem tem problemas de legibilidade, invertendo a cor padrão de fundo branco e fonte preta, para fonte branca e fundo preto (logicamente existem outras correções de cores para quem precisa de auto contraste para poder ler em telas).

Hoje o iOS e o Windows 10 oferecem opções para o usuário configurar o OS como um todo para funcionar com um tema light (default) ou tema dark se optar por escolher manualmente essa opção nas configurações do OS.

O Chrome particularmente não fica preso nisso, ele oferece alguns plugins como esse que te auxiliam a colocar o documento que está acessando em auto contraste, ou tema dark se preferir.

Lembro mais uma vez que o ponto principal desse tipo de "artifício" é melhorar a acessibilidade e leitura, não simplesmente colocar um tema escuro porque é bonitinho. Tem um fundamento por trás das telas escuras (além de poupar alguma energia e economizar bateria em dispositivos móveis, mais sensíveis a isso). Aqui tem um artigo bem interessante de 2019 que fala da adoção do dark mode no WhatsApp e no Google por exemplo.

O próprio Material Design tem um guia de estilos que já trata o dark-theme. Repare como ele entra em alguns detalhes de acessibilidade de contraste entre Cor/Fundo.

E a Google não para por aí. Recentemente foi liberado o dark-mode para o Google Chrome.

Atualmente esse recurso de tela escura tem sido amplamente utilizado para melhorar a UX dos usuários. No site do ilustríssimo Willian Justen podemos ver um exemplo de dark mode aplicado.

Então não necessariamente você precisa do CSS para mudar um tema. Não fique dependente do OS do usuário para deixar seu site acessível. Tem gente que usa até hoje Windows XP que é um OS que não tem a opção de Color Scheme nas configurações. Então se precisar use JavaScript para preparar seu site para ser mais inclusivo com quem tem problemas de visão. Não espere o suporte dos browsers para essas novas features, melhore a UX já =)

Nos drafts dos Media Queries de nível 5 ainda existe muito mais por vir como se pode consultar na documentação oficial da W3C.

  • prefers-reduced-transparency: O recurso de mídia de prefers-reduced-transparency é usado para detectar se o usuário solicitou ao sistema minimizar a quantidade de efeitos de camada transparente ou translúcida que utiliza.
  • prefers-contrast: O recurso de mídia de prefers-contrast é usado para detectar se o usuário solicitou que o sistema aumente ou diminua a quantidade de contraste entre as cores adjacentes. Por exemplo, muitos usuários têm dificuldade em ler texto que tem uma pequena diferença em contraste com o plano de fundo do texto e prefere um contraste maior.
  • forced-colors: O recurso de mídia de forced-colors é usado para detectar se o user-agent ativou um modo de cores forçadas, onde aplica uma paleta de cores limitada escolhida pelo usuário na página.

Nos primórdios já se usava o dark mode, como você pode ver nesse interessante artigo.

adicionou 52 caracteres ao conteúdo
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

A forma exata como o navegador vai interagir com o OS eu não dizer exatamente. O que eu posso dizer é que a configuração do color scheme é definida no próprio OS, e normalmente a intenção de se optar por um tema dark ou light é por questões de contraste de cores assim melhorando a acessibilidade. No fundo essa feature foi criada para melhoramelhorar a leitura de quem tem problemas de legibilidade, invertendo a coracor padrão de fundo branco e fonte preta, para fonte branca e fundo preto (logicamente existem outras correções de cores para quem precisa de auto contraste para poder ler em telas).

Hoje o iOS e o Windows 10 oferecem opções dopara o usuário configurar o OS como um todo para funcionar com um tema light (default) ou tema Dark se optar por escolher manualmente essa opção nas configurações do OS.

Veja por exemplo que entrando nas configs do Win 10 vcvocê pode optar por escolher algum desses temas que vc achemache melhor para facilitar sua leitura em telas.

O Chrome particularmente não fica preso nisso, ele oferece alguns plugins como essecomo esse que te auxiliam vc a colocar o documento que está acessando em auto contraste, ou tema dark se preferir https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph.

Lembro mais uma vez que o ponto principal desse tipo de "artifício" é melhorar a acessibilidade e leitura, não simplesmente colocar um tema escuro pqporque é bonitinho. Tem um fundamentefundamento por traztrás das telas escuras (além de poupar alguma energia e economizar bateria em dispositivos móveis, mais sensíveis a isso). Aqui tem um artigoAqui tem um artigo bem interessante de 2019 que fala da adoção do dark mode no WhatsApp e no Google por exemplo :D

https://www.techtudo.com.br/noticias/2019/04/o-que-e-modo-noturno-tela-escura-deve-chegar-ao-whatsapp-e-android-10.ghtml

inserir a descrição da imagem aqui

O próprio Material Design tem um guia de estilos que já trata o dark-theme https://material.io/design/color/dark-theme.html#ui-applicationguia de estilos que já trata o dark-theme. Repare como ele entra em alguns detalhes de acessibilidade de contraste entre Cor/Fundo.

AE a Google não para por ai. Recentemente foi liberado o dark-mode para o Google Chrome https://tecnoblog.net/278916/google-chrome-melhora-modo-noturno-windows/Recentemente foi liberado o dark-mode para o Google Chrome.

Além disso, o próprio browser da Google o(o Chrome,) já é capaz de reconhecer as preferenciaspreferências do tema escolhido pelo usuário ée habilita ou não o dark-theme inclusive no DevTools.

Atualmente esse recurso de tela escura tem sido amplamente utilizado para melhorar a UX dos usuários, aqui no site do ilustríssimo Willian Justen. https://willianjusten.com.br/No site do ilustríssimo Willian Justen podemos ver um exemplo de dark mode aplicado.

Então não necessariamente vcvocê precisa do CSS para mudar um tema. Não fique dependente do OS do usuário para deixar seu site acessível. Tem gente que usa até hj hoje Windows XP que é um OS que não tem a opção de Color Scheme nas configurações. Então se precisar use JSJavaScript para preparar seu site para ser mais inclusivo com quem tem problemas de visão. Não espere o suporte dos browserbrowsers para essas novas features, melhormelhore a UX já =)

Teoricamente o seu código está correto e deve funcionar sim! Porém lembre-se de consultar o suporte dos browsers, pois não são todos que tem suporte ao prefers-color-scheme.

OBS: Parece não existeexistir muitos estudos que comprovem que a tela escura melhormelhora a legibilidade ou mesmo a produtividade, na verdade ao contrário disso... Recomendo a leitura desse artigo do Medium a respeito disso https://onezero.medium.com/dark-mode-isnt-the-answer-to-our-screen-problems-1b9db4ef06fbdesse artigo do Medium a respeito disso.

Nos drafts dos Media Queries de nível 5 ainda existe muito mais por vir como se pode consultar na documentação oficial da W3C aqui https://drafts.csswg.org/mediaqueries-5/documentação oficial da W3C.

Nos primórdios já se usausava o dark mode, como vcvocê pode ver nesse interessante artigo https://web.dev/prefers-color-scheme/nesse interessante artigo.

Fundo escuro com letra clara não é algo novo, talvez a primeira interface de texto em monitor que tenha surgido já tenha sido escura com com letras claras. Os saudosistas certamente vão se lembrar dessa image.imagem:

A forma exata como o navegador vai interagir com o OS eu não dizer exatamente. O que eu posso dizer é que a configuração do color scheme é definida no próprio OS, e normalmente a intenção de se optar por um tema dark ou light é por questões de contraste de cores assim melhorando a acessibilidade. No fundo essa feature foi criada para melhora a leitura de quem tem problemas de legibilidade, invertendo a cora padrão de fundo branco e fonte preta, para fonte branca e fundo preto (logicamente existem outras correções de cores para quem precisa de auto contraste para poder ler em telas)

Hoje o iOS e o Windows 10 oferecem opções do usuário configurar o OS como um todo para funcionar com um tema light (default) ou tema Dark se optar por escolher manualmente essa opção nas configurações do OS

Veja por exemplo que entrando nas configs do Win 10 vc pode optar por escolher algum desses temas que vc achem melhor para facilitar sua leitura em telas.

O Chrome particularmente não fica preso nisso, ele oferece alguns plugins como esse que auxiliam vc a colocar o documento que está acessando em auto contraste, ou tema dark se preferir https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph

Lembro mais uma vez que o ponto principal desse tipo de "artifício" é melhorar a acessibilidade e leitura, não simplesmente colocar um tema escuro pq é bonitinho. Tem um fundamente por traz das telas escuras (além de poupar alguma energia e economizar bateria em dispositivos móveis, mais sensíveis a isso). Aqui tem um artigo bem interessante de 2019 que fala da adoção do dark mode no WhatsApp e no Google por exemplo :D

https://www.techtudo.com.br/noticias/2019/04/o-que-e-modo-noturno-tela-escura-deve-chegar-ao-whatsapp-e-android-10.ghtml

inserir a descrição da imagem aqui

O próprio Material Design tem um guia de estilos que já trata o dark-theme https://material.io/design/color/dark-theme.html#ui-application Repare como ele entra em alguns detalhes de acessibilidade de contraste entre Cor/Fundo

A a Google não para por ai. Recentemente foi liberado o dark-mode para o Google Chrome https://tecnoblog.net/278916/google-chrome-melhora-modo-noturno-windows/

Além disso, o próprio browser da Google o Chrome, já é capaz de reconhecer as preferencias do tema escolhido pelo usuário é habilita ou não o dark-theme inclusive no DevTools

Atualmente esse recurso de tela escura tem sido amplamente utilizado para melhorar a UX dos usuários, aqui no site do ilustríssimo Willian Justen https://willianjusten.com.br/ podemos ver um exemplo de dark mode aplicado

Então não necessariamente vc precisa do CSS para mudar um tema. Não fique dependente do OS do usuário para deixar seu site acessível. Tem gente que usa até hj Windows XP que é um OS que não tem a opção de Color Scheme nas configurações. Então se precisar use JS para preparar seu site para ser mais inclusivo com quem tem problemas de visão. Não espere o suporte dos browser para essas novas features, melhor a UX já =)

Teoricamente o seu código está correto e deve funcionar sim! Porém lembre-se de consultar o suporte dos browsers, pois não são todos que tem suporte ao prefers-color-scheme

OBS: Parece não existe muitos estudos que comprovem que a tela escura melhor a legibilidade ou mesmo a produtividade, na verdade ao contrário disso... Recomendo a leitura desse artigo do Medium a respeito disso https://onezero.medium.com/dark-mode-isnt-the-answer-to-our-screen-problems-1b9db4ef06fb

Nos drafts dos Media Queries de nível 5 ainda existe muito mais por vir como se pode consultar na documentação oficial da W3C aqui https://drafts.csswg.org/mediaqueries-5/

Nos primórdios já se usa o dark mode, como vc pode ver nesse interessante artigo https://web.dev/prefers-color-scheme/

Fundo escuro com letra clara não é algo novo, talvez a primeira interface de texto em monitor que tenha surgido já tenha sido escura com com letras claras. Os saudosistas certamente vão se lembrar dessa image.

A forma exata como o navegador vai interagir com o OS eu não dizer exatamente. O que eu posso dizer é que a configuração do color scheme é definida no próprio OS, e normalmente a intenção de se optar por um tema dark ou light é por questões de contraste de cores assim melhorando a acessibilidade. No fundo essa feature foi criada para melhorar a leitura de quem tem problemas de legibilidade, invertendo a cor padrão de fundo branco e fonte preta, para fonte branca e fundo preto (logicamente existem outras correções de cores para quem precisa de auto contraste para poder ler em telas).

Hoje o iOS e o Windows 10 oferecem opções para o usuário configurar o OS como um todo para funcionar com um tema light (default) ou tema Dark se optar por escolher manualmente essa opção nas configurações do OS.

Veja por exemplo que entrando nas configs do Win 10 você pode optar por escolher algum desses temas que ache melhor para facilitar sua leitura em telas.

O Chrome particularmente não fica preso nisso, ele oferece alguns plugins como esse que te auxiliam a colocar o documento que está acessando em auto contraste, ou tema dark se preferir.

Lembro mais uma vez que o ponto principal desse tipo de "artifício" é melhorar a acessibilidade e leitura, não simplesmente colocar um tema escuro porque é bonitinho. Tem um fundamento por trás das telas escuras (além de poupar alguma energia e economizar bateria em dispositivos móveis, mais sensíveis a isso). Aqui tem um artigo bem interessante de 2019 que fala da adoção do dark mode no WhatsApp e no Google por exemplo :D

inserir a descrição da imagem aqui

O próprio Material Design tem um guia de estilos que já trata o dark-theme. Repare como ele entra em alguns detalhes de acessibilidade de contraste entre Cor/Fundo.

E a Google não para por . Recentemente foi liberado o dark-mode para o Google Chrome.

Além disso, o próprio browser da Google (o Chrome) já é capaz de reconhecer as preferências do tema escolhido pelo usuário e habilita ou não o dark-theme inclusive no DevTools.

Atualmente esse recurso de tela escura tem sido amplamente utilizado para melhorar a UX dos usuários. No site do ilustríssimo Willian Justen podemos ver um exemplo de dark mode aplicado.

Então não necessariamente você precisa do CSS para mudar um tema. Não fique dependente do OS do usuário para deixar seu site acessível. Tem gente que usa até hoje Windows XP que é um OS que não tem a opção de Color Scheme nas configurações. Então se precisar use JavaScript para preparar seu site para ser mais inclusivo com quem tem problemas de visão. Não espere o suporte dos browsers para essas novas features, melhore a UX já =)

Teoricamente o seu código está correto e deve funcionar sim! Porém lembre-se de consultar o suporte dos browsers, pois não são todos que tem suporte ao prefers-color-scheme.

OBS: Parece não existir muitos estudos que comprovem que a tela escura melhora a legibilidade ou mesmo a produtividade, na verdade ao contrário disso... Recomendo a leitura desse artigo do Medium a respeito disso.

Nos drafts dos Media Queries de nível 5 ainda existe muito mais por vir como se pode consultar na documentação oficial da W3C.

Nos primórdios já se usava o dark mode, como você pode ver nesse interessante artigo.

Fundo escuro com letra clara não é algo novo, talvez a primeira interface de texto em monitor que tenha surgido já tenha sido escura com com letras claras. Os saudosistas certamente vão se lembrar dessa imagem:

inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Além disso, o próprio browser da Google o Chrome, já é capaz de reconhecer as preferencias do tema escolhido pelo usuário é habilita ou não o dark-theme inclusive no DevTools

inserir a descrição da imagem aqui

Atualmente esse recurso de tela escura tem sido amplamente utilizado para melhorar a UX dos usuários, aqui no site do ilustríssimo Willian Justen https://willianjusten.com.br/ podemos ver um exemplo de dark mode aplicado

Nos primórdios já se usa o dark mode, como vc pode ver nesse interessante artigo https://web.dev/prefers-color-scheme/

Fundo escuro com letra clara não é algo novo, talvez a primeira interface de texto em monitor que tenha surgido já tenha sido escura com com letras claras. Os saudosistas certamente vão se lembrar dessa image.

inserir a descrição da imagem aqui

Nos primordios já se usa o dark mode, como vc pode ver nesse interessante artigo https://web.dev/prefers-color-scheme/

Atualmente esse recurso de tela escura tem sido amplamente utilizado para melhorar a UX dos usuários, aqui no site do ilustríssimo Willian Justen https://willianjusten.com.br/ podemos ver um exemplo de dark mode aplicado

Fundo escuro com letra clara não é algo novo, talvez a primeira interface de texto em monitor que tenha surgido já tenha sido escura com com letras claras. Os saudosistas certamente vão se lembrar dessa image.

inserir a descrição da imagem aqui

Nos primordios já se usa o dark mode, como vc pode ver nesse interessante artigo https://web.dev/prefers-color-scheme/

Além disso, o próprio browser da Google o Chrome, já é capaz de reconhecer as preferencias do tema escolhido pelo usuário é habilita ou não o dark-theme inclusive no DevTools

inserir a descrição da imagem aqui

Atualmente esse recurso de tela escura tem sido amplamente utilizado para melhorar a UX dos usuários, aqui no site do ilustríssimo Willian Justen https://willianjusten.com.br/ podemos ver um exemplo de dark mode aplicado

Nos primórdios já se usa o dark mode, como vc pode ver nesse interessante artigo https://web.dev/prefers-color-scheme/

Fundo escuro com letra clara não é algo novo, talvez a primeira interface de texto em monitor que tenha surgido já tenha sido escura com com letras claras. Os saudosistas certamente vão se lembrar dessa image.

inserir a descrição da imagem aqui

Fim da Recompensa com 50 pontos de reputação concedidos por Woss
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando
inclui novas informações
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando
adicionou 723 caracteres ao conteúdo
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando