Skip to content

šŸ“ Calculadora responsiva usando boostrap com a opĆ§Ć£o de alteraĆ§Ć£o dos temas usando prefer-color-scheme. šŸ“

License

Notifications You must be signed in to change notification settings

Igorcbraz/Calculadora

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Ā 

History

33 Commits
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 

Repository files navigation

šŸ“š Calculadora šŸ“Š

āš” Calculadora Responsiva e com opƧƵes para troca de temas āš”

GitHub Stars Netlify Status MIT License

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 - Gere uma lineup de festival com base nos seus principais repositĆ³rios do Github
  • Enkoji - Site feito para o Enkoji, um templo zen-budista japonĆŖs fundado em 1920 no JapĆ£o

GitHub @Igorcbraz Ā Ā·Ā  Linkedin @Igorcbraz