Which function is the actual callback function when switching the theme mode? #111
-
|
Hello @HEIGE-PCloud , I need to say THANK YOU for maintaining this HUGO theme to you and your contributors. So much appreciate it！ Currently, I'm trying to remove the 'BLACK' and 'AUTO' mode in the dropdown box from the user side, but still, keep the 'AUTO' mode inside the code logic. Everything works fine under the theme 'SELECT' mode. When it came to the theme 'SWITCH' mode, I met some issues. Saying I was in the 'dark' mode, the color of the theme was dark. After I clicked the switch button, it changed to 'light' mode. But when I continued to click the button, it kept light. And it would change to dark after another click. The logic was "dark - light - light - dark". I'm speculating one of the 'light' is caused by the 'AUTO' mode. I checked all the possible codes I need to change without touching the BTW, I'm a C++ and Python programmer, with little knowledge about the front-end and GO, but I'm still comfortable reading your code and understanding all the logic. I would appreciate it if you could point out anything I was missing or any suggestions that I could achieve my purpose. Thanks, |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
|
Unfortunately, you need to modify Start from line 83, the function initSwitchTheme() {
this.util.forEach(document.getElementsByClassName('theme-switch'), $themeSwitch => {
$themeSwitch.addEventListener('click', () => {
let currentTheme = document.body.getAttribute('theme');
if (currentTheme === 'dark') {
document.body.setAttribute('theme', 'black');
window.localStorage && localStorage.setItem('theme', 'black');
this.isDark = true;
} else if (currentTheme === 'black') {
document.body.setAttribute('theme', 'light');
window.localStorage && localStorage.setItem('theme', 'light');
this.isDark = false;
} else {
document.body.setAttribute('theme', 'dark');
window.localStorage && localStorage.setItem('theme', 'dark');
this.isDark = true;
}
for (let event of this.switchThemeEventSet) event();
}, false);
});
}Change it into initSwitchTheme() {
this.util.forEach(document.getElementsByClassName('theme-switch'), $themeSwitch => {
$themeSwitch.addEventListener('click', () => {
let currentTheme = document.body.getAttribute('theme');
if (currentTheme === 'light') {
document.body.setAttribute('theme', 'dark');
window.localStorage && localStorage.setItem('theme', 'dark');
this.isDark = true;
} else if (currentTheme === 'dark') {
document.body.setAttribute('theme', 'light');
window.localStorage && localStorage.setItem('theme', 'light');
this.isDark = false;
}
for (let event of this.switchThemeEventSet) event();
}, false);
});
}Next, you need to compile the Step 1 Install npm and Node.jsStep 2 Install dev dependenciesUnder Step 3 Complie
|
Beta Was this translation helpful? Give feedback.
-
|
Hey @HEIGE-PCloud , Thanks for your timely and detailed reply! It looks like I will take some time to learn about the nodejs in the coming days and will keep you updated when everything is set! Again, really appreciate your help! :) |
Beta Was this translation helpful? Give feedback.
-
|
Hello @HEIGE-PCloud , Some issues I've encountered when I tried the I first tried to run In the beginning, I thought the errors were caused by other changes I made. So I forked the project and downloaded it again inside a new and clean folder. However, the errors showed me again. Could you point me out if there is anything I've missed between running the commands Environment showed below, C:\Users\ZhaoyiLuo\AppData\Roaming\npm-cache_logs\2021-06-21T15_42_04_587Z-debug.log |
Beta Was this translation helpful? Give feedback.
-
|
Hi, It seems that your build for To build |
Beta Was this translation helpful? Give feedback.
-
|
Awesome! Finally, it works as I only need to change all the code you've mentioned above without touching any other code! For the Below is the detailed log for this issue. I handled it by adding The issue can be reproduced every time I started everything from scratch (copying all stuff from exampleSite). |
Beta Was this translation helpful? Give feedback.
-
|
It might relate to this issue gohugoio/hugo#8130 Since I cannot reproduce this issue and it is on Hugo's side, sorry I can't provide any further help. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, it doesn't matter. I still need to say thank you for helping me solve my current problem! |
Beta Was this translation helpful? Give feedback.
Unfortunately, you need to modify
src/js/theme.js.Start from line 83, the function
initSwitchThemeis the one you need to modify.