From eae23957d63eb2641f9293f9840195784772cdf7 Mon Sep 17 00:00:00 2001
From: Carl Richter <carl.richter@tyclipso.net>
Date: Fri, 30 Jul 2021 13:18:18 +0200
Subject: [PATCH] feat: add styling for dark theme

---
 client/themes/tyclipso/scss/app.scss          | 43 ++++++++++++++++++-
 .../scss/components/_anchor-button.scss       |  4 ++
 .../tyclipso/scss/components/_image.scss      |  1 +
 .../html-tyclipso/components/ImageOverlay.js  |  4 +-
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/client/themes/tyclipso/scss/app.scss b/client/themes/tyclipso/scss/app.scss
index 81e52f0f..fb2d8c06 100644
--- a/client/themes/tyclipso/scss/app.scss
+++ b/client/themes/tyclipso/scss/app.scss
@@ -30,6 +30,10 @@
     .toc-anchor {
       display: none !important;
     }
+
+    @at-root .theme--dark & {
+      color: mc('grey', '200');
+    }
   }
 
   // remove underline
@@ -44,7 +48,7 @@
       background: mc('grey', '300');
 
       @at-root .theme--dark & {
-        background: mc('grey', '300');
+        background: mc('grey', '800');
       }
     }
   }
@@ -104,19 +108,28 @@
     & + p {
       padding-top: 8px;
     }
+
+    @at-root .theme--dark & {
+      color: mc('grey', '300');
+    }
   }
 
   // ---------------------------------
   // CODE
   // ---------------------------------
 
-  code {
+  code:not([class]) {
     background: mc('grey', '200');
     padding: .1em .5em;
     border-radius: 4px;
     font-size: 85%;
     text-shadow: none;
     color: mc('grey', '800');
+
+    @at-root .theme--dark & {
+      background: rgba(mc('grey', '800'), .5);
+      color: mc('grey', '400');
+    }
   }
 
   .code-toolbar {
@@ -177,6 +190,10 @@
       padding: 7px 16px;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
+
+      @at-root .theme--dark & {
+        background: rgba(#000, .2);
+      }
     }
 
     .prismjs {
@@ -201,6 +218,15 @@
     }
   }
 
+  // ---------------------------------
+  // KEY BINDINGS
+  // ---------------------------------
+  kbd {
+    @at-root .theme--dark & {
+      color: mc('grey', '800');
+      background-color: mc('grey', '100');
+    }
+  }
 
   // ---------------------------------
   // TABLES
@@ -214,6 +240,10 @@
     th,
     tr td {
       border: 1px solid mc('grey', '200');
+
+      @at-root .theme--dark & {
+        border: 1px solid mc('grey', '800');
+      }
     }
 
     th {
@@ -222,10 +252,19 @@
       font-size: .8em;
       letter-spacing: .05em;
       text-transform: uppercase;
+
+      @at-root .theme--dark & {
+        background: mc('grey', '800');
+        color: mc('grey', '400');
+      }
     }
 
     tbody tr:nth-child(even) td {
       background: mc('grey', '50');
+
+      @at-root .theme--dark & {
+        background: rgba(mc('grey', '800'), .25);
+      }
     }
   }
 }
diff --git a/client/themes/tyclipso/scss/components/_anchor-button.scss b/client/themes/tyclipso/scss/components/_anchor-button.scss
index 7ce6f5a7..9ea5b019 100644
--- a/client/themes/tyclipso/scss/components/_anchor-button.scss
+++ b/client/themes/tyclipso/scss/components/_anchor-button.scss
@@ -13,3 +13,7 @@
   opacity: 1;
   visibility: visible;
 }
+
+.theme--dark .ty-anchor-button {
+  color: mc('grey', '400');
+}
diff --git a/client/themes/tyclipso/scss/components/_image.scss b/client/themes/tyclipso/scss/components/_image.scss
index c7c9f298..bb7f45a6 100644
--- a/client/themes/tyclipso/scss/components/_image.scss
+++ b/client/themes/tyclipso/scss/components/_image.scss
@@ -28,6 +28,7 @@
 
   a, button {
     pointer-events: all;
+    color: currentColor !important;
   }
 }
 
diff --git a/server/modules/rendering/html-tyclipso/components/ImageOverlay.js b/server/modules/rendering/html-tyclipso/components/ImageOverlay.js
index ee14ebae..5e2af3b2 100644
--- a/server/modules/rendering/html-tyclipso/components/ImageOverlay.js
+++ b/server/modules/rendering/html-tyclipso/components/ImageOverlay.js
@@ -5,9 +5,9 @@
 function ImageOverlay(src) {
   return `
     <div class="ty-image-overlay">
-      <a href="${src}" target="_blank" class="v-btn v-btn--contained theme--light v-size--default primary" aria-label="In neuem Tab öffnen">
+      <a href="${src}" target="_blank" class="v-btn v-btn--contained v-size--default primary" aria-label="In neuem Tab öffnen">
         <span class="v-btn__content">
-            <i aria-hidden="true" class="v-icon v-icon--left notranslate mdi mdi-open-in-new theme--light"></i>
+            <i aria-hidden="true" class="v-icon v-icon--left notranslate mdi mdi-open-in-new"></i>
             In neuem Tab öffnen
         </span>
       </a>