(docs) Make <pre> code be readable in dark mode also

This is an additional fix for #174. Without this, the text used #333 on black (#000) background, which is rather hard to read, to say the least. This change retains the #333 color in light mode (where it makes sense), but changes to use `inherit` in dark mode, which looks much better.
perlang-org · Apr 9, 2021 · 1f32a59 · 1f32a59
1 parent e94e121
commit 1f32a59
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/docs/templates/darkerfx/styles/main.css b/docs/templates/darkerfx/styles/main.css
diff --git a/docs/templates/darkerfx/styles/main.css.map b/docs/templates/darkerfx/styles/main.css.map
diff --git a/docs/templates/darkerfx/styles/main.scss b/docs/templates/darkerfx/styles/main.scss
@@ -41,6 +41,7 @@ body.theme-dark {
     --theme-inline-code: inherit;
     --theme-inline-code-background: #454545;
     --theme-code-border: #404040;
+    --theme-code-color: inherit;
     --theme-border-subnav: #404040;
     --theme-border-footer: #404040;
 }
@@ -69,6 +70,7 @@ body.theme-light {
     --theme-inline-code: #c7254e;
     --theme-inline-code-background: #f9f2f4;
     --theme-code-border: #e7e7e7;
+    --theme-code-color: #333;
     --theme-border-footer: #e7e7e7;
 }
 
@@ -428,6 +430,10 @@ pre {
     background-color: inherit;
 }
 
+legend, pre {
+    color: var(--theme-code-color);
+}
+
 /*
  * highlight.js custom theme (dark version)
  *