Alternando entre o modo claro e escuro usando JavaScript

Aug 18 2020

Este é um código escrito em um curso que estou fazendo na Udemy. Ele serve como um interruptor básico para alternar entre os modos claro e escuro. Isso inclui a barra de navegação, plano de fundo, imagens e o ícone que muda de sol para lua.

O objetivo após a lição era limpar o código e torná-lo DRY. Eu já fiz isso com parte do código. Mas há alguns casos em que ainda se repete, por exemplo, isDarkna minha lightDarkModefunção. Existe uma maneira de eliminar o uso repetitivo de isDark?

const toggleSwitch = document.querySelector('input[type="checkbox"]');
const nav = document.getElementById('nav');
const toggleIcon = document.getElementById('toggle-icon');
const textBox = document.getElementById('text-box');
const darkLightTheme = ['dark', 'light'];

function imageMode(color) {
    image1.src = `img/undraw_proud_coder_${color}.svg`;
    image2.src = `img/undraw_feeling_proud_${color}.svg`;
    image3.src = `img/undraw_conceptual_idea_${color}.svg`;
}

    lightDarkMode = (isDark) => {
    nav.style.backgroundColor = isDark ? 'rgb(0 0 0 / 50%)' : 'rgb(255 255 255 / 50%)';
    textBox.style.backgroundColor = isDark ? 'rgb(255 255 255 / 50%)' : 'rgb(0 0 0 / 50%)';
    toggleIcon.children[0].textContent = isDark ? 'Dark Mode' : 'Light Mode';
    isDark ? toggleIcon.children[1].classList.replace('fa-sun', 'fa-moon') : toggleIcon.children[1].classList.replace('fa-moon', 'fa-sun');
    isDark ? imageMode(darkLightTheme[0]) : imageMode(darkLightTheme[1]);
}

Respostas

2 imvain2 Aug 20 2020 at 00:55

Uma coisa que você pode atualizar é como você está usando o ternary operatorfor isDark.

Os operadores ternários são usados ​​para retornar algo com base em uma resposta booleana, portanto, retorne X se for verdadeiro ou Y se for falso.

No entanto, toda vez que é usado, ele está avaliando a instrução que está sendo passada para ele. Neste caso, ambas as vezes ele está avaliando isDark. Para o site médio, isso não afetará o tempo de processamento, mas é algo para se pensar.

Em vez disso, uma instrução clássica if/else permitiria que você executasse mais código em uma única avaliação.

Você notará que isso não é sleek lookingtão ternário e tem ainda mais linhas de código, mas fornece mais recursos quando você precisa.

if (isDark) {
  toggleIcon.children[1].classList.replace('fa-sun', 'fa-moon')
  imageMode(darkLightTheme[0])
} else {
  toggleIcon.children[1].classList.replace('fa-moon', 'fa-sun')
  imageMode(darkLightTheme[1])
}