fix: improved legibility in dark mode

Author: arnog

docs/compute-engine/api.md

@@ -442,10 +442,10 @@ div.figure {
   ```live
   :::style
       math-field {
-      border: 1px solid var(--neutral-400);
-      background: var(--neutral-200);
-      border-radius: 8px;
-      padding: 8px;
+        border: 1px solid var(--neutral-400);
+        background: var(--neutral-200);
+        border-radius: 8px;
+        padding: 8px;
       }
     @media (pointer: coarse) {
         math-field {
@@ -460,10 +460,10 @@ div.figure {
             inset 4px 4px 16px rgb(0 0 0 / 10%),
             inset 2px 2px 8px rgb(0 0 0 / 60%);
 
-        --smart-fence-color: white;
-        --caret-color: var(--blue-400);
-        --selection-background-color: var(--blue-300);
-        --contains-highlight-background-color: var(--blue-900);
+          --smart-fence-color: white;
+          --caret-color: var(--blue-400);
+          --selection-background-color: var(--blue-300);
+          --contains-highlight-background-color: var(--blue-900);
         }
         math-field:focus {
           outline: 4px solid rgb(255 255 255 / 25%);

docs/mathfield/01-introduction.md

@@ -86,8 +86,17 @@ async function toJsxNode(node) {
   const value = node.value;
 
   // "style" is for inline styles
-  const style = value.match(/:::style\s*\n([\s\S]*?)(\n:::|$)/)?.[1];
-
+  let style = value.match(/:::style\s*\n([\s\S]*?)(\n:::|$)/)?.[1];
+
+  /** @fixme: tempory: should be able to use CSS variables instead*/
+  style = `
+      math-field {
+        border: 1px solid var(--neutral-400);
+        background: var(--neutral-200);
+        border-radius: 8px;
+        padding: 8px;
+      }
+` + style;
   // "html" and "js" are for editable blocks
   const html = value.match(/:::html\s*\n([\s\S]*?)(\n:::|$)/)?.[1];
   let js = value.match(

plugins/code-playground/index.js

@@ -6,6 +6,10 @@
   padding-block: 1em;
 }
 
+:root[data-theme="dark"] .intro {
+  color: var(--blue-400);
+}
+
 .intro a {
   text-decoration: underline;
 }

src/components/Intro/styles.module.css

@@ -40,7 +40,7 @@
 
 }
 
-[data-theme='dark'] {
+:root[data-theme='dark'] {
   --console-background: var(--base-00);
   --code-background: var(--neutral-100);
 }
@@ -55,8 +55,8 @@ code {
   border-radius: 4px;
 }
 
-[data-theme='dark'] code {
-  color: var(--primary-color-light);
+:root[data-theme='dark'] code {
+  color: var(--blue-300);
   border: 1px solid var(--neutral-600);
 }
 

src/css/code.css

@@ -180,7 +180,7 @@
   --magenta-900: #8a004c;
 }
 
-[data-theme='dark'] {
+:root[data-theme='dark'] {
 
     --semantic-blue: var(--blue-700);
     --semantic-red: var(--red-400);
@@ -236,7 +236,7 @@
   
 }
 
-[data-theme='dark'] {
+:root[data-theme='dark'] {
   --neutral-900: #302e33;  
   --neutral-800: #3b3a3f; 
   --neutral-700: hsl(255,3%, 30%);

src/css/colors.css

@@ -43,6 +43,15 @@
   --ifm-toc-padding-horizontal: 1em;
 }
 
+math-field {
+  border: 1px solid var(--neutral-400);
+  background: var(--neutral-200);
+  border-radius: 8px;
+  padding: 8px;
+  background: red;
+}
+
+
 .table-of-contents {
   /* Do not display scrollbars: */
   overflow:hidden;
@@ -119,7 +128,7 @@
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme="dark"] {
+:root[data-theme="dark"] {
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 
   --ifm-code-background: var(--console-background);
@@ -221,7 +230,7 @@
   line-height: 1.3;
 }
 
-[data-theme="dark"] {
+:root[data-theme="dark"] {
   --primary-color: hsl(210, 80%, 40%);
   --primary-color-dark: hsl(210, 80%, 30%);
   --primary-color-light: hsl(210, 80%, 60%);

src/css/custom.css

@@ -54,13 +54,22 @@ body {
   text-wrap: balance;
 }
 
+:root[data-theme="dark"] .markdown > h2 {
+  color: var(--blue-300);
+}
+
 .markdown > h3 {
   --ifm-h3-font-size: 1.25rem;
   font-weight: 600;
   color: var(--primary-color);
   text-wrap: balance;
 }
 
+:root[data-theme="dark"] .markdown > h3 {
+  color: var(--blue-300);
+}
+
+
 .markdown h1:first-child {
   --ifm-h1-font-size: 4rem;
   --ifm-heading-line-height: 1;