我已经使用这样的简单技术在。
<script>
//runs on every page load, checks local storage for last mode and applies dark mode if found
document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
//the function must be called when dark mode is clicked by the user
function switch_mode(){
const dark = localStorage.getItem('darkmode') === 'true';
localStorage.setItem('darkmode', !dark);
const element = document.body;
element.classList.toggle('dark-mode', !dark);
}
为了防止闪烁，我尝试将第一行放置在头标签内（通过标题和页脚脚本插件），但似乎不起作用。我已经看到了解决这个问题的解决方案，但是它们似乎都与一开始都不同，因此很难将这些解决方案应用于我使用的代码。
为了触发交换机，我使用的是一个可单击的图标，该图标具有调用该功能的onClick（）属性。我的问题有任何解决方案，还是我应该使用其他技术触发器从头开始整个过程？
I have implemented a dark mode to a WordPress site using a simple technique like this one found in https://github.com/avecNava/dark-mode.
<script>
//runs on every page load, checks local storage for last mode and applies dark mode if found
document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
//the function must be called when dark mode is clicked by the user
function switch_mode(){
const dark = localStorage.getItem('darkmode') === 'true';
localStorage.setItem('darkmode', !dark);
const element = document.body;
element.classList.toggle('dark-mode', !dark);
}
To prevent flickering I've tried to place the first row inside the head tags (via header and footer scripts plugin) but it doesn't seem to work. I've seen solutions to this problem but they all seem to be built different from the start so it's hard to apply those solutions to the code I'm using.
To trigger the switch, I'm using a clickable icon that has an onClick() property that calls the function. Is there any solution to my problem or should I just start the whole thing from scratch using a different technique for example a checkbox trigger?
发布评论