bug/giscus-dark-toggle

src/core/giscus.ts

@@ -39,3 +39,41 @@ 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;
+
+export const buildGiscusThemeKeys = (
+  darkModeDefault: boolean,
+  theme: GiscusTheme
+): GiscusThemeToggleRecord => {
+  if (typeof theme === "string") {
+    if (theme.length > 0) {
+      return { baseTheme: theme, altTheme: theme };
+    } else {
+      theme = { light: "light", dark: "dark" };
+    }
+  }
+
+  const themeRecord: { light: string; dark: string } = theme as {
+    light: string;
+    dark: string;
+  };
+  let result = {
+    baseTheme: themeRecord.light ?? "light",
+    altTheme: themeRecord.dark ?? "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";
@@ -467,8 +470,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(!!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."
@@ -19301,6 +19318,7 @@ var require_yaml_intelligence_resources = __commonJS({
           short: "Notebook cell identifier",
           long: 'Notebook cell identifier. Note that if there is no cell\n<code>id</code> then <code>label</code> will be used as the cell\n<code>id</code> if it is present. See <a href="https://jupyter.org/enhancement-proposals/62-cell-id/cell-id.html" class="uri">https://jupyter.org/enhancement-proposals/62-cell-id/cell-id.html</a>\nfor additional details on cell ids.'
         },
+        "nbconvert tag to export cell",
         {
           short: "Whether to cache a code chunk.",
           long: "Whether to cache a code chunk. When evaluating code chunks for the\nsecond time, the cached chunks are skipped (unless they have been\nmodified), but the objects created in these chunks are loaded from\npreviously saved databases (<code>.rdb</code> and <code>.rdx</code>\nfiles), and these files are saved when a chunk is evaluated for the\nfirst time, or when cached files are not found (e.g., you may have\nremoved them by hand). Note that the filename consists of the chunk\nlabel with an MD5 digest of the R code and chunk options of the code\nchunk, which means any changes in the chunk will produce a different MD5\ndigest, and hence invalidate the cache."
@@ -21068,8 +21086,7 @@ var require_yaml_intelligence_resources = __commonJS({
           long: "Title of the volume of the item or container holding the item.\nAlso use for titles of periodical special issues, special sections,\nand the like."
         },
         "Disambiguating year suffix in author-date styles (e.g.&nbsp;\u201Ca\u201D in \u201CDoe,\n1999a\u201D).",
-        "internal-schema-hack",
-        "nbconvert tag to export cell"
+        "internal-schema-hack"
       ],
       "schema/external-schemas.yml": [
         {
@@ -21293,12 +21310,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 152480,
+        _internalId: 152620,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 152472,
+            _internalId: 152612,
             type: "enum",
             enum: [
               "png",
@@ -21314,7 +21331,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 152479,
+            _internalId: 152619,
             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."
@@ -12277,6 +12294,7 @@
       "short": "Notebook cell identifier",
       "long": "Notebook cell identifier. Note that if there is no cell\n<code>id</code> then <code>label</code> will be used as the cell\n<code>id</code> if it is present. See <a href=\"https://jupyter.org/enhancement-proposals/62-cell-id/cell-id.html\" class=\"uri\">https://jupyter.org/enhancement-proposals/62-cell-id/cell-id.html</a>\nfor additional details on cell ids."
     },
+    "nbconvert tag to export cell",
     {
       "short": "Whether to cache a code chunk.",
       "long": "Whether to cache a code chunk. When evaluating code chunks for the\nsecond time, the cached chunks are skipped (unless they have been\nmodified), but the objects created in these chunks are loaded from\npreviously saved databases (<code>.rdb</code> and <code>.rdx</code>\nfiles), and these files are saved when a chunk is evaluated for the\nfirst time, or when cached files are not found (e.g., you may have\nremoved them by hand). Note that the filename consists of the chunk\nlabel with an MD5 digest of the R code and chunk options of the code\nchunk, which means any changes in the chunk will produce a different MD5\ndigest, and hence invalidate the cache."
@@ -14044,8 +14062,7 @@
       "long": "Title of the volume of the item or container holding the item.\nAlso use for titles of periodical special issues, special sections,\nand the like."
     },
     "Disambiguating year suffix in author-date styles (e.g.&nbsp;“a” in “Doe,\n1999a”).",
-    "internal-schema-hack",
-    "nbconvert tag to export cell"
+    "internal-schema-hack"
   ],
   "schema/external-schemas.yml": [
     {
@@ -14269,12 +14286,12 @@
     "mermaid": "%%"
   },
   "handlers/mermaid/schema.yml": {
-    "_internalId": 152480,
+    "_internalId": 152620,
     "type": "object",
     "description": "be an object",
     "properties": {
       "mermaid-format": {
-        "_internalId": 152472,
+        "_internalId": 152612,
         "type": "enum",
         "enum": [
           "png",
@@ -14290,7 +14307,7 @@
         "exhaustiveCompletions": true
       },
       "theme": {
-        "_internalId": 152479,
+        "_internalId": 152619,
         "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,52 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
     }
   }
 
+
+  const toggleGiscusIfUsed = (isAlternate, darkModeDefault) => {
+    console.log('toggleGiscusIfUsed');
+    console.log('isAlternate', isAlternate);
+    console.log('darkModeDefault', darkModeDefault);
+
+    const baseTheme = document.querySelector('#giscus-base-theme')?.value ?? 'light';
+    const alternateTheme = document.querySelector('#giscus-alt-theme')?.value ?? 'dark';
+
+    console.log('baseTheme', baseTheme);
+    console.log('alternateTheme', alternateTheme);
+
+    let newTheme = '';
+
+    if(darkModeDefault) {
+      newTheme = isAlternate ? baseTheme : alternateTheme;
+    } else {
+      newTheme = isAlternate ? alternateTheme : baseTheme;
+    }
+
+    console.log('isAlternate', isAlternate);
+    console.log('darkModeDefault', darkModeDefault);
+    console.log('newTheme', newTheme);
+
+    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 +171,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. */;