Fix theme for source rendering

Author: panglesd

asset/css/doc.css

@@ -382,41 +382,9 @@ span.sign-expand.open::before {
 
 .modules { list-style-type: none; padding-left:0; }
 
-/* Source links float inside preformated text or headings. */
-a.source_link {
-  float: right;
-  color: var(--source-link-color);
-  font-family: "Fira Sans", sans-serif;
-  font-size: initial;
-}
-
-
-.source_container {
-  display: flex;
-}
-
-.source_line_column {
-  padding-right: 0.5em;
-  text-align: right;
-  color: var(--source-line-column);
-  background: var(--source-line-column-bg);
-}
-
-.source_line {
-  padding: 0 1em;
-}
-
-.source_code {
-  flex-grow: 1;
-  background: var(--code-background);
-  padding: 0 0.3em;
-  color: var(--code-color);
-}
-
 /* Taken from odoc's css sheet */
 
-:root,
-.light:root {
+.source_container {
 
   /* light gruvbox theme colors */
   --bg_h: #f9f5d7;
@@ -460,51 +428,53 @@ a.source_link {
 
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    /* dark gruvbox theme colors */
-    --bg_h: #1d2021;
-    --bg:   #282828;
-    --bg_s: #32302f;
-    --bg1:  #3c3836;
-    --bg2:  #504945;
-    --bg3:  #665c54;
-    --bg4:  #7c6f64;
-
-    --fg:  #fbf1c7;
-    --fg1: #ebdbb2;
-    --fg2: #d5c4a1;
-    --fg3: #bdae93;
-    --fg4: #a89984;
-
-    --red:    #fb4934;
-    --green:  #b8bb26;
-    --yellow: #fabd2f;
-    --blue:   #83a598;
-    --purple: #d3869b;
-    --aqua:   #8ec07c;
-    --gray:   #928374;
-    --orange: #fe8019;
-
-    --red-dim:    #cc2412;
-    --green-dim:  #98971a;
-    --yellow-dim: #d79921;
-    --blue-dim:   #458588;
-    --purple-dim: #b16286;
-    --aqua-dim:   #689d6a;
-    --gray-dim:   #a89984;
-    --orange-dim: #d65d0e;
-
-    /* odoc colors */
-    --odoc-blue: #5c9cf5;
-    --odoc-bg: #202020;
-    --odoc-bg1: #252525;
-    --odoc-fg: #bebebe;
-    --odoc-fg1: #777;
-  }
-}
-
-:root {
+body.dark .source_container {
+  /* dark gruvbox theme colors */
+  --bg_h: #1d2021;
+  --bg:   #282828;
+  --bg_s: #32302f;
+  --bg1:  #3c3836;
+  --bg2:  #504945;
+  --bg3:  #665c54;
+  --bg4:  #7c6f64;
+
+  --fg:  #fbf1c7;
+  --fg1: #ebdbb2;
+  --fg2: #d5c4a1;
+  --fg3: #bdae93;
+  --fg4: #a89984;
+
+  --red:    #fb4934;
+  --green:  #b8bb26;
+  --yellow: #fabd2f;
+  --blue:   #83a598;
+  --purple: #d3869b;
+  --aqua:   #8ec07c;
+  --gray:   #928374;
+  --orange: #fe8019;
+
+  --red-dim:    #cc2412;
+  --green-dim:  #98971a;
+  --yellow-dim: #d79921;
+  --blue-dim:   #458588;
+  --purple-dim: #b16286;
+  --aqua-dim:   #689d6a;
+  --gray-dim:   #a89984;
+  --orange-dim: #d65d0e;
+
+  /* odoc colors */
+  --odoc-blue: #5c9cf5;
+  --odoc-bg: #202020;
+  --odoc-bg1: #252525;
+  --odoc-fg: #bebebe;
+  --odoc-fg1: #777;
+}
+
+
+.source_container {
+  --code-color: var(--fg);
+  --code-background: var(--bg);
+
   --source-link-color: var(--fg4);
   --source-line-column: var(--fg3);
   --source-line-column-bg: var(--bg_h);
@@ -522,6 +492,40 @@ a.source_link {
 }
 
 
+
+/* Source links float inside preformated text or headings. */
+a.source_link {
+  float: right;
+  color: var(--source-link-color);
+  font-family: "Fira Sans", sans-serif;
+  font-size: initial;
+}
+
+
+.source_container {
+  display: flex;
+  padding: 0;
+}
+
+.source_line_column {
+  padding-right: 0.5em;
+  text-align: right;
+  color: var(--source-line-column);
+  background: var(--source-line-column-bg);
+}
+
+.source_line {
+  padding: 0 1em;
+}
+
+.source_code {
+  flex-grow: 1;
+  background: var(--code-background);
+  padding: 0 0.3em;
+  color: var(--code-color);
+}
+
+
 /* Linked highlight */
 .source_code *:target {
   border-radius: 1px;