syntaxerrormmm/hugo-theme-anubis2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix giscus color switch

Browse source
This commit is contained in:
Junyi Hou 2024-03-18 18:38:18 +08:00
parent 74015da3e5
commit 00ac00f3fb
2 changed files with 34 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

65
layouts/partials/giscus.html
View file

@ -1,23 +1,24 @@
{{ $theme := .Site.Params.GiscusTheme | default "preferred_color_scheme" }}
{{ $mapping := .Site.Params.GiscusDataMapping | default "og:title" }}
{{ $language := .Site.Params.GiscusLang | default "en" }}
{{ $category := .Site.Params.GiscusDiscussionCategory | default "Announcements" }}
{{ $lazyload := .Site.Params.GiscusLazyLoad | default false }}
{{ $theme := .Site.Params.GiscusTheme | default "preferred_color_scheme" }} {{ $mapping :=
.Site.Params.GiscusDataMapping | default "og:title" }} {{ $language := .Site.Params.GiscusLang | default "en" }} {{
$category := .Site.Params.GiscusDiscussionCategory | default "Announcements" }} {{ $lazyload
:= .Site.Params.GiscusLazyLoad | default false }} {{ $colorTheme := "auto" }} {{ if and (isset site.Params "colortheme")
(ne site.Params.colortheme "") }} {{ $colorTheme = site.Params.colortheme | lower }} {{ end }}
<script>
function detectCurrentScheme() {
if (localStorage !== null && localStorage.getItem('user-color-scheme')) {
return localStorage.getItem('user-color-scheme')
function detectCurrentScheme2() {
const defaultTheme = "{{ $colorTheme }}";
if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
return localStorage.getItem("user-color-scheme");
}
if (defaultTheme) {
return defaultTheme
if (defaultTheme === "dark" || defaultTheme === "light") {
return defaultTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
let giscusTheme = detectCurrentScheme();
let giscusTheme = detectCurrentScheme2();
let giscusAttributes = {
"src": "https://giscus.app/client.js",
src: "https://giscus.app/client.js",
"data-repo": "{{- .Site.Params.GiscusRepo -}}",
"data-repo-id": "{{- .Site.Params.GiscusRepoId -}}",
"data-category": "{{- $category -}}",
@ -29,32 +30,20 @@
"data-input-position": "bottom",
"data-theme": giscusTheme,
"data-lang": "{{ $language }}",
"crossorigin": "anonymous",
"lazyload": "{{ $lazyload }}",
"async": true
}
let main = document.querySelector('main');
let giscusScript = document.createElement('script');
crossorigin: "anonymous",
lazyload: "{{ $lazyload }}",
async: true,
};
let main = document.querySelector("main");
let giscusScript = document.createElement("script");
Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
main.appendChild(giscusScript);
</script>
{{/*
<script src="https://giscus.app/client.js"
data-repo="{{- .Site.Params.GiscusRepo -}}"
data-repo-id="{{- .Site.Params.GiscusRepoId -}}"
data-category="{{- .Site.Params.GiscusCategory -}}"
data-category-id="{{- .Site.Params.GiscusCategoryId -}}"
data-mapping="{{ $mapping }}"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="{{ $theme }}"
data-lang="{{ $language }}"
crossorigin="anonymous"
{{ if $lazyload }}
data-loading="lazy"
{{ end }}
async>
</script> */}}
<script src="https://giscus.app/client.js" data-repo="{{- .Site.Params.GiscusRepo -}}"
data-repo-id="{{- .Site.Params.GiscusRepoId -}}" data-category="{{- .Site.Params.GiscusCategory -}}"
data-category-id="{{- .Site.Params.GiscusCategoryId -}}" data-mapping="{{ $mapping }}" data-strict="0"
data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="{{ $theme }}"
data-lang="{{ $language }}" crossorigin="anonymous" {{ if $lazyload }} data-loading="lazy" {{ end }}
async></script>
*/}}

9
layouts/partials/theme-switcher.html
View file

@ -26,7 +26,8 @@
const autoChangeScheme = e => {
currentTheme = e.matches ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', currentTheme)
document.documentElement.setAttribute('data-theme', currentTheme);
changeGiscusTheme(currentTheme);
}
document.addEventListener('DOMContentLoaded', function () {
@ -61,7 +62,7 @@
currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
document.documentElement.setAttribute('data-theme', currentTheme);
changeGiscusTheme();
changeGiscusTheme(currentTheme);
}
function showContent() {
@ -69,9 +70,7 @@
document.body.style.opacity = 1;
}
function changeGiscusTheme () {
const theme = detectCurrentScheme();
function changeGiscusTheme (theme) {
function sendMessage(message) {
const iframe = document.querySelector('iframe.giscus-frame');
if (!iframe) return;