🐛 Fixed toggle theme color will refresh page.
This commit is contained in:
凡梦星尘
parent
1ae0ca2488
commit
913ae1821a
@ -41,7 +41,7 @@
|
||||
}
|
||||
|
||||
.goto-comments {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.goto-comments-on {
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
/* global NexT, CONFIG */
|
||||
|
||||
NexT.boot = {};
|
||||
|
||||
NexT.boot.activeThemeMode = function(){
|
||||
NexT.utils.activeThemeMode();
|
||||
};
|
||||
|
||||
NexT.boot.registerEvents = function() {
|
||||
|
||||
NexT.utils.registerScrollPercent();
|
||||
@ -39,13 +34,10 @@ NexT.boot.registerEvents = function() {
|
||||
NexT.boot.refresh = function() {
|
||||
|
||||
NexT.utils.calSiteInfo();
|
||||
NexT.utils.regSwitchThemeBtn();
|
||||
|
||||
if (!NexT.CONFIG.page.isPage) return;
|
||||
|
||||
NexT.utils.registerSidebarTOC();
|
||||
|
||||
//NexT.utils.replacePostCRLink();
|
||||
NexT.utils.registerCopyCode();
|
||||
NexT.utils.registerPostReward();
|
||||
if(NexT.CONFIG.page.comments) {
|
||||
@ -89,7 +81,6 @@ NexT.boot.motion = function() {
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
NexT.boot.activeThemeMode();
|
||||
NexT.boot.registerEvents();
|
||||
NexT.boot.motion();
|
||||
NexT.boot.refresh();
|
||||
|
||||
@ -22,10 +22,11 @@ HTMLElement.prototype.wrap = function (wrapper) {
|
||||
})();
|
||||
|
||||
NexT.utils = {
|
||||
|
||||
registerToolButtons: function () {
|
||||
const buttons = document.querySelectorAll('.tool-buttons div:nth-child(n+2)');
|
||||
buttons.forEach(button => {
|
||||
const buttons = document.querySelector('.tool-buttons');
|
||||
|
||||
const scrollbar_buttons = buttons.querySelectorAll('div:not(#toggle-theme)');
|
||||
scrollbar_buttons.forEach(button => {
|
||||
let targetId = button.id;
|
||||
if (targetId != '') {
|
||||
targetId = targetId.substring(5);
|
||||
@ -34,6 +35,12 @@ NexT.utils = {
|
||||
NexT.utils.slidScrollBarAnime(targetId);
|
||||
});
|
||||
});
|
||||
|
||||
buttons.querySelector('div#toggle-theme').addEventListener('click', () => {
|
||||
const cur_theme = document.documentElement.getAttribute('data-theme');
|
||||
console.log();
|
||||
window.theme.toggle(cur_theme === 'dark' ? 'light' : 'dark');
|
||||
});
|
||||
},
|
||||
|
||||
slidScrollBarAnime: function (targetId, easing = 'linear', duration = 500) {
|
||||
@ -45,79 +52,6 @@ NexT.utils = {
|
||||
});
|
||||
},
|
||||
|
||||
regSwitchThemeBtn: function () {
|
||||
const switchThemeBtn = document.getElementById('switch-theme');
|
||||
if (!switchThemeBtn) return;
|
||||
switchThemeBtn.addEventListener('click', () => {
|
||||
const colorTheme = document.documentElement.getAttribute('data-theme');
|
||||
NexT.utils.toggleDarkMode(!(colorTheme == 'dark'));
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
activeThemeMode: function () {
|
||||
const useDark = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
let darkModeState = NexT.CONFIG.darkmode || useDark.matches;
|
||||
const localState = NexT.utils.getLocalStorage('theme');
|
||||
if (localState == 'light'
|
||||
|| (localState == undefined && !NexT.CONFIG.darkmode)) {
|
||||
darkModeState = false;
|
||||
}
|
||||
NexT.utils.toggleDarkMode(darkModeState);
|
||||
|
||||
useDark.addListener(function (evt) {
|
||||
NexT.utils.toggleDarkMode(evt.matches);
|
||||
});
|
||||
},
|
||||
|
||||
toggleDarkMode: function (state) {
|
||||
if (state) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
NexT.utils.setLocalStorage('theme', 'dark', 2);
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
NexT.utils.setLocalStorage('theme', 'light', 2);
|
||||
}
|
||||
|
||||
const theme = state ? 'dark' : 'light';
|
||||
NexT.utils.toggleGiscusDarkMode(theme);
|
||||
},
|
||||
|
||||
toggleGiscusDarkMode: function (theme) {
|
||||
const iframe = document.querySelector('iframe.giscus-frame');
|
||||
if (iframe) {
|
||||
const config = { setConfig: { theme: theme } };
|
||||
iframe.contentWindow.postMessage({ giscus: config }, 'https://giscus.app');
|
||||
}
|
||||
},
|
||||
|
||||
setLocalStorage: function (key, value, ttl) {
|
||||
if (ttl === 0) return;
|
||||
const now = new Date();
|
||||
const expiryDay = ttl * 86400000;
|
||||
const item = {
|
||||
value: value,
|
||||
expiry: now.getTime() + expiryDay
|
||||
};
|
||||
localStorage.setItem(key, JSON.stringify(item));
|
||||
},
|
||||
|
||||
getLocalStorage: function (key) {
|
||||
const itemStr = localStorage.getItem(key);
|
||||
if (!itemStr) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const item = JSON.parse(itemStr);
|
||||
const now = new Date();
|
||||
|
||||
if (now.getTime() > item.expiry) {
|
||||
localStorage.removeItem(key);
|
||||
return undefined;
|
||||
}
|
||||
return item.value;
|
||||
},
|
||||
|
||||
domAddClass: function (selector, cls) {
|
||||
const doms = document.querySelectorAll(selector);
|
||||
if (doms) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
{{- $.Scratch.Set $k $v -}}
|
||||
{{- end -}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
<html lang="{{ .Site.LanguageCode }}" data-theme="{{ .Scratch.Get "theme" }}">
|
||||
|
||||
<head>
|
||||
{{- partial "head.html" . }}
|
||||
|
||||
@ -5,6 +5,61 @@
|
||||
{{- partial "head/facebook.html" . }}
|
||||
{{- partialCached "head/verify.html" . }}
|
||||
{{- partialCached "head/style.html" . }}
|
||||
<script type="text/javascript">
|
||||
(function(){
|
||||
localDB = {
|
||||
set: function (key, value, ttl) {
|
||||
if (ttl === 0) return;
|
||||
const now = new Date();
|
||||
const expiryDay = ttl * 86400000;
|
||||
const item = {
|
||||
value: value,
|
||||
expiry: now.getTime() + expiryDay
|
||||
};
|
||||
localStorage.setItem(key, JSON.stringify(item));
|
||||
},
|
||||
get: function (key) {
|
||||
const itemStr = localStorage.getItem(key);
|
||||
if (!itemStr) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const item = JSON.parse(itemStr);
|
||||
const now = new Date();
|
||||
|
||||
if (now.getTime() > item.expiry) {
|
||||
localStorage.removeItem(key);
|
||||
return undefined;
|
||||
}
|
||||
return item.value;
|
||||
}
|
||||
};
|
||||
|
||||
theme = {
|
||||
active: function() {
|
||||
const localState = localDB.get('theme');
|
||||
if (localState == undefined) return;
|
||||
theme.toggle(localState);
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addListener(function (evt) {
|
||||
theme.toggle(evt.matches ? 'dark' : 'light');
|
||||
});
|
||||
},
|
||||
|
||||
toggle: function (theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
localDB.set('theme', theme, 2);
|
||||
|
||||
const iframe = document.querySelector('iframe.giscus-frame');
|
||||
if (iframe) {
|
||||
const config = { setConfig: { theme: theme } };
|
||||
iframe.contentWindow.postMessage({ giscus: config }, 'https://giscus.app');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
theme.active();
|
||||
})(window);
|
||||
</script>
|
||||
{{- partial "head/config.html" . }}
|
||||
{{- partialCached "head/analytics.html" . }}
|
||||
|
||||
|
||||
@ -122,4 +122,10 @@
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $theme := "light" }}
|
||||
{{ if .Site.Params.darkmode }}
|
||||
{{ $theme = "dark" }}
|
||||
{{ end }}
|
||||
{{ $globalVars.Set "theme" $theme }}
|
||||
|
||||
{{ return $globalVars.Values }}
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
<div class="tool-buttons" >
|
||||
<div id="switch-theme" class="button" title="{{ T "ToolBtns.theme" }}">
|
||||
<i class="fas fa-adjust"></i>
|
||||
</div>
|
||||
<div class="tool-buttons" >
|
||||
<div id="goto-comments" class="button goto-comments" title="{{ T "ToolBtns.comment" }}">
|
||||
<i class="fas fa-comments"></i>
|
||||
</div>
|
||||
@ -10,6 +7,9 @@
|
||||
<i class="fas fa-globe"></i>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div id="toggle-theme" class="button" title="{{ T "ToolBtns.theme" }}">
|
||||
<i class="fas fa-adjust"></i>
|
||||
</div>
|
||||
{{- if and .Site.Params.backTop.enable (not .Site.Params.backTop.sidebar) }}
|
||||
<div class="back-to-top" role="button" title="{{ T "ToolBtns.backTop" }}">
|
||||
<i class="fa fa-arrow-up"></i>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user