do theme change by listening to theme change event in Giscus component

Author: nemanjam

docs/working-notes/todo2.md

@@ -177,6 +177,10 @@ https://github.dev/syhily/yufan.me
 // interesting design
 https://github.com/joshmedeski/joshmedeski.com
 
+// clean styles, no github repo
+// astrowind zapravo data-aw-social-share
+https://thezal.dev/blog/
+
 // notion cms
 https://feather.so/showcase
 https://bhanuteja.dev/blog

docs/working-notes/todo3.md

@@ -409,5 +409,6 @@ search with fuse.js astro-paper
 fix lint, types, format
 put images beside .mdx in content, slug...
 style giscus, tags and share
+    move giscus mode, add another theme change event handler
 ```
 

src/components/Giscus.astro

@@ -23,13 +23,25 @@
   import 'giscus';
 
   import { SELECTORS } from '@/constants/dom';
-  import { getCurrentMode } from '@/utils/dom';
+  import { THEME_CONFIG } from '@/constants/themes';
+  import { getCurrentMode, sendModeToGiscus } from '@/utils/dom';
+
+  import type { ChangeThemeCustomEvent } from '@/types/constants';
 
   const { GISCUS_WIDGET_SELECTOR } = SELECTORS;
+  const { CHANGE_EVENT } = THEME_CONFIG;
 
   // will run only on page load
   const giscusWidget = document.querySelector(GISCUS_WIDGET_SELECTOR);
   const mode = getCurrentMode();
 
   if (giscusWidget) giscusWidget.setAttribute('theme', mode);
+
+  // will run on button click
+  document.addEventListener(CHANGE_EVENT, (event) => {
+    const customEvent = event as ChangeThemeCustomEvent;
+    const { mode } = customEvent.detail.theme;
+
+    sendModeToGiscus(mode);
+  });
 </script>

src/components/ThemeToggle.astro

@@ -11,7 +11,9 @@ import { Icon } from 'astro-icon/components';
 
 <script>
   import { THEME_CONFIG } from '@/constants/themes';
-  import { getNextTheme, sendModeToGiscus } from '@/utils/dom';
+  import { getNextTheme } from '@/utils/dom';
+
+  import type { ChangeThemeCustomEvent } from '@/types/constants';
 
   const { CHANGE_EVENT } = THEME_CONFIG;
 
@@ -33,18 +35,13 @@ import { Icon } from 'astro-icon/components';
         () => {
           // shift theme
           const nextTheme = getNextTheme();
-          const themeChangeEvent = new CustomEvent(CHANGE_EVENT, {
-            detail: { theme: nextTheme },
-          });
+          const payload = { detail: { theme: nextTheme } } as ChangeThemeCustomEvent;
+          const themeChangeEvent = new CustomEvent(CHANGE_EVENT, payload);
           // dispatch event -> ThemeProvider.astro
           document.dispatchEvent(themeChangeEvent);
 
           // set the aria-checked attribute
           // button.setAttribute('aria-checked', String(isDarkMode()));
-
-          // send message with delay to Giscus here
-          // ThemeScript has <script is:inline /> and can't import files
-          setTimeout(() => sendModeToGiscus(), 50);
         },
         { signal }
       );

src/types/constants.ts

@@ -19,3 +19,5 @@ export type ImageSizes = {
   FIXED: Record<string, Pick<LocalImageProps, 'width' | 'height'>>;
   RESPONSIVE: Record<string, Pick<LocalImageProps, 'widths' | 'sizes'>>;
 };
+
+export type ChangeThemeCustomEvent = CustomEvent<{ theme: Theme }>;

src/utils/dom.ts

@@ -1,7 +1,7 @@
 import { SELECTORS } from '@/constants/dom';
 import { DEFAULT_THEMES, MODES, THEME_CONFIG, THEMES } from '@/constants/themes';
 
-import type { Theme } from '@/types/constants';
+import type { Mode, Theme } from '@/types/constants';
 
 const { MODE_CLASS, DATA_ATTRIBUTE } = THEME_CONFIG;
 
@@ -39,7 +39,7 @@ export const getNextTheme = () => {
 
 const { GISCUS_WIDGET_SELECTOR, GISCUS_IFRAME_SELECTOR } = SELECTORS;
 
-export const sendModeToGiscus = (): void => {
+export const sendModeToGiscus = (mode: Mode): void => {
   const giscusIframeUrl = 'https://giscus.app';
 
   const shadowHost = document.querySelector(GISCUS_WIDGET_SELECTOR);
@@ -49,7 +49,5 @@ export const sendModeToGiscus = (): void => {
   const iframe = shadowRoot.querySelector(GISCUS_IFRAME_SELECTOR) as HTMLIFrameElement;
   if (!iframe?.contentWindow) return;
 
-  const mode = getCurrentMode();
-
   iframe.contentWindow.postMessage({ giscus: { setConfig: { theme: mode } } }, giscusIframeUrl);
 };