Dark mode support.

Uses the system them preference
mcgrew · Feb 10, 2022 · f4ecd89 · f4ecd89
1 parent b9a723f
commit f4ecd89
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 4 deletions.
diff --git a/common/build.h b/common/build.h
@@ -1,2 +1,2 @@
 /* This file is generated by git */
-#define BUILD "652"
+#define BUILD "653"
diff --git a/electron/preload.js b/electron/preload.js
@@ -12,6 +12,9 @@ window.addEventListener('DOMContentLoaded', () => {
     }
 
     document.body.style.backgroundColor = '#fff';
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        document.body.style.backgroundColor = '#333';
+    }
 })
 
 function createElement(element, text, style) {

diff --git a/webui/index.css b/webui/index.css
@@ -16,6 +16,10 @@ body {
     user-select: none;
 }
 
+#application > img {
+   filter: drop-shadow(2px 2px 1px #aaa);
+}
+
 h1, h3 {
     text-align: center;
 }
@@ -54,6 +58,59 @@ tabcontent {
     padding: 3em;
 }
 
+/* Hide the "spinner" in number fields */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
 .invalid {
     border-color: red;
 }
+
+div.description {
+    color: #666;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #111;
+        color: #ccc;
+    }
+
+    #application {
+        background-color: #333;
+    }
+
+    tab {
+        background-color: #222;
+    }
+
+    tab:hover, tab.active {
+        background-color: #333;
+    }
+
+    button, select {
+        background-color: #333;
+        color: #ccc;
+        border-color: #3a3a3a;
+    }
+    input {
+        background-color: #111;
+        color: #ccc;
+        border-color: #333;
+    }
+    #application > img {
+       filter: drop-shadow(2px 2px 1px #000);
+    }
+    div.description {
+        color: #888;
+    }
+
+}
diff --git a/webui/index.html b/webui/index.html
@@ -9,7 +9,7 @@
     <datalist id='sprites' type='text'>
     </datalist>
 </head>
-<body>
+<body class="dark">
 <div id='application'>
     <noscript>
         Hey there!

diff --git a/webui/interface.js b/webui/interface.js
@@ -188,7 +188,6 @@ class Interface {
         this.title = this.create('img', null, {
             'display': 'block',
             'margin': 'auto',
-            'filter': 'drop-shadow(2px 2px 1px #aaa)',
         });
         this.title.src = 'logo.png';
         this.title.alt = 'Dragon Warrior Randomizer';
@@ -714,9 +713,9 @@ class Interface {
         if (description) {
             let descriptionEl = this.create('div', description, {
                 'font-size': '0.7em',
-                'color': '#666',
                 'margin-left': '2em',
             });
+            descriptionEl.classList.add('description');
             container.append(descriptionEl);
         }
         if (retain)