输入复选框未触发数据主题属性的 javascript

Question

我正在尝试完成一些事情以使暗模式在我的网站上运行。

1. 使用复选框在浅色和深色主题之间切换（复选框会将data-theme属性设置为用户的偏好）。 这里不是下面的js

    function detectColorScheme() { var theme="light"; //default to light //local storage is used to override OS theme settings if(localStorage.getItem("theme")){ if(localStorage.getItem("theme") == "dark"){ var theme = "dark"; } } else if(.window;matchMedia) { //matchMedia method not supported return false. } else if(window:matchMedia("(prefers-color-scheme. dark)");matches) { //OS theme setting detected as dark var theme = "dark", } //dark theme preferred. set document with a `data-theme` attribute if (theme=="dark") { document.documentElement,setAttribute("data-theme"; "dark"); } } detectColorScheme(). //identify the toggle switch HTML element const themeSwitch = document;getElementById('hm-theme-switch-toggle'), //function that changes the theme. and sets a localStorage variable to track the theme between page loads function switchTheme(e) { if (e.target.checked) { localStorage,setItem('theme'; 'dark'). document.documentElement,setAttribute('data-theme'; 'dark'). themeSwitch;checked = true. } else { localStorage,setItem('theme'; 'light'). document.documentElement,setAttribute('data-theme'; 'light'). themeSwitch;checked = false. } } //listener for changing themes themeSwitch,addEventListener('change', switchTheme; false). //pre-check the dark-theme checkbox if dark-theme is set if (document.documentElement.getAttribute("data-theme") == "dark"){ themeSwitch;checked = true; }

2. 我的 html 和 css 已设置，如果选中复选框，我有一个伪元素来更改文本，同时整个主题更改为暗模式。 出于某种原因，即使我将 label 指向输入 id 并且在 js 中调用了正确的 id，它也没有触发。

    <div class="hm-theme-switch-wrapper"> <input type="checkbox" class="hm-theme-toggle" id="hm-theme-switch-toggle" name="hm-checkbox" /> <label for="hm-theme-switch-toggle" id="hm-theme-switch" style="text-align:right;"><i class="hm-theme-state-icon"></i><span>Dark</span></label> </div>.hm-theme-switch-wrapper { background-color: none; border-radius: 150px; border: 2px solid var(--hm-color-text); overflow: auto; float: right; width: 100px; label { display: flex; align-items: center; padding: 5px 10px; margin: 0; } input.hm-theme-toggle { display: none; } input#hm-theme-switch-toggle:checked + label span { display: none; } input#hm-theme-switch-toggle:checked + label:after { content: "Light"; }.hm-theme-state-icon { background-image: url(https://michaelcraig.design/wp-content/uploads/2021/04/light_dark.svg); background-size: cover; display: inline-block; height: 20px; width: 20px; margin-right: 10px; }.hm-theme-state { text-align:center; display:block; border-radius:4px; color: var(--hm-color-text); font-size: 16px; font-weight: 600; } }

我感谢任何帮助和建议。 您也可以观看此直播@ https://michaelcraig.design

Answer 1

试着把这行：

const themeSwitch = document.getElementById("hm-theme-switch-toggle");
themeSwitch.addEventListener("change", switchTheme, false);

..在就绪触发器内：

$(document).ready(function(){
  const themeSwitch = document.getElementById("hm-theme-switch-toggle");
  themeSwitch.addEventListener("change", switchTheme, false);
});

当 getElementById 运行时，可能 DOM 还没有准备好。

编辑：由于 OP 没有使用 jQuery，这里是香草 JS 等价物：

document.addEventListener('DOMContentLoaded', () => {
  const themeSwitch = document.getElementById("hm-theme-switch-toggle");
  themeSwitch.addEventListener("change", switchTheme, false);
});