Alternar entre el modo claro y oscuro usando JavaScript

Question

Este es un código escrito en un curso que estoy tomando en Udemy. Sirve como un interruptor de palanca básico para alternar entre el modo claro y oscuro. Esto incluye la barra de navegación, el fondo, las imágenes y el ícono que cambia de un sol a una luna.

El objetivo después de la lección era limpiar el código y secarlo. Ya lo he hecho con parte del código. Pero hay algunos casos en los que todavía se repite, por ejemplo, isDarken mi lightDarkModefunción. ¿Hay alguna forma de eliminar el 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]);
}

Answer 1

Una cosa que podría actualizar es cómo está usando ternary operatorfor isDark.

Los operadores ternarios se utilizan para devolver algo basado en una respuesta booleana, por lo que devuelve X si es verdadero o Y si es falso.

Sin embargo, cada vez que se usa, está evaluando la declaración que se le pasa. En este caso ambas veces se está evaluando isDark. Para el sitio web promedio, esto no afectará el tiempo de procesamiento, pero es algo en lo que pensar.

En cambio, una declaración clásica if/else le permitiría ejecutar más código de una sola evaluación.

Notará que esto no es sleek lookingtan ternario y tiene incluso más líneas de código, pero brinda más capacidades cuando las necesita.

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])
}