Make text brighter for readability, fix mermaidjs darkmode

gamingrobot · Jan 12, 2024 · a5dee8a · a5dee8a
1 parent 806c0a4
commit a5dee8a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 18 deletions.
diff --git a/config.toml b/config.toml
@@ -37,5 +37,6 @@ goatcounter = "grbt-doingstuff"
 
 # https://mermaid.js.org/
 mermaid_theme = "default"
+mermaid_theme_dark = "dark"
 mermaid_align = "center"
 
diff --git a/themes/hyde-hyde-hyde-zola/config.toml b/themes/hyde-hyde-hyde-zola/config.toml
@@ -33,5 +33,6 @@ author_url = "https://example.com"
 
 # https://mermaid.js.org/
 mermaid_theme = "default"
+mermaid_theme_dark = "dark"
 mermaid_align = "center"
 
diff --git a/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_responsive.scss b/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_responsive.scss
@@ -117,7 +117,7 @@
 
   /* Modified CSS */
   body {
-    color: #c8c3bc;
+    color: #eaeaea;
     background-color: #181a1b;
   }
   a {
@@ -174,37 +174,37 @@
   blockquote {
     border-left-color: initial;
     border-right-color: #8c827300;
-    color: #9d9588;
+    color: #c8c3bc;
   }
   blockquote {
     border-left-color: #373c3e;
   }
   .tip {
-    color: #cbc6c0c4;
+    color: #eaeaea;
     background-color: #087f3533;
     border-left-color: #03c503;
   }
   .tip-icon {
     color: #50fc50;
   }
   .info {
-    color: #cbc6c0c4;
+    color: #eaeaea;
     background-color: #022f43;
     border-left-color: #006bc2;
   }
   .info-icon {
-    color: rgb(82, 181, 255);
+    color: #52b5ff;
   }
   .warning {
-    color: #cbc6c0c4;
+    color: #eaeaea;
     background-color: #3d2e00;
     border-left-color: #b47602;
   }
   .warning-icon {
     color: #fcb125;
   }
   .danger {
-    color: #cbc6c0c4;
+    color: #eaeaea;
     background-color: #430c118f;
     border-left-color: #962017;
   }
@@ -224,7 +224,7 @@
     text-decoration-color: initial;
   }
   a:focus {
-    color: #c8c3bc;
+    color: #eaeaea;
     border-bottom-color: #3e4446;
     text-decoration-color: initial;
     background-image: initial;
@@ -234,7 +234,7 @@
     text-decoration-color: initial;
   }
   a:hover {
-    color: #c8c3bc;
+    color: #eaeaea;
     border-bottom-color: #3e4446;
     text-decoration-color: initial;
     background-image: initial;
@@ -271,14 +271,14 @@
     fill: #49a8ea;
   }
   .icon:hover {
-    color: #c8c3bc;
-    fill: #c8c3bc;
+    color: #eaeaea;
+    fill: #eaeaea;
   }
   .item__date {
-    color: #9d9588;
+    color: #c8c3bc;
   }
   .post__meta {
-    color: #9d9588;
+    color: #c8c3bc;
   }
   .post__tag {
     background-image: initial;
@@ -322,7 +322,7 @@
   }
   .menu {
     background-color: #1f2123;
-    color: #c8c3bc;
+    color: #eaeaea;
   }
   .draft {
     color: #a8a095 !important;
@@ -353,12 +353,12 @@
   }
 
   .toc a:focus {
-    color: #c8c3bc !important;
+    color: #eaeaea !important;
     border-bottom-color: #3e4446;
     text-decoration-color: initial;
   }
   .toc a:hover {
-    color: #c8c3bc !important;
+    color: #eaeaea !important;
     border-bottom-color: #3e4446;
     text-decoration-color: initial;
   }

diff --git a/themes/hyde-hyde-hyde-zola/templates/page.html b/themes/hyde-hyde-hyde-zola/templates/page.html
@@ -76,10 +76,14 @@ <h1>{{ page.title }}</h1>
     {% if page.extra.mermaid %}
         <script type="module">
             import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+            var theme = '{{ config.extra.mermaid_theme }}'
+            if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches){
+                theme = '{{ config.extra.mermaid_theme_dark }}'
+            }
             var config = {
                 startOnLoad:true,
-                theme:'{{ config.extra.mermaid_theme or "default" }}',
-                align:'{{ config.extra.mermaid_align or "center" }}'
+                theme: theme,
+                align:'{{ config.extra.mermaid_align }}'
             };
             mermaid.initialize(config);
         </script>