|
| 1 | +/* Dark mode support: |
| 2 | + * if <html> (e.g. Furo theme) or <body> (e.g. PyData theme) has `data-theme` set, respect it. |
| 3 | + * else default to the system color scheme |
| 4 | + */ |
| 5 | +@media (prefers-color-scheme: dark) { |
| 6 | + :root { |
| 7 | + --light: ; |
| 8 | + --dark: initial; |
| 9 | + } |
| 10 | +} |
| 11 | + |
| 12 | +@media (prefers-color-scheme: light) { |
| 13 | + :root { |
| 14 | + --dark: ; |
| 15 | + --light: initial; |
| 16 | + } |
| 17 | +} |
| 18 | + |
| 19 | +:is(html, body)[data-theme="dark"] { |
| 20 | + --light: ; |
| 21 | + --dark: initial; |
| 22 | +} |
| 23 | + |
| 24 | +:is(html, body)[data-theme="light"] { |
| 25 | + --dark: ; |
| 26 | + --light: initial; |
| 27 | +} |
| 28 | + |
1 | 29 | /* Variables */ |
2 | 30 | :root { |
3 | 31 | /* |
|
21 | 49 | --mystnb-danger-palette-900: #680010; |
22 | 50 |
|
23 | 51 | /* MyST-NB specific variables; colors should be logically picked from palettes */ |
24 | | - --mystnb-source-bg-color: var(--mystnb-neutral-palette-100); |
25 | | - --mystnb-stdout-bg-color: var(--mystnb-neutral-palette-50); |
26 | | - --mystnb-stderr-bg-color: var(--mystnb-danger-palette-50); |
27 | | - --mystnb-traceback-bg-color: var(--mystnb-neutral-palette-50); |
28 | | - --mystnb-source-border-color: var(--mystnb-neutral-palette-400); |
| 52 | + --mystnb-source-bg-color: var(--light, var(--mystnb-neutral-palette-100)) var(--dark, var(--mystnb-neutral-palette-800)); |
| 53 | + --mystnb-stdout-bg-color: var(--light, var(--mystnb-neutral-palette-50)) var(--dark, var(--mystnb-neutral-palette-900)); |
| 54 | + --mystnb-stderr-bg-color: var(--light, var(--mystnb-danger-palette-50)) var(--dark, var(--mystnb-danger-palette-900)); |
| 55 | + --mystnb-traceback-bg-color: var(--light, var(--mystnb-neutral-palette-50)) var(--dark, var(--mystnb-neutral-palette-900)); |
| 56 | + --mystnb-source-border-color: var(--light, var(--mystnb-neutral-palette-400)) var(--dark, var(--mystnb-neutral-palette-500)); |
29 | 57 | --mystnb-source-margin-color: green; |
30 | | - --mystnb-stdout-border-color: var(--mystnb-neutral-palette-100); |
31 | | - --mystnb-stderr-border-color: var(--mystnb-neutral-palette-100); |
32 | | - --mystnb-traceback-border-color: var(--mystnb-danger-palette-100); |
| 58 | + --mystnb-stdout-border-color: var(--light, var(--mystnb-neutral-palette-100)) var(--dark, var(--mystnb-neutral-palette-800)); |
| 59 | + --mystnb-stderr-border-color: var(--light, var(--mystnb-neutral-palette-100)) var(--dark, var(--mystnb-neutral-palette-800)); |
| 60 | + --mystnb-traceback-border-color: var(--light, var(--mystnb-danger-palette-100)) var(--dark, var(--mystnb-danger-palette-800)); |
33 | 61 | --mystnb-hide-prompt-opacity: 70%; |
34 | 62 | --mystnb-source-border-radius: .4em; |
35 | 63 | --mystnb-source-border-width: 1px; |
36 | 64 | --mystnb-scrollbar-width: 0.3rem; |
37 | 65 | --mystnb-scrollbar-height: 0.3rem; |
38 | | - --mystnb-scrollbar-thumb-color: var(--mystnb-neutral-palette-400); |
39 | | - --mystnb-scrollbar-thumb-hover-color: var(--mystnb-neutral-palette-500); |
| 66 | + --mystnb-scrollbar-thumb-color: var(--light, var(--mystnb-neutral-palette-400)) var(--dark, var(--mystnb-neutral-palette-500)); |
| 67 | + --mystnb-scrollbar-thumb-hover-color: var(--light, var(--mystnb-neutral-palette-500)) var(--dark, var(--mystnb-neutral-palette-400)); |
40 | 68 | --mystnb-scrollbar-thumb-border-radius: 0.25rem; |
41 | 69 | } |
42 | 70 |
|
43 | | -/* Override colors in dark theme */ |
44 | | -html[data-theme="dark"] { |
45 | | - --mystnb-source-bg-color: var(--mystnb-neutral-palette-800); |
46 | | - --mystnb-stdout-bg-color: var(--mystnb-neutral-palette-900); |
47 | | - --mystnb-stderr-bg-color: var(--mystnb-danger-palette-900); |
48 | | - --mystnb-traceback-bg-color: var(--mystnb-neutral-palette-900); |
49 | | - --mystnb-source-border-color: var(--mystnb-neutral-palette-500); |
50 | | - --mystnb-stdout-border-color: var(--mystnb-neutral-palette-800); |
51 | | - --mystnb-stderr-border-color: var(--mystnb-neutral-palette-800); |
52 | | - --mystnb-traceback-border-color: var(--mystnb-danger-palette-800); |
53 | | - --mystnb-scrollbar-thumb-color: var(--mystnb-neutral-palette-500); |
54 | | - --mystnb-scrollbar-thumb-hover-color: var(--mystnb-neutral-palette-400); |
55 | | -} |
56 | | - |
57 | 71 |
|
58 | 72 | /* Whole cell */ |
59 | 73 | div.container.cell { |
@@ -217,45 +231,6 @@ div.cell details.admonition summary::before { |
217 | 231 | text-align: left !important; |
218 | 232 | } |
219 | 233 |
|
220 | | -/* Pandas tables. Pulled from the Jupyter / nbsphinx CSS */ |
221 | | -div.cell_output table { |
222 | | - border: none; |
223 | | - border-collapse: collapse; |
224 | | - border-spacing: 0; |
225 | | - color: black; |
226 | | - font-size: 1em; |
227 | | - table-layout: fixed; |
228 | | -} |
229 | | - |
230 | | -div.cell_output thead { |
231 | | - border-bottom: 1px solid black; |
232 | | - vertical-align: bottom; |
233 | | -} |
234 | | - |
235 | | -div.cell_output tr, |
236 | | -div.cell_output th, |
237 | | -div.cell_output td { |
238 | | - text-align: right; |
239 | | - vertical-align: middle; |
240 | | - padding: 0.5em 0.5em; |
241 | | - line-height: normal; |
242 | | - white-space: normal; |
243 | | - max-width: none; |
244 | | - border: none; |
245 | | -} |
246 | | - |
247 | | -div.cell_output th { |
248 | | - font-weight: bold; |
249 | | -} |
250 | | - |
251 | | -div.cell_output tbody tr:nth-child(odd) { |
252 | | - background: #f5f5f5; |
253 | | -} |
254 | | - |
255 | | -div.cell_output tbody tr:hover { |
256 | | - background: rgba(66, 165, 245, 0.2); |
257 | | -} |
258 | | - |
259 | 234 | /** source code line numbers **/ |
260 | 235 | span.linenos { |
261 | 236 | opacity: 0.5; |
|
0 commit comments