Dark mode support for markdown table

LGiki · Jun 5, 2021 · 736e572 · 736e572
1 parent 5ac76a9
commit 736e572
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/assets/css/_color.css b/assets/css/_color.css
@@ -122,6 +122,10 @@
     --color-archive-month: var(--color-gary-500);
     --color-footer-link: var(--color-blue-600);
     --color-markdown-code-background: rgba(27, 31, 35, .05);
+    --color-markdown-table-tr-background: #fff;
+    --color-markdown-table-tr-2n-background: #f6f8fa;
+    --color-markdown-table-border: #dfe2e5;
+    --color-markdown-table-border-top: #c6cbd1;
 }
 
 :root[data-theme="dark"] {
@@ -161,4 +165,8 @@
     --color-archive-month: var(--color-gary-300);
     --color-footer-link: var(--color-blue-400);
     --color-markdown-code-background: rgba(27, 31, 35, .5);
+    --color-markdown-table-tr-background: var(--color-episode-container);
+    --color-markdown-table-tr-2n-background: var(--color-gary-800);
+    --color-markdown-table-border: var(--color-gary-600);
+    --color-markdown-table-border-top: var(--color-gary-600);
 }
diff --git a/assets/css/_markdown.css b/assets/css/_markdown.css
@@ -750,6 +750,7 @@
     display: block;
     width: 100%;
     overflow: auto;
+    color: var(--color-episode-content-text);
 }
 
 .markdown-content table th {
@@ -759,16 +760,21 @@
 .markdown-content table td,
 .markdown-content table th {
     padding: 6px 13px;
-    border: 1px solid #dfe2e5;
+    border: 1px solid var(--color-markdown-table-border);
+    transition: border .3s ease-in-out;
 }
 
 .markdown-content table tr {
-    background-color: #fff;
-    border-top: 1px solid #c6cbd1;
+    /* background-color: #fff; */
+    background-color: var(--color-markdown-table-tr-background);
+    border-top: 1px solid var(--color-markdown-table-border-top);
+    transition: background-color .3s ease-in-out, border-top .3s ease-in-out;
 }
 
 .markdown-content table tr:nth-child(2n) {
-    background-color: #f6f8fa;
+    /* background-color: #f6f8fa; */
+    background-color: var(--color-markdown-table-tr-2n-background);
+    transition: background-color .3s ease-in-out;
 }
 
 .markdown-content img {