Replacing CSS file using JavaScript works only halfway

Question

I am trying to replace a CSS file with another one on a page by toggling between the day/night themes using an eventlistener. I tried to do this in numerous ways, but none of them worked completely.

My default theme is dark and I can only manage to change it to light theme using my code, not back to dark again. What am I doing wrong? Thanks a lot everyone!

colorModeBtn.addEventListener("click", function() {
  if (cssFile.href = "styles.css") {
      cssFile.setAttribute("href", "styles-daylight.css") 
  } else {
    cssFile.setAttribute("href", "styles.css")
  }
})

colorModeBtn.addEventListener("click", function() {
  if (cssFileDay.disabled = true) {
    cssFileDay.disabled = false
    cssFile.disabled = true
  } else {
    cssFileDay.disabled = true
    cssFile.disabled = false
  }
})

colorModeBtn.addEventListener("click", function() {
  const cssLink = document.createElement("link")
  if (cssFile.href = "styles.css") {
    cssLink.rel = "stylesheet"
    cssLink.href = "styles-daylight.css"
    document.head.appendChild(cssLink)
    cssFile.disabled = true
  } else if (document.head.cssLink) {
    document.head.removeChild(cssLink)
    cssFile.disabled = false
  }
})

colorModeBtn.addEventListener("click", function() {
  const cssLink = document.createElement("link")
  if (cssFile.href = "styles.css") {
    cssLink.rel = "stylesheet"
    cssLink.href = "styles-daylight.css"
    document.head.appendChild(cssLink)
    cssFile.disabled = true
  } else if (document.head.cssLink) {
    var linkNode = document.querySelector('link[href*="styles-daylight.css"]')
    linkNode.removeChild(linkNode)
    cssFile.disabled = false
  }
})

Tracking/swapping CSS hrefs and the `disabled` property seems like a lot of work. Why not just add/remove a single class name to your `` and style your CSS so it recognizes the presence/absence of that body class and uses the appropriate light/dark theme? — kmoser, Nov 11 '22 at 23:57
https://stackoverflow.com/questions/11871616/what-is-the-difference-between-the-and-operators-and-what-is-si — kmoser, Nov 12 '22 at 00:28
Yes, it does answer my question, thanks a lot. However, I did not manage to understand what you meant by 'Why not just add/remove a single class name to your and style your CSS so it recognizes the presence/absence of that body class and uses the appropriate light/dark theme?'. Can you elaborate if it's not too difficult? Thanks a lot! — buckwhitzer, Nov 12 '22 at 02:41
See my answer that I just posted. Also see [Add button to switch between light and dark mode using two prefers-color-scheme](https://stackoverflow.com/questions/73693983/add-button-to-switch-between-light-and-dark-mode-using-two-prefers-color-scheme) — kmoser, Nov 12 '22 at 19:28

buckwhitzer · Answer 1 · 2022-11-12T00:18:16.870

1

I found out the answer and it's a small thing, as usual in this cases. However, I don't understand why it didn't work the way I posted it above.

That was I was using.

colorModeBtn.addEventListener("click", function() {
  if (cssFileDay.disabled = true) {
    cssFileDay.disabled = false
    cssFile.disabled = true
  } else {
    cssFileDay.disabled = true
    cssFile.disabled = false
  }
})

And I had to change (cssFileDay.disabled = true) either to (cssFileDay.disabled === true) or (cssFileDay.disabled). And it started working well.

edited Nov 12 '22 at 00:18

answered Nov 12 '22 at 00:17

buckwhitzer

19
4

1

`if (cssFileDay.disabled = true)` You're __*setting*__ disabled to true here, not checking if it's true. – ray Nov 12 '22 at 00:24
1

Technically, it's first setting it to true, and *then* checking if it's true...which it will always be. – kmoser Nov 12 '22 at 00:26

Paulo Santos · Accepted Answer · 2022-11-16T13:02:18.587

Hold on. Yes you found the error. But ALL four of the sample code you showed on your question have if statements like

if (x = true)

The single = is an attribution command that, in JavaScript (and other C derived languages), return a value so the if statement will always be true.

The comparison, which is what you want is a double equal (==).

The triple equal (===) is also a comparison but it compares the data type between the left and right sides as well.

score 1 · Answer 3 · answered Nov 12 '22 at 19:27

You can greatly simplify your code by toggling a class name that indicates light/dark mode:

document.getElementById('colorModeBtn').addEventListener("click", function(e) {
  document.querySelector('body').classList.toggle('daylight')
})

body {
  background-color: darkblue; /* default (dark mode) */
}

body.daylight {
  background-color: yellow; /* daylight mode */
}

/* Add other CSS here */

<body>
  <button id="colorModeBtn">
    Switch mode
  </button>
</body>

Thanks a lot! Never thought of doing it like this, it's much easier. — buckwhitzer, Nov 16 '22 at 04:01

Replacing CSS file using JavaScript works only halfway

3 Answers3