name: Giscus theme mismatch (iframe border missing)
about: Report when Giscus iframe UI (borders/separators) disappear under mismatched browser/site themes
title: "Giscus theme mismatch: iframe border disappears when browser dark mode but site uses light theme"
labels: bug, giscus, theme, ui

assignees: ''

Summary
When the browser (or OS) is set to dark mode but the site's page theme is set to light, the Giscus comment widget (for example, using the "For" theme) sometimes loses visible UI separators and the iframe's internal borders, causing the comments area to appear visually broken. This is often observed when the site removes the iframe's default border in CSS (e.g. .giscus iframe { border: none; }).

Repository / Context

• Repository: jlu005807/jlu005807.github.io
• Page: message.html
• Styles: assets/css/message-comments.css
• Loader script: assets/js/comment-loader.js
• Theme variables: assets/css/theme-integrated.css

Steps to reproduce

1. Open the site message.html on a browser where the OS or browser theme is set to dark (or use a browser's experimental "force dark mode").
2. Ensure the site page theme is set to light (e.g., site-level toggle set to light or localStorage theme set to 'light').
3. Load the page and wait for the Giscus widget to inject (it uses data-theme based on the site's saved theme or system preference).
4. Observe the comments area: UI separators or borders inside the Giscus iframe may be missing or invisible.

Expected behavior

• Giscus UI should reflect the site's selected theme (page-level theme) or at least be visually consistent with the surrounding container so borders/separators are visible.

Actual behavior

• Giscus may render with a different theme (e.g. dark) based on browser/system preference. If the iframe internal UI uses transparent or background-matching colors for separators, they will not be visible, and because the host CSS often removes the iframe's default border, no visible outline remains.

Relevant code snippets

• theme selection and injection in message.html:

(function() {
  const savedTheme = localStorage.getItem('theme');
  const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const currentTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');

  const giscusScript = document.createElement('script');
  giscusScript.src = "https://giscus.app/client.js";
  giscusScript.setAttribute('data-repo', 'jlu005807/jlu005807.github.io');
  giscusScript.setAttribute('data-category', 'Announcements');
  giscusScript.setAttribute('data-mapping', 'pathname');
  giscusScript.setAttribute('data-input-position', 'top');
  giscusScript.setAttribute('data-theme', currentTheme === 'dark' ? 'dark' : 'fro'); // <-- mapping to verify
  giscusScript.async = true;
  document.body.appendChild(giscusScript);
})();

• message-comments.css snippet:

.giscus iframe {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  border: none;
}

Investigation notes / hypotheses

• Giscus theme is selected at injection time via data-theme. If the site falls back to system preference, Giscus may be injected as dark even when the page later switches to light.
• Browser-level forced dark mode or Giscus internal theme may cause the iframe's styling to differ from the page, making separators invisible.
• Host CSS removing iframe border (border: none) removes an external fallback when iframe internal separators are invisible.

Suggested mitigations

1. Ensure data-theme uses an explicit mapping from page theme to a known Giscus theme name (e.g., 'light' or 'github-light' for page light; 'dark' or 'transparent_dark' for page dark). Avoid unknown theme names like 'fro' unless validated.
2. On page theme switch, call postMessage to update Giscus config without reloading the iframe:

giscusFrame.contentWindow.postMessage({
  giscus: { setConfig: { theme: 'dark' } }
}, 'https://giscus.app');

3. Provide an external container fallback border in host CSS so the comments area remains visible even if iframe separators are invisible.
4. Verify browser experimental "force dark" is not altering iframe colors during tests.

Attachments

• Please include screenshots, browser/OS versions, and any console logs that might help reproduce.

Labels

• Suggested: bug, giscus, theme, ui

At the same time, I found that when selecting the Fro theme preview at https://giscus.app/zh-CN, the content in the selection box cannot be displayed, as follows:

Thank you! If more info is needed, please tell me which browser/version and whether any browser flags (e.g., force dark) were enabled.