From 343c934b8cd1abaf398a4dac6d344687538bb65b Mon Sep 17 00:00:00 2001
From: sheepmax <guichardmax@gmail.com>
Date: Wed, 19 Jul 2023 13:17:39 +0200
Subject: [PATCH] Added dark theme for thebe
---
book/thebe_lite/code.css | 60 +++++++++++++++++++++++++++++++++++++++-
1 file changed, 59 insertions(+), 1 deletion(-)
diff --git a/book/thebe_lite/code.css b/book/thebe_lite/code.css
index 8b13e44b..c252925f 100644
--- a/book/thebe_lite/code.css
+++ b/book/thebe_lite/code.css
@@ -2,19 +2,43 @@
border: var(--mystnb-source-border-width) var(--mystnb-source-border-color) solid;
border-right-width: 0;
border-left-width: 0;
+ background: var(--pst-color-surface) !important;
+ color: var(--pst-color-text-base) !important;
+}
+
+.CodeMirror-gutters {
+ background: var(--pst-color-surface) !important;
}
.thebe-button, .thebe-launch-button {
margin: 3px 3px 3px 3px;
border: var(--mystnb-source-border-width) var(--mystnb-source-border-color) solid;
border-radius: calc(var(--mystnb-source-border-radius) + 1px);
- background-color: #fefefe
+ background-color: var(--pst-color-surface);
+ color: var(--pst-color-text-base);
}
.thebe-controls {
margin-left: 3px;
}
+.jp-RenderedText {
+ padding-right: var(--jp-code-padding);
+}
+
+.jp-RenderedText pre {
+ color: var(--pst-color-text-base);
+ padding: 5px;
+}
+
+.jp-RenderedText[data-mime-type="application/vnd.jupyter.stderr"] pre {
+ border: calc(var(--mystnb-source-border-width) * 2) var(--jp-rendermime-error-background) solid;
+}
+
+.jp-RenderedText[data-mime-type="application/vnd.jupyter.stderr"] {
+ background: inherit !important;
+}
+
.thebe-button:active {
background-color: #f2f2f2
}
@@ -24,3 +48,37 @@
width: 20px;
height: 20px;
}
+
+/* These rules are used for the dark mode code styling */
+/* Values taken from: https://codemirror.net/5/demo/theme.html#abcdef, with some minor tweaks to comments and gutter */
+html[data-theme=dark] div.CodeMirror-selected { background: #515151; }
+html[data-theme=dark] .CodeMirror-line::selection, .cm-s-abcdef .CodeMirror-line > span::selection, .cm-s-abcdef .CodeMirror-line > span > span::selection { background: rgba(56, 56, 56, 0.99); }
+html[data-theme=dark] .CodeMirror-line::-moz-selection, .cm-s-abcdef .CodeMirror-line > span::-moz-selection, .cm-s-abcdef .CodeMirror-line > span > span::-moz-selection { background: rgba(56, 56, 56, 0.99); }
+html[data-theme=dark] .CodeMirror-guttermarker { color: #222; }
+html[data-theme=dark] .CodeMirror-guttermarker-subtle { color: azure; }
+html[data-theme=dark] .CodeMirror-cursor { border-left: 1px solid #00FF00; }
+html[data-theme=dark] span.cm-keyword { color: darkgoldenrod; font-weight: bold; }
+html[data-theme=dark] span.cm-atom { color: #77F; }
+html[data-theme=dark] span.cm-number { color: violet; }
+html[data-theme=dark] span.cm-def { color: #fffabc; }
+html[data-theme=dark] span.cm-variable-2 { color: #cacbcc; }
+html[data-theme=dark] span.cm-variable-3, .cm-s-abcdef span.cm-type { color: #def; }
+html[data-theme=dark] span.cm-property { color: #fedcba; }
+html[data-theme=dark] span.cm-operator { color: #ff0; }
+html[data-theme=dark] span.cm-comment { color: #c78748; }
+span.cm-comment { font-style: italic; }
+html[data-theme=dark] span.cm-string { color: #2b4; }
+html[data-theme=dark] span.cm-meta { color: #C9F; }
+html[data-theme=dark] span.cm-qualifier { color: #FFF700; }
+html[data-theme=dark] span.cm-builtin { color: #30aabc; }
+html[data-theme=dark] span.cm-bracket { color: #8a8a8a; }
+html[data-theme=dark] span.cm-tag { color: #FFDD44; }
+html[data-theme=dark] span.cm-attribute { color: #DDFF00; }
+html[data-theme=dark] span.cm-error { color: #FF0000; }
+html[data-theme=dark] span.cm-header { color: aquamarine; font-weight: bold; }
+html[data-theme=dark] span.cm-link { color: blueviolet; }
+html[data-theme=dark] .CodeMirror-activeline-background { background: #314151; }
+
+html[data-theme=dark] .jp-RenderedText pre .ansi-yellow-bg {
+ background-color: #9e8220;
+}
\ No newline at end of file
--
GitLab