From 9deb16f92c4f79a121fa488638eaf8239131c6ee Mon Sep 17 00:00:00 2001 From: Eltrac Date: Thu, 17 Apr 2025 18:43:36 +0800 Subject: refactor: use custom css and media match to switch giscus theme --- layouts/partials/scripts.html | 41 ----------------------------------------- 1 file changed, 41 deletions(-) (limited to 'layouts/partials/scripts.html') diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 90f99630..dbf6aee0 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -20,45 +20,4 @@ littlefoot.littlefoot({ dismissOnUnhover: true }); - - /* == auto-switch giscus theme == */ - - // Function to send the theme change to the Giscus iframe - function changeGiscusTheme() { - const theme = document.documentElement.getAttribute('data-theme') === 'noborder_dark' ? 'noborder_dark' : 'noborder_light'; - - function sendMessage(message) { - const iframe = document.querySelector('iframe.giscus-frame'); - if (!iframe) return; - iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app'); - } - - // Send the theme change to Giscus iframe - sendMessage({ - setConfig: { - theme: theme - } - }); - } - - // Detect the system's color scheme (light or dark) - function updateTheme() { - const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches; - - // Update the theme of the page (this affects your custom styles) - if (prefersDarkScheme) { - document.documentElement.setAttribute('data-theme', 'noborder_dark'); - } else { - document.documentElement.setAttribute('data-theme', 'noborder_light'); - } - - // Change the Giscus iframe theme accordingly - changeGiscusTheme(); - } - - // Run the theme update function on page load - window.addEventListener('load', updateTheme); - - // Re-run when the system theme changes - window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', updateTheme); -- cgit v1.2.3