From 240e0fc668c3fdd96008c446b082356f763cac27 Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Wed, 23 Apr 2025 18:21:34 -0400 Subject: [PATCH 1/4] giscus themes are reversed based on author preference not user preference which is kind of silly because it's usually the user's preference that matters, see next commit --- .../formats/html/templates/quarto-html-before-body.ejs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/resources/formats/html/templates/quarto-html-before-body.ejs b/src/resources/formats/html/templates/quarto-html-before-body.ejs index 441c1f2a96a..20344095c31 100644 --- a/src/resources/formats/html/templates/quarto-html-before-body.ejs +++ b/src/resources/formats/html/templates/quarto-html-before-body.ejs @@ -136,7 +136,7 @@ let newTheme = ''; - if(darkModeDefault) { + if(authorPrefersDark) { newTheme = isAlternate ? baseTheme : alternateTheme; } else { newTheme = isAlternate ? alternateTheme : baseTheme; @@ -164,11 +164,12 @@ } }; + const authorPrefersDark = <%= darkModeDefault %>; <% if (respectUserColorScheme) { %> const queryPrefersDark = window.matchMedia('(prefers-color-scheme: dark)'); const darkModeDefault = queryPrefersDark.matches; <% } else { %> - const darkModeDefault = <%= darkModeDefault %>; + const darkModeDefault = authorPrefersDark; <% } %> <% if (!darkModeDefault) { %> From 1ae0224b1791f65f021da3225c8d770844025e59 Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Wed, 23 Apr 2025 18:36:12 -0400 Subject: [PATCH 2/4] toggle giscus as soon as it loads i did see the iframe query fail once, but was unable to repro otherwise this seems to be reliable --- src/resources/formats/html/giscus/giscus.ejs | 10 ++++++++++ .../formats/html/templates/quarto-html-before-body.ejs | 2 ++ 2 files changed, 12 insertions(+) diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs index d80da2f2fcb..26412a0f8d1 100644 --- a/src/resources/formats/html/giscus/giscus.ejs +++ b/src/resources/formats/html/giscus/giscus.ejs @@ -13,5 +13,15 @@ <%- giscus.loading ? `data-loading=${giscus.loading}` : '' %> async> + \ No newline at end of file diff --git a/src/resources/formats/html/templates/quarto-html-before-body.ejs b/src/resources/formats/html/templates/quarto-html-before-body.ejs index 20344095c31..35c131c890a 100644 --- a/src/resources/formats/html/templates/quarto-html-before-body.ejs +++ b/src/resources/formats/html/templates/quarto-html-before-body.ejs @@ -188,6 +188,8 @@ toggleGiscusIfUsed(toAlternate, darkModeDefault); }; + window.toggleGiscusIfUsed = toggleGiscusIfUsed; + <% if (respectUserColorScheme) { %> queryPrefersDark.addEventListener("change", e => { if(window.localStorage.getItem("quarto-color-scheme") !== null) From e73d52249b83b3c31f2c77fd20581e681693faf8 Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Wed, 23 Apr 2025 20:02:02 -0400 Subject: [PATCH 3/4] use mutation observer to wait for iframe.giscus-frame because safari will run before giscus.js has created everything --- src/resources/formats/html/giscus/giscus.ejs | 22 ++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs index 26412a0f8d1..28782f6a8cc 100644 --- a/src/resources/formats/html/giscus/giscus.ejs +++ b/src/resources/formats/html/giscus/giscus.ejs @@ -14,14 +14,24 @@ async> \ No newline at end of file From 9ba06e995b7101b2db0ea1064cdde0fcaefb1234 Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Thu, 24 Apr 2025 11:21:36 -0400 Subject: [PATCH 4/4] remove unneeded window globals --- src/resources/formats/html/giscus/giscus.ejs | 2 +- .../html/templates/quarto-html-after-body.ejs | 2 +- .../html/templates/quarto-html-before-body.ejs | 12 +++++------- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs index 28782f6a8cc..901e460ebe6 100644 --- a/src/resources/formats/html/giscus/giscus.ejs +++ b/src/resources/formats/html/giscus/giscus.ejs @@ -22,7 +22,7 @@ if(giscusIframe) { giscusIframe.addEventListener("load", function() { window.setTimeout(() => { - window.toggleGiscusIfUsed(window.hasAlternateSentinel(), authorPrefersDark); + toggleGiscusIfUsed(hasAlternateSentinel(), authorPrefersDark); }, 100); }); giscusIframeObserver.disconnect(); diff --git a/src/resources/formats/html/templates/quarto-html-after-body.ejs b/src/resources/formats/html/templates/quarto-html-after-body.ejs index 51bd7db2d90..761893582e7 100644 --- a/src/resources/formats/html/templates/quarto-html-after-body.ejs +++ b/src/resources/formats/html/templates/quarto-html-after-body.ejs @@ -22,7 +22,7 @@ window.document.body.appendChild(a); } - window.setColorSchemeToggle(window.hasAlternateSentinel()) + setColorSchemeToggle(hasAlternateSentinel()) <% } %> diff --git a/src/resources/formats/html/templates/quarto-html-before-body.ejs b/src/resources/formats/html/templates/quarto-html-before-body.ejs index 35c131c890a..5da2a811429 100644 --- a/src/resources/formats/html/templates/quarto-html-before-body.ejs +++ b/src/resources/formats/html/templates/quarto-html-before-body.ejs @@ -21,7 +21,7 @@ } } - window.setColorSchemeToggle = (alternate) => { + const setColorSchemeToggle = (alternate) => { const toggles = window.document.querySelectorAll('.quarto-color-scheme-toggle'); for (let i=0; i < toggles.length; i++) { const toggle = toggles[i]; @@ -56,7 +56,7 @@ manageTransitions('#quarto-margin-sidebar .nav-link', true); // Switch the toggles - window.setColorSchemeToggle(alternate) + setColorSchemeToggle(alternate) // Hack to workaround the fact that safari doesn't // properly recolor the scrollbar when toggling (#1455) @@ -103,7 +103,7 @@ return window.location.protocol === 'file:'; } - window.hasAlternateSentinel = () => { + const hasAlternateSentinel = () => { let styleSentinel = getColorSchemeSentinel(); if (styleSentinel !== null) { return styleSentinel === "alternate"; @@ -182,14 +182,12 @@ // Dark / light mode switch window.quartoToggleColorScheme = () => { // Read the current dark / light value - let toAlternate = !window.hasAlternateSentinel(); + let toAlternate = !hasAlternateSentinel(); toggleColorMode(toAlternate); setStyleSentinel(toAlternate); toggleGiscusIfUsed(toAlternate, darkModeDefault); }; - window.toggleGiscusIfUsed = toggleGiscusIfUsed; - <% if (respectUserColorScheme) { %> queryPrefersDark.addEventListener("change", e => { if(window.localStorage.getItem("quarto-color-scheme") !== null) @@ -202,7 +200,7 @@ <% } %> // Switch to dark mode if need be - if (window.hasAlternateSentinel()) { + if (hasAlternateSentinel()) { toggleColorMode(true); } else { toggleColorMode(false);