Fix contrast accessibility issues (w3c#223)

* implement accessibility changes * add white background for dark modes
baz-ga · Sep 14, 2022 · 0d458d3 · 0d458d3
1 parent 864d350
commit 0d458d3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/mdbook/theme/css/general.css b/mdbook/theme/css/general.css
@@ -103,6 +103,16 @@ h6:target::before {
     text-decoration: none;
 }
 
+
+/* This will need to be updated if more dark modes are added. */
+.content img .ayu {
+    background: var(--inline-code-color);
+}
+
+.content img .coal {
+    background: var(--inline-code-color);
+}
+
 table {
     margin: 0 auto;
     border-collapse: collapse;

diff --git a/mdbook/theme/css/variables.css b/mdbook/theme/css/variables.css
@@ -57,15 +57,15 @@
     --sidebar-bg: #292c2f;
     --sidebar-fg: #a1adb8;
     --sidebar-non-existant: #505254;
-    --sidebar-active: #3473ad;
+    --sidebar-active: #87bcfc;
     --sidebar-spacer: #393939;
 
     --scrollbar: var(--sidebar-fg);
 
-    --icons: #43484d;
+    --icons: #5d656c;
     --icons-hover: #b3c0cc;
 
-    --links: #2b79a2;
+    --links: #63a8d3;
 
     --inline-code-color: #c5c8c6;
 
@@ -137,15 +137,15 @@
     --sidebar-bg: #282d3f;
     --sidebar-fg: #c8c9db;
     --sidebar-non-existant: #505274;
-    --sidebar-active: #2b79a2;
+    --sidebar-active: #63a8d3;
     --sidebar-spacer: #2d334f;
 
     --scrollbar: var(--sidebar-fg);
 
     --icons: #737480;
     --icons-hover: #b7b9cc;
 
-    --links: #2b79a2;
+    --links: #63a8d3;
 
     --inline-code-color: #c5c8c6;
 
@@ -185,7 +185,7 @@
     --icons: #737480;
     --icons-hover: #262625;
 
-    --links: #2b79a2;
+    --links: #63a8d3;
 
     --inline-code-color: #6e6b5e;
 
@@ -218,15 +218,15 @@
         --sidebar-bg: #292c2f;
         --sidebar-fg: #a1adb8;
         --sidebar-non-existant: #505254;
-        --sidebar-active: #3473ad;
+        --sidebar-active: #87bcfc;
         --sidebar-spacer: #393939;
 
         --scrollbar: var(--sidebar-fg);
 
-        --icons: #43484d;
+        --icons: #5d656c;
         --icons-hover: #b3c0cc;
 
-        --links: #2b79a2;
+        --links: #63a8d3;
 
         --inline-code-color: #c5c8c6;