0

I am working on a YouTube website redesign as a hobby, and I was working on a light/dark mode system. I got the variable changing system to work, but I don't know how to render the changes I made. Here's my HTML file (only the body part, click here for full view):

<div class="header">
  <a href="https://codepen.io/ReallyBadDeveloper/pen/mdzKqZY">
  <img src="https://www.youtube.com/s/desktop/c1d331ff/img/favicon_48x48.png">
  </a>
  <button class="lightdark" onclick="darkLight">
    <svg viewBox="0 0 512 512" width="20" title="adjust" onclick="darkLight()">
  <path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z" />
</svg>
    <p>Adjust colors</p>
  </button>
</div>
<div class="body">
  <p>cool</p>
</div>

JavaScript code:

var r = document.querySelector(':root');
var isdark = 0;

function darkLight() {
  if (isdark == 0) {
    r.style.setProperty('--backgroundcolor', '#1a1a1a');
    r.style.setProperty('--bodycolor', '#3b3b3b')
    r.style.setProperty('--fontcolor', 'white')
    isdark = 1;
  } else if (isdark == 1) {
    r.style.setProperty('--backgroundcolor', '#d4d4d4')
    r.style.setProperty('--bodycolor', '#f2f2f2')
    r.style.setProperty('--fontcolor', 'black')
    isdark = 0;
  }
}

CSS code:

@import url('https://fonts.googleapis.com/css2?family=Lexend&family=Nunito&display=swap');
:root {
  --maincolor: #ed1818;
  --backgroundcolor: #d4d4d4;
  --bodycolor: #f2f2f2;
  --fontcolor: black;
}
body {
  background-color: var(--backgroundcolor);
  font-family: Nunito, sans-serif;
  color: var(--fontcolor);
  padding: 20px;
}
.body {
  background-color: var(--bodycolor);
  border-radius: 5px;
  padding: 10px 30px;
}
.header {
  padding: 20px 0px;
}
button {
  border: 0px solid black;
  border-radius: 5px;
  background-color: var(--backgroundcolor);
  font-famliy: Nunito, sans-serif;
  color: var(--fontcolor);
  padding: 10px;
  transition-duration: 0.2s;
}
button:hover {
  border: 0px solid black;
  border-radius: 5px;
  background-color: var(--bodycolor);
  font-famliy: Nunito, sans-serif;
  color: var(--fontcolor);
  cursor: pointer;
}
.header {
  /* empty for now? */
}

Can somebody help?

Really Bad Dev
  • 33
  • 7
  • 4
    `if (isdark = 0) {` is assigning zero to `isDark`. You want `if (isdark === 0) {` to check for equality. – Andy May 13 '23 at 17:23
  • 3
    In addition to the comment by @Andy, you could (and probably should) use media queries to change your css to dark-mode based on the users system settings, js is just needed to manually switch themes. https://css-tricks.com/dark-modes-with-css/ – rx2347 May 13 '23 at 17:31
  • Actually, `if (isdark = 0) {` is just checking if the value of `isdark` is 0. All the `===` does is checks if the format of the data is specifically a number. – Really Bad Dev May 13 '23 at 17:34
  • As for @rx2347, that is a great idea. I will implement it, but I still want to use js to change between themes. – Really Bad Dev May 13 '23 at 17:42
  • 1
    @ReallyBadDev you're thinking of `==` which doesn't check the type. – Andy May 13 '23 at 17:43
  • @ReallyBadDev the search is always great for finding stuff around here :) https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting (check the accepted answer) – rx2347 May 13 '23 at 17:45
  • Does this answer your question? [How to override css prefers-color-scheme setting](https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting) – rx2347 May 13 '23 at 17:46
  • I don't know if it's the best idea of the year but I check "*prefers-color-scheme*" and offer a custom settings anyway that I store in "*localStorage*" so user can also pick their preferred mode. Than check and import according CSS. – OldPadawan May 13 '23 at 17:48
  • I often see such fake variable execution in `file.min.js`. `if(a++,c=5,q==1){}` what is read is the last line `0 = false, 1 = true` – perona chan May 13 '23 at 18:05

1 Answers1

1

The issue with this code is in the conditional statements within the if and else if blocks.

Instead of using a comparison operator (== or ===) to check the value of isdark, the assignment operator (=) is being used.

This means that isdark is being set to 0 each time the if or else if block is executed, and the code inside the blocks will always run as if isdark was 0.

To fix this, change the = operator to == or === to properly compare the value of isdark:

var r = document.querySelector(':root');
var isdark = 0;

function darkLight() {
  if (isdark == 0) {
    r.style.setProperty('--backgroundcolor', '#1a1a1a');
    r.style.setProperty('--bodycolor', '#3b3b3b')
    r.style.setProperty('--fontcolor', 'white')
    isdark = 1;
  } else if (isdark == 1) {
    r.style.setProperty('--backgroundcolor', '#d4d4d4')
    r.style.setProperty('--bodycolor', '#f2f2f2')
    r.style.setProperty('--fontcolor', 'black')
    isdark = 0;
  }
}
Ayman Elmimouni
  • 26
  • 3