JS 黑暗主题没有改变

Question

我正在尝试为我的项目中的 table 制作 light/light 主题，默认情况下它是暗的，所以我试图在单击按钮时将其更改为亮，但是当我点击它变亮但没有返回任何提示？

var element = document.getElementById('toggleTheme')
var attributeContent = element.getAttribute('data-layout-mode')
let toggleTheme = document.querySelector(".light-dark-mode");
let styleSheet = document.querySelector("#color-theme");

console.log(attributeContent);

if (attributeContent=="dark") {
    toggleTheme.addEventListener("click", () => {
        styleSheet.setAttribute("href", "")

        })
} else if (attributeContent=="light") {
    toggleTheme.addEventListener("click", () => {
        styleSheet.setAttribute("href", "{{ asset('css/style.css') }}")

        })
} else {
            console.log("not found")
}

Answer 1

您只需根据 attributeContent 的初始值定义要切换的内容。

你最好测试一下，每次点击开关时，当前是暗还是亮。

类似

var element = document.getElementById('toggleTheme')
let toggleTheme = document.querySelector(".light-dark-mode");
let styleSheet = document.querySelector("#color-theme");

toggleTheme.addEventListener("click", function() {
  // read the layout mode
  var attributeContent = element.getAttribute('data-layout-mode');
  
  if (attributeContent == "dark") {
    styleSheet.setAttribute("href", "");
    // set the layout mode to the new value
    element.setAttribute('data-layout-mode', 'light');
  } else if (attributeConten == "light") {
    styleSheet.setAttribute("href", "{{ asset('css/style.css') }}");
    // set the layout mode to the new value
    element.setAttribute('data-layout-mode', 'dark');
  } else {
    console.log("not found")
  }
})

JS 黑暗主题没有改变

JS dark theme not changing

javascript

toggle

darkmode