Basculer entre les modes clair et sombre à l'aide de JavaScript

Aug 18 2020

Il s'agit d'un code écrit dans un cours que je suis en train de suivre sur Udemy. Il sert d'interrupteur à bascule de base pour basculer entre les modes clair et sombre. Cela inclut la barre de navigation, l'arrière-plan, les images et l'icône qui passe d'un soleil à une lune.

L'objectif après la leçon était de nettoyer le code et de le rendre SEC. Je l'ai déjà fait pour une partie du code. Mais il y a des cas où cela se répète encore, par exemple isDarkdans ma lightDarkModefonction. Existe-t-il un moyen d'éliminer l'utilisation répétitive 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]);
}

Réponses

2 imvain2 Aug 20 2020 at 00:55

Une chose que vous pourriez mettre à jour est la façon dont vous utilisez le ternary operatorfor isDark.

Les opérateurs ternaires sont utilisés pour renvoyer quelque chose en fonction d'une réponse booléenne, donc soit renvoyer X si vrai, soit Y si faux.

Cependant, chaque fois qu'il est utilisé, il évalue l'instruction qui lui est transmise. Dans ce cas, les deux fois, il évalue isDark. Pour le site Web moyen, cela n'affectera pas votre temps de traitement, mais c'est quelque chose à penser.

Au lieu de cela, une instruction if/else classique vous permettrait d'exécuter plus de code à partir d'une seule évaluation.

Vous remarquerez que ce n'est pas aussi sleek lookingternaire et qu'il y a encore plus de lignes de code, mais donne plus de capacités quand vous en avez besoin.

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