From 1d613541c408e410f2cbcdcb4e728ef91cd0505a Mon Sep 17 00:00:00 2001
From: Patrick Barsanti <patrick.barsanti@amarulasolutions.com>
Date: Thu, 6 Jun 2024 15:50:47 +0200
Subject: [PATCH] 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 <patrick.barsanti@amarulasolutions.com>
---
 template/styles/layout.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/template/styles/layout.css b/template/styles/layout.css
index 2b668f9..5cd28f0 100644
--- 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,6 +94,7 @@ ul,li {
   padding-right: 16px;
   padding-left: 16px;
   font-size: 12px;
+  color: black;
   background-color: #fdcb0b;
   th {
     font-weight: 400;
@@ -94,7 +102,7 @@ ul,li {
 }
 
 .slidev-layout.section {
-  background-color: black;
+  background-color: #1e1e1e;
   text-align: end;
   align-items: center;