template: styles: Change colors for dark mode

Change background and font colors for dark mode, both for the slide itself and for the bottom-panel. The idea behind changing black into very dark grey and white into very light grey is to make the dark mode easier on the eyes, so it is actually a valid option when presenting. The bottom-panel text color is made always black because white on yellow is hard to read. Signed-off-by: Patrick Barsanti <[email protected]>
giuliobenetti · Jul 15, 2024 · 1d61354 · 1d61354
1 parent 1138b94
commit 1d61354
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/template/styles/layout.css b/template/styles/layout.css
@@ -6,6 +6,13 @@
   --slidev-code-line-height: 14px;
 }
 
+html.dark {
+  .slidev-layout {
+    color: #cdcdcd;
+    background: #1e1e1e;
+  }
+}
+
 .left-image {
   vertical-align: middle;
   width: 450px;
@@ -87,14 +94,15 @@ ul,li {
   padding-right: 16px;
   padding-left: 16px;
   font-size: 12px;
+  color: black;
   background-color: #fdcb0b;
   th {
     font-weight: 400;
   }
 }
 
 .slidev-layout.section {
-  background-color: black;
+  background-color: #1e1e1e;
   text-align: end;
   align-items: center;