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>
2
Answers
You are not setting the correct attribute value, it needs to be
theme-dark:There is a discrepancy in your code which triggers this issue.
In this code you have:
However in your JavaScript, you’re setting the attribute to
darkorlight:This discrepancy is the main issue. Adjust JavaScript and CSS to fix it. For example:
Make sure that your
CSSrules that respond to the[data-theme="theme-dark"]attribute are placed below your defaultCSSrules.CSSrules further down in a stylesheet will override earlier rules if they have the same specificity.Make sure that there are no
JavaScripterrors that might be interrupting the execution of your theme switcher code. You can check for errors by using the browser’s developer console.