https://github.com/igorcbraz/calculadora

📐 Calculadora responsiva usando boostrap com a opção de alteração dos temas usando prefer-color-scheme. 📏
https://github.com/igorcbraz/calculadora

calculadora calculadora-javascript calculator calculator-application calculator-javascript calculator-js prefer-color-scheme responsive

Last synced: 2 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/igorcbraz/calculadora
• Owner: Igorcbraz
• License: mit
• Created: 2021-07-13T19:53:02.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-05T02:04:08.000Z (2 months ago)
• Last Synced: 2024-09-07T07:06:39.337Z (2 months ago)
• Topics: calculadora, calculadora-javascript, calculator, calculator-application, calculator-javascript, calculator-js, prefer-color-scheme, responsive
• Language: JavaScript
• Homepage: https://calculatorcbraz.netlify.app/
• Size: 5.76 MB
• Stars: 26
• Watchers: 1
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
 📚 Calculadora 📊 



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





  

  

  





  Prefer Color Scheme •

  Resultado Final •

  Sugestões •





  

  


  

    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 usuário 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.default();    

}

```

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


```

const root = document.querySelector(':root');

const theme = {

  default() {

    root.style.setProperty('--background'          , '#3a4764');

    // E as demais variáveis

  },

  light() {

    root.style.setProperty('--background'          , '#e6e6e6');

    // E as demais variáveis

  },

  dark() {

    root.style.setProperty('--background'          , '#17062a');

    // E as demais variáveis

  }

}

```

> **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 🥳




Você também ṕode gostar 🤩


- [Gitfest](https://github.com/Igorcbraz/GitFest) - Gere uma lineup de festival com base nos seus principais repositórios do Github

- [Enkoji](https://github.com/Igorcbraz/Enkoji) - Site feito para o Enkoji, um templo zen-budista japonês fundado em 1920 no Japão

---

> GitHub [@Igorcbraz](https://github.com/Igorcbraz)  · 

> Linkedin [@Igorcbraz](https://www.linkedin.com/in/igorcbraz/)

---