Added dark theme for thebe

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