bug/giscus-dark-toggle

news/changelog-1.4.md

@@ -1,3 +1,6 @@
+## Giscus Dark Mode Themes
+- Add support for setting the Giscus light/dark themes. ([#4820](https://github.com/quarto-dev/quarto-cli/issues/4820))
+
 ## Languages
 
 - Add Slovak translation (thanks @tom67)

src/core/giscus.ts

@@ -39,3 +39,46 @@ export async function getGithubDiscussionsMetadata(repo: string) {
   const jsonObj = await response.json();
   return jsonObj as GithubDiscussionMetadata;
 }
+
+export type GiscusThemeToggleRecord = {
+  baseTheme: string;
+  altTheme: string;
+}
+
+export type GiscusTheme = {
+  light?: string;
+  dark?: string;
+} | string;
+
+enum GiscusThemeDefault {
+  light = "light",
+  dark = "dark",
+}
+
+export const buildGiscusThemeKeys = (
+  darkModeDefault: boolean,
+  theme: GiscusTheme
+): GiscusThemeToggleRecord => {
+  if (typeof theme === "string") {
+    if (theme.length > 0) {
+      return { baseTheme: theme, altTheme: theme };
+    } else {
+      theme = { light: GiscusThemeDefault.light, dark: GiscusThemeDefault.dark };
+    }
+  }
+
+  const themeRecord: { light: string; dark: string } = theme as {
+    light: string;
+    dark: string;
+  };
+  const result = {
+    baseTheme: themeRecord.light ?? GiscusThemeDefault.light,
+    altTheme: themeRecord.dark ?? GiscusThemeDefault.dark,
+  };
+
+  if (darkModeDefault) {
+    [result.baseTheme, result.altTheme] = [result.altTheme, result.baseTheme];
+  }
+
+  return result;
+};

src/format/html/format-html.ts

@@ -1,3 +1,5 @@
+// noinspection TypeScriptUnresolvedReference
+
 /*
  * format-html.ts
  *
@@ -88,8 +90,9 @@ import {
   RenderServices,
 } from "../../command/render/types.ts";
 import {
+  buildGiscusThemeKeys,
   getDiscussionCategoryId,
-  getGithubDiscussionsMetadata,
+  getGithubDiscussionsMetadata, GiscusTheme, GiscusThemeToggleRecord,
 } from "../../core/giscus.ts";
 import { metadataPostProcessor } from "./format-html-meta.ts";
 import { kHtmlEmptyPostProcessResult } from "../../command/render/constants.ts";
@@ -471,8 +474,17 @@ export async function htmlFormatExtras(
   // giscus
   if (options.giscus) {
     const giscus = options.giscus as Record<string, unknown>;
+
     giscus.category = giscus.category || "General";
-    giscus.theme = giscus.theme || "light";
+    giscus.theme = giscus.theme || "";
+
+    const themeToggleRecord:GiscusThemeToggleRecord =
+        buildGiscusThemeKeys(Boolean(options.darkModeDefault), giscus.theme as GiscusTheme)
+
+    giscus.baseTheme = themeToggleRecord.baseTheme;
+    giscus.altTheme = themeToggleRecord.altTheme;
+    giscus.theme = giscus.baseTheme;
+
     giscus.mapping = giscus.mapping || "title";
     giscus["reactions-enabled"] = giscus["reactions-enabled"] !== undefined
       ? giscus["reactions-enabled"]

src/resources/editor/tools/vs-code.mjs

@@ -8515,6 +8515,23 @@ var require_yaml_intelligence_resources = __commonJS({
                                 "transparent_dark",
                                 "preferred_color_scheme"
                               ]
+                            },
+                            {
+                              object: {
+                                closed: true,
+                                properties: {
+                                  light: {
+                                    string: {
+                                      description: "The light theme name."
+                                    }
+                                  },
+                                  dark: {
+                                    string: {
+                                      description: "The dark theme name."
+                                    }
+                                  }
+                                }
+                              }
                             }
                           ],
                           description: "The giscus theme to use when displaying comments."
@@ -21482,12 +21499,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 158429,
+        _internalId: 158441,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 158421,
+            _internalId: 158433,
             type: "enum",
             enum: [
               "png",
@@ -21503,7 +21520,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 158428,
+            _internalId: 158440,
             type: "anyOf",
             anyOf: [
               {

src/resources/editor/tools/yaml/yaml-intelligence-resources.json

@@ -1491,6 +1491,23 @@
                             "transparent_dark",
                             "preferred_color_scheme"
                           ]
+                        },
+                        {
+                          "object": {
+                            "closed": true,
+                            "properties": {
+                              "light": {
+                                "string": {
+                                  "description": "The light theme name."
+                                }
+                              },
+                              "dark": {
+                                "string": {
+                                  "description": "The dark theme name."
+                                }
+                              }
+                            }
+                          }
                         }
                       ],
                       "description": "The giscus theme to use when displaying comments."
@@ -14458,12 +14475,12 @@
     "mermaid": "%%"
   },
   "handlers/mermaid/schema.yml": {
-    "_internalId": 158429,
+    "_internalId": 158441,
     "type": "object",
     "description": "be an object",
     "properties": {
       "mermaid-format": {
-        "_internalId": 158421,
+        "_internalId": 158433,
         "type": "enum",
         "enum": [
           "png",
@@ -14479,7 +14496,7 @@
         "exhaustiveCompletions": true
       },
       "theme": {
-        "_internalId": 158428,
+        "_internalId": 158440,
         "type": "anyOf",
         "anyOf": [
           {

src/resources/formats/html/giscus/giscus.ejs

@@ -12,4 +12,6 @@
         crossorigin="anonymous"
         <%- giscus.loading ? `data-loading=${giscus.loading}` : '' %>
         async>
-</script>
+</script>
+<input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
+<input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">

src/resources/formats/html/templates/quarto-html.ejs

@@ -53,6 +53,41 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
     }
   }
 
+
+  const toggleGiscusIfUsed = (isAlternate, darkModeDefault) => {
+    const baseTheme = document.querySelector('#giscus-base-theme')?.value ?? 'light';
+    const alternateTheme = document.querySelector('#giscus-alt-theme')?.value ?? 'dark';
+
+    let newTheme = '';
+
+    if(darkModeDefault) {
+      newTheme = isAlternate ? baseTheme : alternateTheme;
+    } else {
+      newTheme = isAlternate ? alternateTheme : baseTheme;
+    }
+
+    const changeGiscusTheme = () => {
+
+      // From: https://github.com/giscus/giscus/issues/336
+      const sendMessage = (message) => {
+        const iframe = document.querySelector('iframe.giscus-frame');
+        if (!iframe) return;
+        iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+      }
+
+      sendMessage({
+        setConfig: {
+          theme: newTheme
+        }
+      });
+    }
+
+    const isGiscussLoaded = window.document.querySelector('iframe.giscus-frame') !== null;
+    if (isGiscussLoaded) {
+      changeGiscusTheme();
+    }
+  }
+
   const toggleColorMode = (alternate) => {
     // Switch the stylesheets
     const alternateStylesheets = window.document.querySelectorAll('link.quarto-color-scheme.quarto-color-alternate');
@@ -125,14 +160,16 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
       return localAlternateSentinel;
     }
   }
-  let localAlternateSentinel = <%= darkModeDefault ? "'alternate'" : "'default'" %>;
-
+  const darkModeDefault = <%= darkModeDefault %>;
+  let localAlternateSentinel = darkModeDefault ? 'alternate' : 'default';
+
   // Dark / light mode switch
   window.quartoToggleColorScheme = () => {
     // Read the current dark / light value 
     let toAlternate = !hasAlternateSentinel();
     toggleColorMode(toAlternate);
     setStyleSentinel(toAlternate);
+    toggleGiscusIfUsed(toAlternate, darkModeDefault);
   };
 
   // Ensure there is a toggle, if there isn't float one in the top right

src/resources/schema/definitions.yml

@@ -265,6 +265,16 @@
                           transparent_dark,
                           preferred_color_scheme,
                         ]
+                    - object:
+                        closed: true
+                        properties:
+                          light:
+                            string:
+                              description: The light theme name.
+                          dark:
+                            string:
+                              description: The dark theme name.
+
                   description: The giscus theme to use when displaying comments.
                 language:
                   string:

src/resources/types/schema-types.ts

@@ -132,7 +132,11 @@ the discussions feature must be enabled. */;
         | "dark_dimmed"
         | "transparent_dark"
         | "preferred_color_scheme"
-      ); /* The giscus theme to use when displaying comments. */
+      )
+      | {
+        dark?: string /* The dark theme name. */;
+        light?: string; /* The light theme name. */
+      }; /* The giscus theme to use when displaying comments. */
   };
   hypothesis?: boolean | {
     assetRoot?: string /* The root URL from which assets are loaded. */;

tests/docs/smoke-all/issues/4820-giscus-dark-mode/darkly-default/.gitignore

@@ -0,0 +1,2 @@
+/.quarto/
+_site

tests/docs/smoke-all/issues/4820-giscus-dark-mode/darkly-default/_quarto.yml

@@ -0,0 +1,13 @@
+project:
+  type: website
+
+website:
+  comments:
+    giscus:
+      repo: allenmanning/giscus-examples
+
+format:
+  html:
+    theme:
+      dark: darkly
+      light: lightly

tests/docs/smoke-all/issues/4820-giscus-dark-mode/darkly-default/index.qmd

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.

tests/docs/smoke-all/issues/4820-giscus-dark-mode/darkly-light-cobalt/.gitignore

@@ -0,0 +1,2 @@
+/.quarto/
+_site

tests/docs/smoke-all/issues/4820-giscus-dark-mode/darkly-light-cobalt/_quarto.yml

@@ -0,0 +1,16 @@
+project:
+  type: website
+
+website:
+  comments:
+    giscus:
+      repo: allenmanning/giscus-examples
+      theme:
+        light: light
+        dark: cobalt
+
+format:
+  html:
+    theme:
+      dark: darkly
+      light: lightly

tests/docs/smoke-all/issues/4820-giscus-dark-mode/darkly-light-cobalt/index.qmd

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.

tests/docs/smoke-all/issues/4820-giscus-dark-mode/darkly-light-dark/.gitignore

@@ -0,0 +1,2 @@
+/.quarto/
+_site

tests/docs/smoke-all/issues/4820-giscus-dark-mode/darkly-light-dark/_quarto.yml

@@ -0,0 +1,16 @@
+project:
+  type: website
+
+website:
+  comments:
+    giscus:
+      repo: allenmanning/giscus-examples
+      theme:
+        light: light
+        dark: dark
+
+format:
+  html:
+    theme:
+      dark: darkly
+      light: lightly