Issue #1235

pyproject.toml

@@ -36,6 +36,7 @@ readme = "README.rst"
 repository = "https://github.com/RunestoneInteractive/RunestoneComponents"
 version = "6.3.6"
 
+
 # See https://python-poetry.org/docs/pyproject/#include-and-exclude.
 include = [
  "README.md",

runestone/common/css/runestone-custom-sphinx-bootstrap.css

@@ -23,6 +23,18 @@
  --componentBgColor: #f0f8ff;
  --componentBorderColor: #000000;
  --questionBgColor: #e1efff;
+ --cmGutter: #FFFFFF;
+ --cmFont: #000000;
+ --cmKeyword:#708;
+ --cmNumber: #164;
+ --cmAtom: #219;
+ --cmString: #a11;
+ --cmDef: #00f;
+ --cmBuiltIn: #30a;
+ --spanColor: #c7254e;
+ --prebg-color: #f5f5f5;
+ --miColor: #208050;
+ --kcColor: #007020;
 }
 
 [data-theme="dark"] {
@@ -47,6 +59,18 @@
  --componentBgColor: #07467d;
  --componentBorderColor: #939090;
  --questionBgColor: rgb(23, 85, 93); 
+ --cmGutter: #2c2f33;
+ --cmFont: #99AAB5;
+ --cmKeyword: rgb(209, 12, 235);
+ --cmNumber: rgb(15, 219, 138);
+ --cmAtom: rgb(25, 153, 238);
+ --cmString: rgb(250, 58, 58);
+ --cmDef: rgb(0, 204, 255);
+ --cmBuiltIn: rgb(29, 82, 255);
+ --spanColor: #fd507b;
+ --prebg-color: #3f3e3e;
+ --miColor: #37c27c;
+ --kcColor: #15d14a;
 }
 
 /* custom modification of basic.css for color-contrast (AA compliant) */
@@ -96,6 +120,10 @@ span.highlighted {
 
 /* ActiveCode gutter custom modification for color-contrast (AA compliant) */
 
+.CodeMirror-gutters {
+ background-color: var(--cmGutter) !important;
+ }
+
 .CodeMirror-linenumber {
  color: #6b6b6b;
 }
@@ -360,13 +388,26 @@ div.container {
 
 /* end navbar and menu related styles */
 
+.CodeMirror {
+ /* Set global font properties here */
+ color: var(--cmFont) !important;
+ }
+
 .CodeMirror {
  margin: 0 0 1em 0;
- background-color: var(--background);
+ background-color: var(--background) !important;
  height: auto;
  clear: both;
 }
 
+/*Custom colors for words in activecode*/
+.cm-s-default .cm-keyword {color: var(--cmKeyword) !important;}
+.cm-s-default .cm-atom {color: var(--cmAtom) !important;}
+.cm-s-default .cm-number {color: var(--cmNumber)!important;}
+.cm-s-default .cm-def {color: var(--cmDef)!important;}
+.cm-s-default .cm-string {color: var(--cmString) !important;}
+.cm-s-default .cm-builtin {color: var(--cmBuiltIn) !important;}
+
 .CodeMirror-scroll {
  /* this allows CM elements to be resized to (almost) any
  * height while still relying on max-height (which keeps
@@ -384,7 +425,7 @@ div.container {
  border-width: 0;
  margin: 0;
  padding: 0;
- background: transparent;
+ background: var(--background);
  font-family: Monaco, Courier New, monospace;
  font-size: inherit;
  padding: 0;
@@ -482,6 +523,26 @@ h2 {
  margin-top: 15px;
  font-weight: bold;
 }
+
+code {
+ color: var(--spanColor);
+ background-color: var(--outerBackground) !important;
+}
+
+pre {
+ color: var(--bodyFont);
+ background-color: var(--prebg-color);
+ border: 1px solid #ccc;
+}
+
+.highlight .mi {
+ color: var(--miColor);
+}
+
+.highlight .kc {
+ color: var(--kcColor);
+ font-weight: bold;
+ }
 /*
 Missing brackets
 ================
@@ -896,6 +957,12 @@ div.flash {
  margin: 0 0 0.5em 1em;
 }
 
+div.sidebar,
+aside.sidebar {
+ background-color: var(--background) !important;
+ border: 1px solid var(--outerBackground) !important;
+}
+
 a.disqus_thread_link {
  display: block;
 }