florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make Giscus light and dark themes configurable via _config.yml (#3270)

Browse Source 
Currently, the `site.giscus.theme` option is ignored because
`giscus.liquid` always computes the theme as light/dark based on the
current site theme. This PR allows users to configure separate light and
dark giscus themes in `_config.yml`, which will support dynamic updates
when switching between light, dark, or system themes.

Fixes #3269
This commit is contained in:
Sundar Gurumurthy 2025-08-25 22:17:14 +01:00 committed by GitHub
parent 109d394470
commit cf8e02f98b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 60 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_config.yml
View File

@ -110,7 +110,8 @@ giscus:
strict: 1 # use strict identification mode
reactions_enabled: 1 # enable (1) or disable (0) emoji reactions
input_position: bottom # whether to display input form below (bottom) or above (top) the comments
theme: preferred_color_scheme # name of the color scheme (preferred works well with al-folio light/dark mode)
dark_theme: dark # name of the dark color scheme (preferred works well with al-folio dark mode)
light_theme: light # name of the light color scheme (preferred works well with al-folio light mode)
emit_metadata: 0
lang: en

36
_includes/giscus.liquid
View File

@ -9,33 +9,17 @@
{% endif %}
{% if site.giscus.repo %}
<script>
let giscusTheme = determineComputedTheme();
let giscusAttributes = {
src: 'https://giscus.app/client.js',
'data-repo': '{{ site.giscus.repo }}',
'data-repo-id': '{{ site.giscus.repo_id }}',
'data-category': '{{ site.giscus.category }}',
'data-category-id': '{{ site.giscus.category_id }}',
'data-mapping': '{{ site.giscus.mapping }}',
'data-strict': '{{ site.giscus.strict }}',
'data-reactions-enabled': '{{ site.giscus.reactions_enabled }}',
'data-emit-metadata': '{{ site.giscus.emit_metadata }}',
'data-input-position': '{{ site.giscus.input_position }}',
'data-theme': giscusTheme,
'data-lang': '{{ site.giscus.lang }}',
crossorigin: 'anonymous',
async: '',
};
let giscusScript = document.createElement('script');
Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
document.getElementById('giscus_thread').appendChild(giscusScript);
</script>
<noscript>Please enable JavaScript to view the <a href="http://giscus.app/?ref_noscript">comments powered by giscus.</a></noscript>
<script defer src="{{ '/assets/js/giscus-setup.js' | relative_url }}"></script>
<noscript>
Please enable JavaScript to view the
<a href="http://giscus.app/?ref_noscript">comments powered by giscus.</a>
</noscript>
{% else %}
{% capture giscus_warning %} > ##### giscus comments misconfigured > Please follow instructions at
[http://giscus.app](http://giscus.app) and update your giscus configuration. {: .block-danger } {% endcapture %}
{% capture giscus_warning %}
> ##### giscus comments misconfigured
> Please follow instructions at [http://giscus.app](http://giscus.app) and update your giscus configuration.
{: .block-danger }
{% endcapture %}
{{ giscus_warning | markdownify }}
{% endif %}
</div>

48
_scripts/giscus-setup.js Normal file
View File

@ -0,0 +1,48 @@
---
permalink: /assets/js/giscus-setup.js
---
function determineGiscusTheme() {
{% if site.enable_darkmode %}
let theme =
localStorage.getItem("theme") ||
document.documentElement.getAttribute("data-theme") ||
"system";
if (theme === "dark") return "{{ site.giscus.dark_theme }}";
if (theme === "light") return "{{ site.giscus.light_theme }}";
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
return prefersDark ? "{{ site.giscus.dark_theme }}" : "{{ site.giscus.light_theme }}";
{% else %}
return "{{ site.giscus.light_theme }}";
{% endif %}
}
(function setupGiscus() {
let giscusTheme = determineGiscusTheme();
let giscusAttributes = {
src: "https://giscus.app/client.js",
"data-repo": "{{ site.giscus.repo }}",
"data-repo-id": "{{ site.giscus.repo_id }}",
"data-category": "{{ site.giscus.category }}",
"data-category-id": "{{ site.giscus.category_id }}",
"data-mapping": "{{ site.giscus.mapping }}",
"data-strict": "{{ site.giscus.strict }}",
"data-reactions-enabled": "{{ site.giscus.reactions_enabled }}",
"data-emit-metadata": "{{ site.giscus.emit_metadata }}",
"data-input-position": "{{ site.giscus.input_position }}",
"data-theme": giscusTheme,
"data-lang": "{{ site.giscus.lang }}",
crossorigin: "anonymous",
async: true,
};
let giscusScript = document.createElement("script");
Object.entries(giscusAttributes).forEach(([key, value]) =>
giscusScript.setAttribute(key, value)
);
document.getElementById("giscus_thread").appendChild(giscusScript);
})();