improve syntax highlighting in dark mode

1 files changed, 59 insertions, 1 deletions

diff --git a/static/css/darkmode.css b/static/css/darkmode.css
index fee713a..6426704 100644
--- a/static/css/darkmode.css
+++ b/static/css/darkmode.css
@@ -4,7 +4,7 @@
     background-color: #292929;
   }
 
-  html *:not(input) {
+  html *:not(input) *:not(span) {
     color: #dcdcdc !important;
   }
 
@@ -32,4 +32,62 @@
   [style*='background-color: var('], [style*='background-color:var('] {
     background-color: #292929 !important;
   }
+
+  pre {
+    margin: 0;
+    background: #414040 !important;
+  }
+  pre code {
+    font-size: 95%;
+    position: relative;
+  }
+
+  /* Better tables */
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: auto;
+    max-width: 100%;
+    border-top: 2.27px solid white;
+    border-bottom: 2.27px solid white;
+    /* display: block; */
+    overflow-x: auto; /* does not work because element is not block */
+    /* white-space: nowrap; */
+    counter-increment: caption;
+  }
+  /* add bottom border on column table headings  */
+  table tr > th[scope='col'] {
+    border-bottom: 1.36px solid white;
+  }
+  /* add right border on row table headings  */
+  table tr > th[scope='row'] {
+    border-right: 1.36px solid white;
+  }
+  table > tbody > tr:first-child > td,
+  table > tbody > tr:first-child > th {
+    border-top: 1.36px solid white;
+  }
+  table > tbody > tr:last-child > td,
+  table > tbody > tr:last-child > th {
+    border-bottom: 1.36px solid white;
+  }
+
+  /* frame of the code block */
+  div.highlight {
+    border: 1px solid;
+    border-radius: 4px;
+  }
+
+  /* Styles for inline code or code snippets */
+  kbd {
+    background: #292929;
+    border: 1px solid hsl(210, 5%, 70%);
+    border-radius: 2px;
+    padding: 2px 4px;
+    font-size: 75%;
+  }
+
+  mark {
+    background-color: rgb(97, 96, 96) !important;
+  }
 }