Html theme switcher

FlyPhoenix
September 19, 2023
150 views
0 votes
2 Answers

I want to to implement a theme switcher. I followed this tutorial but it’s not working. When I click on the button, nothing changes. You can find the js at the bottom (theme switcher);the html is in the "menu";the css is at the bottom.

I think the problem is inside the js but can’t understand what it is

/*<!-------Script du menu------->*/

const list = document.querySelectorAll('.list');
function activeLink(){
  list.forEach((item) =>
  item.classList.remove('active'));
  this.classList.add('active');
}
list.forEach((item) =>  
item.addEventListener('click', activeLink));

window.onmousedown = e => {
    const track = document.getElementById("image-track");

    track.dataset.mouseDownAt = e.clientX;
}

window.onmouseup = () => {
    const track = document.getElementById("image-track");

    track.dataset.mouseDownAt = "0";
    track.dataset.prevPercentage = track.dataset.percentage;
}

window.onmousemove = e => {
    const track = document.getElementById("image-track");
    const tips = document.getElementById("tips");
    if(track.dataset.mouseDownAt == "0") return;
    
    const mouseDelta = parseFloat(track.dataset.mouseDownAt) - e.clientX, maxDelta = window.innerWidth / 2;

    const percentage = (mouseDelta / maxDelta) * -100, nextPercentage = Math.max(Math.min(parseFloat(track.dataset.prevPercentage) + percentage, 0), -100);
    
    track.dataset.percentage = nextPercentage;
    
    track.animate({
        transform: `translate(${nextPercentage}%, -50%)`
    }, { duration: 1200, fill: "forwards" });

    tips.animate({
        transform: `translate(${nextPercentage * 2}%, -50%)`
    }, { duration: 1200, fill: "forwards" });

    for(const image of track.getElementsByClassName("image")) {
        image.animate({
            objectPosition: `${100 + nextPercentage}% center`
        }, { duration: 1200, fill: "forwards" });
    }
}


/*fonction pour v�rifier l'age*/
function verifAge() {
    var age = document.getElementById('age').value;
if (age>130) {
    alert("Personne n'a vecu aussi longtemps ! Age entre : "+ age+"ans");
} else if (age<18) {
    alert("Vous devez etre majeur pour realiser ce questionnaire ! Age entr� : "+ age+"ans");
} else {
    alert("Vous avez l'age requis !");
}

/*fonction pour v�rifier l'age*/
function verifnumber() {
    var age = document.getElementById('rep1').value;
if (age>10) {
    alert("Vous ne pouvez pas alle au dela de 10");
} else if (age<0) {
    alert("Vous ne pouvez pas alle en dessous de 0");
}
}
}

/*fonction pour afficher un message*/
function messInfo(ntext) {
var x = document.getElementById('info');
x.innerHTML = ntext;
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

/*verification question 4*/
if (document.getElementById("quest4").checked === true) {
var preference = "Led Zeppelin";
}

/*verification question 5*/
if (document.getElementById("quest5").checked === true) {
var preference = "Au grunge";
}

/*theme switcher*/
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
  
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

@import url('https://fonts.googleapis.com/css?family=Mooli&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
/* -------Variables------- */

:root {
    --navButtonSize: 25%;
    --text: #020401;
    --background: #f1f8ef;
    --primary: #94d283;
    --secondary: #d5edce;
    --accent: #58b040;
}

[data-theme="theme-dark"] {
    --navButtonSize: 25%;
    --text: #f1f8ef;
    --background: #020401;
    --primary: #94d283;
    --secondary: #0d1a09;
    --accent: #b6e0aa;
}

/* -------Cacher la barre de scroll------- */

body 
{
  -ms-overflow-style: none; /* Pour Internet Explorer, Edge */
  scrollbar-width: none; /* Pour Firefox */
  overflow-y: scroll; 
}

body::-webkit-scrollbar 
{
  display: none; /* Pour Chrome, Safari, and Opera */
}

/* -------Fond/Police------- */

body 
{
    font-family: 'Mooli', sans-serif;
    background: var(--background);
}

/* ----------------------------Menu---------------------------- */

/* -------Barre du menu------- */

nav
{
    position: fixed;
    margin: 0px auto 0;
    margin-left: 0px;
    top: 5px;
    width: 98.5%;
    height: 50px;
    background: var(--secondary);
    border-radius: 8px;
    font-size: 0;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
}

/* -------Le texte des boutons du menu------- */

nav a
{
    font-size: 30px;
    text-transform: uppercase;
    color: var(--text);
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
    line-height: 50px;
    width: 80px;
    position: relative;
    z-index: 1;
    display: inline-block;
    text-align: center;
}

/* -------Barre de survole de bouton------- */

nav .animation
{
    position: absolute;
    height: 10%;
    bottom: 0;
    z-index: 0;
    background: var(--primary);
    border-radius: 8px;
    transition: all .5s ease 0s;
    opacity: 0;
}

/* -------Indicateur de la page------- */

.indicator
{
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
    background: var(--primary);
    border-radius: 8px;
    transition: all .5s ease 0s;
}

/* -------Cache le surplus (le texte qui monte) derrière le menu------- */

.cache
{
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 55px;
    background: var(--background);
    z-index: 0;
}

/* -------Les enfants de la barre de survole, de l'indicateur et des boutons du menu------- */

nav a:nth-child(1)
{
    width: var(--navButtonSize);
}
nav a:nth-child(1):hover~.animation
{
    width: var(--navButtonSize);
    left: 0%;
    opacity: 1;
}
nav a:nth-child(1).active~.indicator
{
    width: var(--navButtonSize);
    left: 0%;
}
nav a:nth-child(1).active:hover~.animation
{
    opacity: 0;
}

nav a:nth-child(2)
{
    width: var(--navButtonSize);
}
nav a:nth-child(2):hover~.animation
{
    width: var(--navButtonSize);
    left: 25%;
    opacity: 1;
}
nav a:nth-child(2).active~.indicator
{
    width: var(--navButtonSize);
    left: 25%;
}
nav a:nth-child(2).active:hover~.animation
{
    opacity: 0;
}

nav a:nth-child(3)
{
    width: var(--navButtonSize);
}
nav a:nth-child(3):hover~.animation
{
    width: var(--navButtonSize);
    left: 50%;
    opacity: 1;
}
nav a:nth-child(3).active~.indicator
{
    width: var(--navButtonSize);
    left: 50%;
}
nav a:nth-child(3).active:hover~.animation
{
    opacity: 0;
}

nav a:nth-child(4)
{
    width: var(--navButtonSize);
}
nav a:nth-child(4):hover~.animation
{
    width: var(--navButtonSize);
    left: 75%;
    opacity: 1;
}
nav a:nth-child(4).active~.indicator
{
    width: var(--navButtonSize);
    left: 75%;
}
nav a:nth-child(4).active:hover~.animation
{
    opacity: 0;
}

nav a:nth-child(5)
{
    width: var(--navButtonSize);
}
nav a:nth-child(5):hover~.animation
{
    width: var(--navButtonSize);
    left: 100%;
    opacity: 1;
}
nav a:nth-child(5).active~.indicator
{
    width: var(--navButtonSize);
    left: 100%;
}
nav a:nth-child(5).active:hover~.animation
{
    opacity: 0;
}

/* ----------------------------Page---------------------------- */

/* -------Feuille de style pour la page------- */

.page {
    position: relative;
    z-index: -1;
}

ion-icon {
    color: var(--text);
    font-size: 30px;
}

.logo-text {
    color: var(--text);
    padding-left: 450px;
    height: 450px;
    width: 1000px;
}

.quizz {
    float: left;
    padding-top: 50px;
    padding-left: 0px;
    height: 350px;
    width: 800px;
}

.menu-text {    
    padding-top: 30px;
    color: var(--text);
    font-size: 50px;
    padding-left: 900px;
    text-align: justify;
}

.tuto { 
    padding-top: 50px;
    color: var(--text);
    font-size: 50px;
    padding-left: 50px;
}







/*slider switch css */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    
    em {
      margin-left: 10px;
      font-size: 1rem;
    }
  }
  .theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
  }
  
  .theme-switch input {
    display:none;
  }
  
  .slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
  }
  
  .slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
  }
  
  input:checked + .slider {
    background-color: #66bb6a;
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

<!DOCTYPE html>
<html>

<!-------Paramètres------->

  <head>
    <meta charset="utf-8">
    <title>E-sciences</title>
    <link rel="stylesheet" href="css/menu-style.css">
    <script src="js/script.js"></script>
    <link rel="icon" type="images/png" href="image/logo.jpg">
    <link href="https://fonts.cdnfonts.com/css/huglove" rel="stylesheet">
  </head>
  
<style>
@import url('https://fonts.cdnfonts.com/css/huglove');
</style>


<!-------menu------->

  <body>
    <div class="cache"></div>
    <nav>
      <a class='list active' href="menu.html"><ion-icon name="home"></ion-icon> • Accueil</a>
      <a class='list' href="quizz1.html"><ion-icon name="game-controller"></ion-icon> • Quizz</a>
      <a class='list' href="quizz2.html"><ion-icon name="newspaper"></ion-icon> • Carnet de bord</a>
      <a class='list' href="#"><ion-icon name="people"></ion-icon> • Avis</a>
      <div class="animation start-home"></div>
      <div class="indicator"></div>
      <div class="theme-switch-wrapper">
          <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="slider round"></div></label>
    </div> 
    </nav>
    

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

<!-------Page------->
    <div class="page">
        <img class="logo-text" src="image/logo_text.png" draggable="false">
        <img class="quizz" src="image/quizz.jpg" draggable="false">
        <p class="menu-text">• Avec Rythmique essayez nos quizz musicaux,<br>‎ ‎ ‎ testez vos connaissances et amusez vous !</p>
        <p class="menu-text">• Rythmique c'est gratuit et vos donnees <br>‎ ‎ ‎ ‎ ‎ ‎ ‎ sont completement securisees !</p>
        <p class="tuto">Tutoriel :<br><br>Dans la barre de navigation, cliquez sur le Quizz 1 ou 2. Ensuite, dans le Quizz, repondez aux questions et cliquez sur valider pour voir les reponses et passe a la suite.</p>

    </div>
    
  </body>
</html>

Answers

You are not setting the correct attribute value, it needs to be theme-dark:


/*verification question 4*/
    // if (document.getElementById("quest4").checked === true) {
    //  var preference = "Led Zeppelin";
    // }

    /*verification question 5*/
    // if (document.getElementById("quest5").checked === true) {
    //  var preference = "Au grunge";
    // }

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'theme-dark'); //< Change this
        localStorage.setItem('theme', 'theme-dark');//< Change this
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}

/*<!-------Script du menu------->*/
/*theme switcher*/
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'theme-dark');
        localStorage.setItem('theme', 'theme-dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

@import url('https://fonts.googleapis.com/css?family=Mooli&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
/* -------Variables------- */

:root {
    --navButtonSize: 25%;
    --text: #020401;
    --background: #f1f8ef;
    --primary: #94d283;
    --secondary: #d5edce;
    --accent: #58b040;
}

[data-theme="theme-dark"] {
    --navButtonSize: 25%;
    --text: #f1f8ef;
    --background: #020401;
    --primary: #94d283;
    --secondary: #0d1a09;
    --accent: #b6e0aa;
}

/* -------Cacher la barre de scroll------- */

body 
{
  -ms-overflow-style: none; /* Pour Internet Explorer, Edge */
  scrollbar-width: none; /* Pour Firefox */
  overflow-y: scroll; 
}

body::-webkit-scrollbar 
{
  display: none; /* Pour Chrome, Safari, and Opera */
}

/* -------Fond/Police------- */

body 
{
    font-family: 'Mooli', sans-serif;
    background: var(--background);
}

/* ----------------------------Menu---------------------------- */

/* -------Barre du menu------- */

nav
{
    position: fixed;
    margin: 0px auto 0;
    margin-left: 0px;
    top: 5px;
    width: 98.5%;
    height: 50px;
    background: var(--secondary);
    border-radius: 8px;
    font-size: 0;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
}

/* -------Le texte des boutons du menu------- */

nav a
{
    font-size: 30px;
    text-transform: uppercase;
    color: var(--text);
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
    line-height: 50px;
    width: 80px;
    position: relative;
    z-index: 1;
    display: inline-block;
    text-align: center;
}

/* -------Barre de survole de bouton------- */

nav .animation
{
    position: absolute;
    height: 10%;
    bottom: 0;
    z-index: 0;
    background: var(--primary);
    border-radius: 8px;
    transition: all .5s ease 0s;
    opacity: 0;
}

/* -------Indicateur de la page------- */

.indicator
{
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
    background: var(--primary);
    border-radius: 8px;
    transition: all .5s ease 0s;
}

/* -------Cache le surplus (le texte qui monte) derrière le menu------- */

.cache
{
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 55px;
    background: var(--background);
    z-index: 0;
}

/* -------Les enfants de la barre de survole, de l'indicateur et des boutons du menu------- */

nav a:nth-child(1)
{
    width: var(--navButtonSize);
}
nav a:nth-child(1):hover~.animation
{
    width: var(--navButtonSize);
    left: 0%;
    opacity: 1;
}
nav a:nth-child(1).active~.indicator
{
    width: var(--navButtonSize);
    left: 0%;
}
nav a:nth-child(1).active:hover~.animation
{
    opacity: 0;
}

nav a:nth-child(2)
{
    width: var(--navButtonSize);
}
nav a:nth-child(2):hover~.animation
{
    width: var(--navButtonSize);
    left: 25%;
    opacity: 1;
}
nav a:nth-child(2).active~.indicator
{
    width: var(--navButtonSize);
    left: 25%;
}
nav a:nth-child(2).active:hover~.animation
{
    opacity: 0;
}

nav a:nth-child(3)
{
    width: var(--navButtonSize);
}
nav a:nth-child(3):hover~.animation
{
    width: var(--navButtonSize);
    left: 50%;
    opacity: 1;
}
nav a:nth-child(3).active~.indicator
{
    width: var(--navButtonSize);
    left: 50%;
}
nav a:nth-child(3).active:hover~.animation
{
    opacity: 0;
}

nav a:nth-child(4)
{
    width: var(--navButtonSize);
}
nav a:nth-child(4):hover~.animation
{
    width: var(--navButtonSize);
    left: 75%;
    opacity: 1;
}
nav a:nth-child(4).active~.indicator
{
    width: var(--navButtonSize);
    left: 75%;
}
nav a:nth-child(4).active:hover~.animation
{
    opacity: 0;
}

nav a:nth-child(5)
{
    width: var(--navButtonSize);
}
nav a:nth-child(5):hover~.animation
{
    width: var(--navButtonSize);
    left: 100%;
    opacity: 1;
}
nav a:nth-child(5).active~.indicator
{
    width: var(--navButtonSize);
    left: 100%;
}
nav a:nth-child(5).active:hover~.animation
{
    opacity: 0;
}

/* ----------------------------Page---------------------------- */

/* -------Feuille de style pour la page------- */

.page {
    position: relative;
    z-index: -1;
}

ion-icon {
    color: var(--text);
    font-size: 30px;
}

.logo-text {
    color: var(--text);
    padding-left: 450px;
    height: 450px;
    width: 1000px;
}

.quizz {
    float: left;
    padding-top: 50px;
    padding-left: 0px;
    height: 350px;
    width: 800px;
}

.menu-text {    
    padding-top: 30px;
    color: var(--text);
    font-size: 50px;
    padding-left: 900px;
    text-align: justify;
}

.tuto { 
    padding-top: 50px;
    color: var(--text);
    font-size: 50px;
    padding-left: 50px;
}







/*slider switch css */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    
    em {
      margin-left: 10px;
      font-size: 1rem;
    }
  }
  .theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
  }
  
  .theme-switch input {
    display:none;
  }
  
  .slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
  }
  
  .slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
  }
  
  input:checked + .slider {
    background-color: #66bb6a;
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

<!DOCTYPE html>
<html>

<!-------Paramètres------->

  <head>
    <meta charset="utf-8">
    <title>E-sciences</title>
    <link rel="stylesheet" href="css/menu-style.css">
    <script src="js/script.js"></script>
    <link rel="icon" type="images/png" href="image/logo.jpg">
    <link href="https://fonts.cdnfonts.com/css/huglove" rel="stylesheet">
  </head>
  
<style>
@import url('https://fonts.cdnfonts.com/css/huglove');
</style>


<!-------menu------->

  <body>
    <div class="cache"></div>
    <nav>
      <a class='list active' href="menu.html"><ion-icon name="home"></ion-icon> • Accueil</a>
      <a class='list' href="quizz1.html"><ion-icon name="game-controller"></ion-icon> • Quizz</a>
      <a class='list' href="quizz2.html"><ion-icon name="newspaper"></ion-icon> • Carnet de bord</a>
      <a class='list' href="#"><ion-icon name="people"></ion-icon> • Avis</a>
      <div class="animation start-home"></div>
      <div class="indicator"></div>
      <div class="theme-switch-wrapper">
          <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="slider round"></div></label>
    </div> 
    </nav>
    

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

<!-------Page------->
    <div class="page">
        <img class="logo-text" src="image/logo_text.png" draggable="false">
        <img class="quizz" src="image/quizz.jpg" draggable="false">
        <p class="menu-text">• Avec Rythmique essayez nos quizz musicaux,<br>‎ ‎ ‎ testez vos connaissances et amusez vous !</p>
        <p class="menu-text">• Rythmique c'est gratuit et vos donnees <br>‎ ‎ ‎ ‎ ‎ ‎ ‎ sont completement securisees !</p>
        <p class="tuto">Tutoriel :<br><br>Dans la barre de navigation, cliquez sur le Quizz 1 ou 2. Ensuite, dans le Quizz, repondez aux questions et cliquez sur valider pour voir les reponses et passe a la suite.</p>

    </div>
    
  </body>
</html>

- AztecCodes
- September 16, 2023 at 11:41 pm
- 0 votes
0
There is a discrepancy in your code which triggers this issue.

In this code you have:
```
[data-theme="theme-dark"] {
    --navButtonSize: 25%;
    --text: #f1f8ef;
    --background: #020401;
    /* ... */
}
```
However in your JavaScript, you’re setting the attribute to dark or light:
```
document.documentElement.setAttribute('data-theme', 'dark');
```
This discrepancy is the main issue. Adjust JavaScript and CSS to fix it. For example:
```
if (e.target.checked) {
    document.documentElement.setAttribute('data-theme', 'theme-dark');
    localStorage.setItem('theme', 'theme-dark');
} else {        
    document.documentElement.setAttribute('data-theme', 'theme-light');  // You might need to add corresponding CSS rules for this or remove this line if you're not planning to use it.
    localStorage.setItem('theme', 'theme-light');
}
```
- Make sure that your CSS rules that respond to the [data-theme="theme-dark"] attribute are placed below your default CSS rules. CSS rules further down in a stylesheet will override earlier rules if they have the same specificity.
- Make sure that there are no JavaScript errors that might be interrupting the execution of your theme switcher code. You can check for errors by using the browser’s developer console.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.