/* Fix sphinx-gallery output visibility in pydata_sphinx_theme dark mode. pydata_sphinx_theme sets data-bs-theme="dark" on while sphinx-gallery only defines its dark CSS variables for html/body[data-theme=dark]. */ html[data-bs-theme=dark] { --sg-script-out: rgb(179, 179, 179); --sg-script-pre: #2e2e22; --sg-pytb-foreground: #fff; --sg-pytb-background: #1b1717; --sg-pytb-border-color: #622; --sg-download-a-background-color: #443; --sg-download-a-background-image: linear-gradient(to bottom, #443, #221); --sg-download-a-border-color: 1px solid #3a3a0d; --sg-download-a-color: #fff; --sg-download-a-hover-background-color: #616135; --sg-download-a-hover-box-shadow-1: rgba(0, 0, 0, 0.1); --sg-download-a-hover-box-shadow-2: rgba(255, 255, 255, 0.25); } .graph-box pre { background-color: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; padding: 15px; text-align: center; font-family: "Courier New", Courier, monospace; } /* Mermaid node text colour: force dark text on light-theme node fills. The dark-mode overrides below are more specific and will still win. */ .mermaid text { fill: #333 !important; } /* Mermaid dark-mode node colours. These classes are defined via classDef in each diagram and need to be overridden here rather than via inline styles so that theme switching works. pydata_sphinx_theme signals dark mode via data-bs-theme="dark" on . Colour rationale (dark-theme counterparts of the light-theme classDef colours): constNode – deep rose fill / light pink stroke (light: #f9f pink) opNode – deep navy fill / light blue stroke (light: #bbf blue) ioNode – deep forest fill / light green stroke (light: #dfd green) */ html[data-bs-theme=dark] .mermaid .constNode rect, html[data-bs-theme=dark] .mermaid .constNode polygon { fill: #5c2040 !important; stroke: #cc88aa !important; } html[data-bs-theme=dark] .mermaid .opNode rect, html[data-bs-theme=dark] .mermaid .opNode polygon { fill: #1e2a5e !important; stroke: #8898dd !important; } html[data-bs-theme=dark] .mermaid .ioNode rect, html[data-bs-theme=dark] .mermaid .ioNode polygon { fill: #1a4a1a !important; stroke: #88cc88 !important; } html[data-bs-theme=dark] .mermaid .node .label, html[data-bs-theme=dark] .mermaid .nodeLabel { color: #ddd !important; } html[data-bs-theme=dark] .mermaid text { fill: #ddd !important; }