使用Javascript在主題之間切換

我正在嘗試在我的網站上切換深色/淺色主題。SVG 檔案在每次點擊時來回切換，但主題存在一個問題，不是每次點擊都切換。

前兩次單擊 - 主題按預期更改。

第三次和第四次點擊 - 每次點擊 SVG 影像仍然會改變，但主題不會改變

第五和第六次點擊 - 主題按預期變化，回圈重復

HTML：

<div id="themes">
   <img id="current-theme">
</div>

CSS：

body{
  background-color: #ccc;
}

#themes {
  text-align: right;
  margin-right: 10em;
  margin-top: 2em;
  transform: scale(1.5);
  cursor: pointer;
}

.dark-mode {
  background-color: rgb(65, 65, 65);
  transition: background-color 0.5s ease;

  h1 {
    color: white;
  }

  h3 {
    color: white;
  }

  button {
    background-color: white;
    color: black;
  }
}

.light-mode {
  background-color: #ccc;
  transition: background-color 0.5s ease;

  h1 {
    color: var(--primary-color);
  }

  h3 {
    color: black;
  }

  button {
    background-color: black;
    color: white;
  }
}

Javascript：

//default theme is light
document.getElementById("current-theme").src = "images/moon.svg"

var currentTheme = document.getElementById("current-theme");
currentTheme.setAttribute("onClick", "toDarkTheme()");

var theme = document.body;

function toDarkTheme() {

  document.getElementById("current-theme").src = "images/sun.svg";
  theme.classList.toggle("dark-mode");
  //currentTheme.removeAttribute("onClick");
  currentTheme.setAttribute("onClick", "toLightTheme()");
}

function toLightTheme() {

  document.getElementById("current-theme").src = "images/moon.svg";
  theme.classList.toggle("light-mode");
  //currentTheme.removeAttribute("onClick");
  currentTheme.setAttribute("onClick", "toDarkTheme()");
}

我在 jsfiddle 中包含了一個指向代碼的鏈接，因此您可以確切地看到發生了什么。感謝您提供的任何幫助/建議！

https://jsfiddle.net/6op0fx7L/2/#&togetherjs=zTrev7ILNd

uj5u.com熱心網友回復：

當你有太多的 JavaScript 時，這種錯誤是典型的。在這個例子中，我只是用 body 元素的類名來控制主題。頁面中的所有元素都是 body 元素的子元素，因此很容易相應地設定它們的樣式。

我插入了兩個影像，所以我不需要進一步操作 DOM，然后也根據主體類名顯示/隱藏它們。

//default theme is light
document.body.classList.add("light-mode");

document.getElementById("themes").addEventListener('click', e => {
  if(document.body.classList.contains("light-mode")){
    document.body.classList.replace("light-mode", "dark-mode");
  }else{
    document.body.classList.replace("dark-mode", "light-mode");
  }
});

#themes {
  float: right;
  margin-right: 10em;
  margin-top: 1em;
  transform: scale(1.5);
  cursor: pointer;
}

.dark-mode #themes img, .light-mode #themes img {
  position: absolute;
  display: none;
}

.dark-mode #themes img.sun {
  display: block;
}

.light-mode #themes img.moon {
  display: block;
}

.dark-mode {
  background-color: rgb(65, 65, 65);
  transition: background-color 0.5s ease;
}

.dark-mode h1 {
  color: white;
}

.light-mode {
  background-color: #ccc;
  transition: background-color 0.5s ease;
}

.light-mode h1 {
  color: black;
}

<div id="themes">
  <!--The icon and theme will change on click-->
  <img class="sun" src="images/sun.svg" alt="sun"/>
  <img class="moon" src="images/moon.svg" alt="moon"/>
</div>
<h1>Mode</h1>

uj5u.com熱心網友回復：

一開始 theme.classList 是空的

然后每次后續單擊，您都會獲得以下狀態更改...

1. theme.classList 變為暗模式
2. theme.classList 變為暗模式、亮模式
3. theme.classList 變為 light-mode
4. theme.classList 變空

即暗模式添加或取消暗模式，它對亮模式沒有任何作用，反之亦然。

如果您在開始時明確切換燈光模式，您可以同時為這兩個功能提供切換。像這樣...

顯示代碼片段

//default theme is light
document.getElementById("current-theme").src = "images/moon.svg"

var currentTheme = document.getElementById("current-theme");
currentTheme.setAttribute("onClick", "toDarkTheme()");

var theme = document.body;
theme.classList.toggle("light-mode");

function toDarkTheme() {

  document.getElementById("current-theme").src = "images/sun.svg";
  theme.classList.toggle("dark-mode");
    theme.classList.toggle("light-mode");

  //currentTheme.removeAttribute("onClick");
  currentTheme.setAttribute("onClick", "toLightTheme()");
}

function toLightTheme() {

  document.getElementById("current-theme").src = "images/moon.svg";
  theme.classList.toggle("light-mode");
    theme.classList.toggle("dark-mode");

  //currentTheme.removeAttribute("onClick");
  currentTheme.setAttribute("onClick", "toDarkTheme()");
}

body{
  background-color: #ccc;
}

#themes {
  text-align: right;
  margin-right: 10em;
  margin-top: 2em;
  transform: scale(1.5);
  cursor: pointer;
}

.dark-mode {
  background-color: rgb(65, 65, 65);
  transition: background-color 0.5s ease;

  h1 {
    color: white;
  }

  h3 {
    color: white;
  }

  button {
    background-color: white;
    color: black;
  }
}

.light-mode {
  background-color: #ccc;
  transition: background-color 0.5s ease;

  h1 {
    color: var(--primary-color);
  }

  h3 {
    color: black;
  }

  button {
    background-color: black;
    color: white;
  }
}

<div id="themes">
  <!--The icon and theme will change on click-->
  <img id="current-theme">
</div>

標籤：javascript svg 设置属性

上一篇：SVG<foreignObject>阻止進一步繪制

下一篇：如何在ReactNative中渲染SVG并轉換為PNG