linux-BR.org

Notícias de software livre e tecnologias

Selecionaremos a classe de botão (.btn-toggle), adicione um ouvinte para quando ele for clicado e adicione a classe de tema escuro (.dark-theme) à lista de classe do elemento do corpo.O recurso de consulta de mídia prefere-color-scheme desfruta de apoio dos principais navegadores, incluindo Chrome 76+, Firefox 67+, Chrome Android 76+, Safari 12.5+ (13+ no iOS) e Samsung Internet Browser.Os sistemas operacionais que atualmente suportam o Modo Dark incluem macOS (Mojave ou posterior), iOS (13.0+), Windows (10+) e Android (10+).Agora, vamos redefinir esses valores de propriedades, esse tempo definido em uma classe corporal diferente:
Os estilos de temas escuros serão descendentes da mesma classe pai-que é o tema. DOUTO Neste exemplo-que aplicamos à tag .O Twitter vai a milha extra e oferece vários temas para escolher: “Padrão”, “Dim” e “Lights Out”.A opção “Dim” emprega azul escuro para uma cor de fundo.

Fonte: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/