dearlight12/calculadora

📐 Calculadora responsiva usando boostrap com a opção de alteração dos temas usando prefer-color-scheme. 📏

📚 Calculadora 📊

⚡ Calculadora Responsiva e com opções para troca de temas ⚡

Desafio feito por Frontend Mentor

---

🌗 Prefer Color Scheme:

Além dos 3 diferentes temas da calculadora, foi usado o recurso de mídia prefer-color-scheme.

Esse recurso possibilita o entendimento de qual a preferência do usuário em relação aos temas, assim podendo receber dois valores:

• Light (Claro)
• Dark (Escuro)

A maneira de aplicar esse recurso de acordo com a developer.mozilla é da seguinte maneira:

@media (prefers-color-scheme: dark) {
  // Configurações CSS para o tema dark
}

@media (prefers-color-scheme: light) {
  // Configurações CSS para o tema light
}

Mas com esse método o carregamento do código irá ficar mais lento pois seria necessário repetir todas as propriedades desejadas com suas novas colorações.

Então qual a solução ? 🤔

Iremos apenas mudar os valores das variáveis do CSS com JS.

const darkThemeMq  = window.matchMedia("(prefers-color-scheme: dark)");
const lightThemeMq = window.matchMedia("(prefers-color-scheme: light)");

Primeiro identificamos qual a preferência de tema do usúario e guardamos o resultado em uma constante.

Agora só precisamos verificar qual o valor das constantes e modificar os valores das variáveis do CSS

if (darkThemeMq.matches) {
    document.getElementById('btnTheme').value = "3";
    theme.dark();
} else if(lightThemeMq.matches){
    document.getElementById('btnTheme').value = "2";
    theme.light();    
} else {
    document.getElementById('btnTheme').value = "1";
    theme.defaul();    
}

theme.dark(),theme.light()... Armazenam os comandos para modificar os valores das variáveis no CSS. Sendo eles:

const theme = {
    defaul(){
        root.style.setProperty('--background'          , '#3a4764');
        // E as demais variavéis
    },
    light(){
        root.style.setProperty('--background'          , '#e6e6e6');
        // E as demais variavéis
    },
    dark(){
        root.style.setProperty('--background'          , '#17062a');
        // E as demais variavéis
    }
}

// Get the root element
var root = document.querySelector(':root');

Como é Possível fazer o Teste/Debug ? 🤔

Podemos usar a ferramenta de desenvoledor do google chrome e alterar os valores Dark ou Light

Resultado Final 🥳:

🧠 Tecnologias e Frameworks Usados: