@@ -9,4 +9,57 @@ aside.sidebar-drawer {
99/* Left-align tables */
1010article table . align-default {
1111 margin-left : 0 ;
12- }
12+ }
13+
14+ /* Handle logo switching for light/dark themes */
15+ /* Put in code like:
16+ <a class="logo-light" href="https://github.com/nbprint/nbprint#gh-light-mode-only">
17+ <img src="https://github.com/nbprint/nbprint/raw/main/docs/img/logo-light.png?raw=true#gh-light-mode-only" alt="nbprint" width="400"></a>
18+ </a>
19+ <a class="logo-dark" href="https://github.com/nbprint/nbprint#gh-dark-mode-only">
20+ <img src="https://github.com/nbprint/nbprint/raw/main/docs/img/logo-dark.png?raw=true#gh-dark-mode-only" alt="nbprint" width="400"></a>
21+ </a>
22+ */
23+ body [data-theme = "light" ] . logo-light {
24+ display : inline;
25+ }
26+ body [data-theme = "light" ] . logo-dark {
27+ display : none;
28+ }
29+ body [data-theme = "dark" ] . logo-light {
30+ display : none;
31+ }
32+ body [data-theme = "dark" ] . logo-dark {
33+ display : inline;
34+ }
35+
36+ @media ( prefers-color-scheme : dark) {
37+ . logo-light {
38+ display : none;
39+ }
40+ }
41+
42+ @media ( prefers-color-scheme : light) {
43+ . logo-dark {
44+ display : none;
45+ }
46+ }
47+
48+
49+ /* Handle mermaid diagrams in dark mode */
50+ body [data-theme = "light" ] div . mermaid-container {
51+ background-color : unset;
52+ }
53+ body [data-theme = "dark" ] div . mermaid-container {
54+ background-color : whitesmoke;
55+ }
56+ @media ( prefers-color-scheme : dark) {
57+ div . mermaid-container {
58+ background-color : whitesmoke;
59+ }
60+ }
61+ @media ( prefers-color-scheme : light) {
62+ div . mermaid-container {
63+ background-color : unset;
64+ }
65+ }
0 commit comments