also apply color schemes to tools.html

1 files changed, 18 insertions, 2 deletions

diff --git a/html/tools.html b/html/tools.html
index 2b47f21c..5d638ef5 100644
--- a/html/tools.html
+++ b/html/tools.html
@@ -5,6 +5,22 @@
   <title>Muhq’s Game Web Tools</title>
 
   <style>
+:root {
+  /* define applied colors */
+  --bg: #fdfdfd;
+  --fg: #1a1a1a;
+}
+
+@media (prefers-color-scheme: dark) {
+  /* change apllied colors to the dark gruvbox pallet
+   * https://github.com/morhetz/gruvbox
+   */
+  :root {
+    --bg: #282828; /* dark bg */
+    --fg: #ebdbb2; /* dark fg */
+  }
+}
+
 [class*="cell-"] {
   min-width: 20px;
   min-height: 20px;
@@ -27,8 +43,8 @@ html {
   line-height: 1.5;
   font-family: Georgia, serif;
   font-size: 20px;
-  color: #1a1a1a;
-  background-color: #fdfdfd;
+  color: var(--fg);
+  background-color: var(--bg);
 }
 
 body {