Dynamic theme changing available?

[marcosruiz]

Hello, is dynamic theme changing available? Because, I want this to change the theme automatically, according to the website.

[laymonage]

Yes, you can send a message event from the parent page to giscus as described in the advanced usage guide

[jerryc127]

  function changeGiscusTheme () {
    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ?  'dark' : 'light'

    function sendMessage(message) {
      const iframe = document.querySelector('iframe.giscus-frame');
      if (!iframe) return;
      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
    }

    sendMessage({
      setConfig: {
        theme: theme
      }
    });
  }

call the changeGiscusTheme

[edfloreshz]

I tried this and it works, however, it is only possible to set the theme at runtime, is there a way to set data-theme conditionally when inserting the script using a localStorage variable?

[laymonage]

@edfloreshz

Well I suppose instead of adding the provided <script> to your website, you can do something like:

<script>
  let giscusTheme = localStorage.getItem("giscus-theme");
  let giscusAttributes = {
    "src": "https://giscus.app/client.js",
    "data-repo": "[ENTER REPO HERE]",
    "data-repo-id": "[ENTER REPO ID HERE]",
    "data-category": "[ENTER CATEGORY NAME HERE]",
    "data-category-id": "[ENTER CATEGORY ID HERE]",
    "data-mapping": "pathname",
    "data-reactions-enabled": "1",
    "data-emit-metadata": "0",
    "data-theme": giscusTheme,
    "data-lang": "en",
    "crossorigin": "anonymous",
    "async": "",
  };
  
  let giscusScript = document.createElement("script");
  Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
  document.body.appendChild(giscusScript);
</script>

[edfloreshz]

Nice, it's working now!
Thanks for the help @laymonage

[marcosruiz]

  function changeGiscusTheme () {
    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ?  'dark' : 'light'

    function sendMessage(message) {
      const iframe = document.querySelector('iframe.giscus-frame');
      if (!iframe) return;
      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
    }

    sendMessage({
      setConfig: {
        theme: theme
      }
    });
  }

call the changeGiscusTheme

Thank you for your code. I did this at the end:

function changeGiscusTheme () {
  let modeToggle = new ModeToggle();
  const theme = modeToggle.mode === 'dark' ?  'dark' : 'light'
  function sendMessage(message) {
    const iframe = document.querySelector('iframe.giscus-frame');
    if (!iframe) return;
    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
  }
  sendMessage({
    setConfig: {
      theme: theme
    }
  });
}

const modeToggle = document.getElementsByClassName("mode-toggle")[0];

if (typeof modeToggle !== "undefined") {
  modeToggle.addEventListener('click', changeGiscusTheme);
}

You can see my blog here.

[Pathsis]

I tried this and I found that it became completely transparent, but did not automatically change the theme.

[Pathsis]

  function changeGiscusTheme () {
    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ?  'dark' : 'light'

    function sendMessage(message) {
      const iframe = document.querySelector('iframe.giscus-frame');
      if (!iframe) return;
      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
    }

    sendMessage({
      setConfig: {
        theme: theme
      }
    });
  }

call the changeGiscusTheme

Thank you for your code. I did this at the end:

function changeGiscusTheme () {
  let modeToggle = new ModeToggle();
  const theme = modeToggle.mode === 'dark' ?  'dark' : 'light'
  function sendMessage(message) {
    const iframe = document.querySelector('iframe.giscus-frame');
    if (!iframe) return;
    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
  }
  sendMessage({
    setConfig: {
      theme: theme
    }
  });
}

const modeToggle = document.getElementsByClassName("mode-toggle")[0];

if (typeof modeToggle !== "undefined") {
  modeToggle.addEventListener('click', changeGiscusTheme);
}

You can see my blog here.

Hi! Your results are great! What is the complete code? Where should I put it?

[edfloreshz]

Here's an example

[Pathsis]

Here's an example

Thanks for your help! So, what about keeping the default code of giscus in post.html?

[EllaKaye]

Hello. I'm trying to follow the above but can't get it to work. I'm quite a newbie with HTML/JavaScript, so may be missing something that hopefully will be obvious to someone on this thread.

I'm building a website with Quarto. I've set up a minimal example at https://github.com/EllaKaye/quarto-test and deployed it at https://serene-clafoutis-76cc16.netlify.app/ with an example post with giscus enabled. I've got a script included in the header:

  function changeGiscusTheme () {
    let modeToggle = new ModeToggle();
    const theme = modeToggle.mode === 'dark' ?  'dark' : 'light'
    function sendMessage(message) {
      const iframe = document.querySelector('iframe.giscus-frame');
      if (!iframe) return;
      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
    }
    sendMessage({
      setConfig: {
        theme: theme
      }
    });
  }
  
  const modeToggle = document.getElementsByClassName("quarto-color-scheme-toggle")[0];
  
  if (typeof modeToggle !== "undefined") {
    modeToggle.addEventListener('click', changeGiscusTheme);
  }

which is the solution by @marcosruiz above, but swapping getElementsByClassName("mode-toggle") for getElementsByClassName("quarto-color-scheme-toggle"), which, as far as I could tell from inspecting our respective sites, was the approptite difference of class between his toggle button and the one on the Quarto site.

However, it's still not working for me, and that's as far as my HTML/JS knowledge goes on this. Any assistance would be much appreciated.

Thank you!

[laymonage]

Hey @EllaKaye, I don't think you can use that solution as-is because your site's setup doesn't have the ModeToggle definition.

You can try this instead:

function changeGiscusTheme() {
  const theme = document.body.classList.contains('quarto-dark') ? 'dark' : 'light';
  function sendMessage(message) {
    const iframe = document.querySelector('iframe.giscus-frame');
    if (!iframe) return;
    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
  }
  sendMessage({
    setConfig: {
      theme: theme,
    },
  });
}

const toggle = document.querySelector('.quarto-color-scheme-toggle');
if (toggle) {
  toggle.addEventListener('click', changeGiscusTheme);
}

[EllaKaye]

Hi @laymonage Thanks for digging into this and getting back to me so quickly with a proposed solution 😄. I'm afraid, though, that it still isn't working for me. I think (but I'm not sure) that it may be something to do with the order that scripts are getting loaded into the header with Quarto.

At the moment, I have the following in my yaml:

comments:
  giscus: 
    repo: EllaKaye/quarto-test

include-in-header: giscus-mode-toggle.html

When I then view the page source, the script in giscus-mode-toggle.html is loaded quite early, before the script for embedding giscus, which is the last thing in the header. On the blog post, I can see the giscus comments iframe, but toggling doesn't change its colour theme.

I've pushed these changes to the https://github.com/EllaKaye/quarto-test repo and the corresponding https://serene-clafoutis-76cc16.netlify.app/ site.

Thinking that I may need to have the script embedding giscus before the script for toggling theme, I also tried removing the yaml for generating the embedding script and instead used the configuration from https://giscus.app/ and put the script generated there directly in giscus-mode-toggle.html before the mode-toggle script. However, when I did that, the giscus iframe didn't show up at all (maybe something to do with being loaded too early in the header?)

It's just a conjecture. Does it sound plausible? If not, can you think of any other issue that might be preventing the script from working?

Thank you for helping me with this.

[laymonage]

@EllaKaye Does this work?

function changeGiscusTheme() {
  const theme = document.body.classList.contains('quarto-dark') ? 'dark' : 'light';
  function sendMessage(message) {
    const iframe = document.querySelector('iframe.giscus-frame');
    if (!iframe) return;
    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
  }
  sendMessage({
    setConfig: {
      theme: theme,
    },
  });
}

document.addEventListener('DOMContentLoaded', function () {
  const toggle = document.querySelector('.quarto-color-scheme-toggle');
  if (toggle) {
    toggle.addEventListener('click', changeGiscusTheme);
  }
});

[EllaKaye]

Yes! That does the trick 😄 Thank you so much for solving this (and helping me learn more JavaScript along the way!)

[EllaKaye]

Oh, actually, there is one thing that needs tweaking in the function. If I open a post in light mode, the comment section has the light theme, and toggles back and forth between light and dark, as it should.

However, if I open a post in dark mode, the comment section starts off light. If I toggle to light mode, it stays light, then goes dark when I toggle back to dark mode, and toggles correctly from there on in.

Is there a way to tweak the function so that the comment box always starts in the right mode?

Thanks!

[laymonage]

You can follow the code described in #336 (comment). It hasn't been updated to add some new options though (e.g. data-strict).

You can put it as part of the previous script, e.g.

function getGiscusTheme() {
  const quartoTheme = localStorage.getItem("quarto-color-scheme");
  const giscusTheme = quartoTheme === "alternate" ? "dark" : "light";
  return giscusTheme;
}

function setGiscusTheme() {
  function sendMessage(message) {
    const iframe = document.querySelector('iframe.giscus-frame');
    if (!iframe) return;
    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
  }
  sendMessage({
    setConfig: {
      theme: getGiscusTheme(),
    },
  });
}

document.addEventListener('DOMContentLoaded', function () {
  const giscusAttributes = {
    "src": "https://giscus.app/client.js",
    "data-repo": "[ENTER REPO HERE]",
    "data-repo-id": "[ENTER REPO ID HERE]",
    "data-category": "[ENTER CATEGORY NAME HERE]",
    "data-category-id": "[ENTER CATEGORY ID HERE]",
    "data-mapping": "pathname",
    "data-strict": "0",
    "data-reactions-enabled": "1",
    "data-emit-metadata": "0",
    "data-input-position": "top",
    "data-theme": getGiscusTheme(),
    "data-lang": "en",
    "crossorigin": "anonymous",
    "async": "",
  };

  // Dynamically create script tag
  const giscusScript = document.createElement("script");
  Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
  document.body.appendChild(giscusScript);

  // Update giscus theme when theme switcher is clicked
  const toggle = document.querySelector('.quarto-color-scheme-toggle');
  if (toggle) {
    toggle.addEventListener('click', setGiscusTheme);
  }
});

Note that since the script tag is created dynamically and appended to the end of the <body> element, you might need to put an empty <div class="giscus"> in the place where you want the comments to be so that the script knows where to put it.

[EllaKaye]

@laymonage you are truly an open source hero for the quality of your software as well as the helpfulness and speed of your responses to issues/questions 😄 When my website goes live and I blog about implementing this feature, I will give you a big shout out and lots of credit.

Your above solution works perfectly for my test repo/site as it was when I posted my original question.

There was a little bit more figuring out for me to do in the more complex situation, as per my full website, where Quarto generates an appendix for each post, in order to ensure that the comments box appeared after the appendix. I have updated my test repo and deployed site to include this.

For any Quarto users stumbling across this thread later, this is the full solution:

• do not include the Quarto yaml for using giscus comments
• copy the full code chunk in @laymonage's previous comment and place it between <script></script> tags, saved as giscus-mode-toggle.html
• create div-giscus.html which simply contains <div class="giscus">
• include the following in _metadata.yml in the posts folder:

include-in-header: giscus-mode-toggle.html
include-after-body: div-giscus.html

If you want the comments to come below the blog post but above the appendix, remove the include-after-body line above and instead place the raw html <div class="giscus"> as the last line of the index.qmd file for the post.

I think that's it now! Thank you again so much for all your help with this.

[laymonage]

Glad to have helped, and thanks for writing down your solution! I'll try to make a compilation of guides/solutions based on people's different website setups.

[dragoncoder047]

I found a solution using media queries so the user can just set their browser's light/dark mode preference in one spot instead of a toggle on every website:

(function() {
    var dmmq = window.matchMedia('(prefers-color-scheme: dark)');
    var giscusFrame;
    function updateGiscus() {
        if (!giscusFrame) giscusFrame = document.querySelector('iframe.giscus-frame');
        if (dmmq.matches) {
            // Dark theme
            giscusFrame.contentWindow.postMessage({ giscus: { setConfig: { theme: 'dark' } } }, 'https://giscus.app');
        } else {
            // Light theme
            giscusFrame.contentWindow.postMessage({ giscus: { setConfig: { theme: 'light' } } }, 'https://giscus.app');
        }
    }
    setTimeout(updateGiscus, 1000); // leave time for giscus to load
    dmmq.addEventListener('change', updateGiscus);
})();

[khoirulaksara]

You can follow the code described in #336 (comment). It hasn't been updated to add some new options though (e.g. data-strict).

You can put it as part of the previous script, e.g.

function getGiscusTheme() {
  const quartoTheme = localStorage.getItem("quarto-color-scheme");
  const giscusTheme = quartoTheme === "alternate" ? "dark" : "light";
  return giscusTheme;
}

function setGiscusTheme() {
  function sendMessage(message) {
    const iframe = document.querySelector('iframe.giscus-frame');
    if (!iframe) return;
    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
  }
  sendMessage({
    setConfig: {
      theme: getGiscusTheme(),
    },
  });
}

document.addEventListener('DOMContentLoaded', function () {
  const giscusAttributes = {
    "src": "https://giscus.app/client.js",
    "data-repo": "[ENTER REPO HERE]",
    "data-repo-id": "[ENTER REPO ID HERE]",
    "data-category": "[ENTER CATEGORY NAME HERE]",
    "data-category-id": "[ENTER CATEGORY ID HERE]",
    "data-mapping": "pathname",
    "data-strict": "0",
    "data-reactions-enabled": "1",
    "data-emit-metadata": "0",
    "data-input-position": "top",
    "data-theme": getGiscusTheme(),
    "data-lang": "en",
    "crossorigin": "anonymous",
    "async": "",
  };

  // Dynamically create script tag
  const giscusScript = document.createElement("script");
  Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
  document.body.appendChild(giscusScript);

  // Update giscus theme when theme switcher is clicked
  const toggle = document.querySelector('.quarto-color-scheme-toggle');
  if (toggle) {
    toggle.addEventListener('click', setGiscusTheme);
  }
});

Note that since the script tag is created dynamically and appended to the end of the <body> element, you might need to put an empty <div class="giscus"> in the place where you want the comments to be so that the script knows where to put it.

work for me. thanks 😄 here

[brycewray]

Thanks to all who contributed to this thread! 👍 I used it (along with some excellent advice I received elsewhere) to come up with the following for using giscus on my Hugo-based site’s repo:

https://github.com/brycewray/hugo-site/blob/main/layouts/partials/comments-giscus.html

(Related post: https://www.brycewray.com/posts/2023/08/making-giscus-less-gabby/)

[jerrylususu]

I found a solution using media queries so the user can just set their browser's light/dark mode preference in one spot instead of a toggle on every website:

(function() {
    var dmmq = window.matchMedia('(prefers-color-scheme: dark)');
    var giscusFrame;
    function updateGiscus() {
        if (!giscusFrame) giscusFrame = document.querySelector('iframe.giscus-frame');
        if (dmmq.matches) {
            // Dark theme
            giscusFrame.contentWindow.postMessage({ giscus: { setConfig: { theme: 'dark' } } }, 'https://giscus.app');
        } else {
            // Light theme
            giscusFrame.contentWindow.postMessage({ giscus: { setConfig: { theme: 'light' } } }, 'https://giscus.app');
        }
    }
    setTimeout(updateGiscus, 1000); // leave time for giscus to load
    dmmq.addEventListener('change', updateGiscus);
})();

I know that the issue has been closed, but when I am reading the doc I realized that I can use the giscus-to-parent event to update the color scheme for giscus after it has loaded, so no need for setTimeout. (doc link). Here is a possible implementation.

const globalColorMode = 'light'; // or you get it from some function/global state

// https://github.com/giscus/giscus/issues/336#issuecomment-1007922777
function changeGiscusTheme(theme) {
    function sendMessage(message) {
      const iframe = document.querySelector('iframe.giscus-frame');
      if (!iframe) return;
      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
    }
    sendMessage({
      setConfig: {
        theme: theme
      }
    });
}

// set giscus theme after giscus has been loaded
function handleGiscusMessage(event) {
    if (event.origin !== 'https://giscus.app') return;
    if (!(typeof event.data === 'object' && event.data.giscus)) return;

    // const giscusData = event.data.giscus;
    changeGiscusTheme(globalColorMode);
    window.removeEventListener('message', handleMessage);
}

window.addEventListener('message', handleGiscusMessage);

[iammukeshm]

I am using #nextjs with tailwindcss. I just had to do this to get the dark mode toggle support working.

import Giscus from "@giscus/react";
import { useTheme } from "next-themes";

interface CommentProps{
    term: string
}

export default function Comments({ term }: CommentProps) {
  const { theme, setTheme, resolvedTheme } = useTheme()
  return (
    <><div className="font-medium text-md sm:text-lg md:text-lg lg:text-lg py-4 text-center lg:text-left">
      Comments
    </div><Giscus
        id="comments"
        repo="{repo}"
        repoId="{repo_id}"
        category="Comments"
        categoryId="{category_id}"
        mapping="specific"
        term={term}
        reactionsEnabled="0"
        emitMetadata="0"
        inputPosition="top"
        theme={theme}
        lang="en"
        loading="lazy" /></>
  );
}

[ciro-mota]

I'm newbie to web development, @marcosruiz could you share your complete code? I used the methods already shown here and I couldn't make it work on my blog.

Edit:

For me works with the PR code:

https://github.com/lxndrblz/anatole/pull/448/files

Thank you.

[ventz]

Wanted to post a complete working example for others that stumble here and cannot get the above to work due to some of the changes, or theme mods -- this is for Hugo + Papermod:

A few key things to pay attention to:

• pref-theme -- is dependent and could be different (as shown above). Look at the browser session variables after you toggle the theme
  

• comments in the <div class="comments"> is an artificial mount point to insert your comments. I ankored it into the partials comments.html to make it easier/faster. You could replace this with any other structure/existing point to insert the comments somewhere else within your page. If you modify it, make sure you update: document.querySelector(".comments").appendChild(giscusScript);

• theme-toggle could be different based on your theme. Use your browser inspector tools to see what yours is called. Most are "theme-toggle" however. If you do update it, make sure you update: const themeSwitcher = document.querySelector("#theme-toggle");

layouts/partials/comments.html

{{- /* Comments area start */ -}}
{{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}}
<div class="comments">
<script>
    const getStoredTheme = () => localStorage.getItem("pref-theme") === "dark" ? "dark" : "light";

    const setGiscusTheme = () => {
        const sendMessage = (message) => {
            const iframe = document.querySelector('iframe.giscus-frame');
            if (iframe) {
                iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
            }
        }
        sendMessage({ setConfig: { theme: getStoredTheme() } })
    }

    document.addEventListener("DOMContentLoaded", () => {
        const giscusAttributes = {
            "src": "https://giscus.app/client.js",
            "data-repo": "{{ .Site.Params.giscus.repo }}",
            "data-repo-id": "{{ .Site.Params.giscus.repoID }}",
            "data-category": "{{ .Site.Params.giscus.category }}",
            "data-category-id": "{{ .Site.Params.giscus.categoryID }}",
            "data-mapping": "{{ .Site.Params.giscus.mapping | default "pathname" }}",
            "data-strict": "{{ .Site.Params.giscus.strict | default "0" }}",
            "data-reactions-enabled": "{{ .Site.Params.giscus.reactionsEnabled | default "1" }}",
            "data-emit-metadata": "{{ .Site.Params.giscus.emitMetadata | default "0" }}",
            "data-input-position": "{{ .Site.Params.giscus.inputPosition | default "bottom" }}",
            "data-theme": getStoredTheme(),
            "data-lang": "{{ .Site.Params.giscus.lang | default "en" }}",
            "data-loading": "{{ .Site.Params.giscus.loading | default "lazy" }}",
            "crossorigin": "anonymous",
            "async": "",
        };

        // Dynamically create script tag.
        const giscusScript = document.createElement("script");
        Object.entries(giscusAttributes).forEach(
            ([key, value]) => giscusScript.setAttribute(key, value));
        console.log(giscusScript)
        document.querySelector(".comments").appendChild(giscusScript);

        // Update giscus theme when the theme switcher is clicked.
        const themeSwitcher = document.querySelector("#theme-toggle");
        if (themeSwitcher) {
            themeSwitcher.addEventListener("click", setGiscusTheme);
        }
    });
</script>
</div>
{{- /* Comments area end */ -}}

With this config in the hugo.yaml:

giscus:
    repo: "$user/$repo"
    repoID: "$someID"
    category: "General"
    categoryID: "$categoryID"
    mapping: "url"
    inputPosition: "top"

[Dagwbl]

  function changeGiscusTheme () {
    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ?  'dark' : 'light'

    function sendMessage(message) {
      const iframe = document.querySelector('iframe.giscus-frame');
      if (!iframe) return;
      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
    }

    sendMessage({
      setConfig: {
        theme: theme
      }
    });
  }

call the changeGiscusTheme

Thank you for your code. I did this at the end:

function changeGiscusTheme () {
  let modeToggle = new ModeToggle();
  const theme = modeToggle.mode === 'dark' ?  'dark' : 'light'
  function sendMessage(message) {
    const iframe = document.querySelector('iframe.giscus-frame');
    if (!iframe) return;
    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
  }
  sendMessage({
    setConfig: {
      theme: theme
    }
  });
}

const modeToggle = document.getElementsByClassName("mode-toggle")[0];

if (typeof modeToggle !== "undefined") {
  modeToggle.addEventListener('click', changeGiscusTheme);
}

You can see my blog here.

Hi! Your results are great! What is the complete code? Where should I put it?

It's great. But it still has a problem. This way does not work while refreshing the page. the theme will reset to light mode.

[MikeCZ23]

can i this in vitepress? how? where? my repo