From 3d192ed9a40fa8d8b52fbd8a29b30db0db1ed61e Mon Sep 17 00:00:00 2001
From: Jeremy Wall <jeremy@marzhillstudios.com>
Date: Thu, 22 Feb 2024 19:49:48 -0500
Subject: [PATCH] ui: first pass at a dark mode

---
 static/lib.js   |  9 +++++++
 static/site.css | 63 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+)

diff --git a/static/lib.js b/static/lib.js
index 969b16f..4880e94 100644
--- a/static/lib.js
+++ b/static/lib.js
@@ -12,6 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+function getCssVariableValue(variableName) {
+    return getComputedStyle(document.documentElement).getPropertyValue(variableName);
+}
+
 class TimeseriesGraph extends HTMLElement {
     #uri;
     #width;
@@ -243,6 +247,11 @@ class TimeseriesGraph extends HTMLElement {
         var layout = {
             displayModeBar: false,
             responsive: true,
+            plot_bgcolor: getCssVariableValue('--paper-background-color').trim(),
+            paper_bgcolor: getCssVariableValue('--paper-background-color').trim(),
+            font: {
+                color: getCssVariableValue('--text-color').trim()
+            }
         };
         var traces = [];
         for (var subplot_idx in data) {
diff --git a/static/site.css b/static/site.css
index b0d8f82..3ce6933 100644
--- a/static/site.css
+++ b/static/site.css
@@ -1,3 +1,66 @@
+:root {
+    /* Base colors */
+    --background-color: #FFFFFF; /* Light background */
+    --text-color: #333333; /* Dark text for contrast */
+    --paper-background-color: #F0F0F0;
+    --accent-color: #6200EE; /* For buttons and interactive elements */
+
+    /* Graph colors */
+    --graph-color-1: #007BFF; /* Blue */
+    --graph-color-2: #28A745; /* Green */
+    --graph-color-3: #DC3545; /* Red */
+    --graph-color-4: #FFC107; /* Yellow */
+    --graph-color-5: #17A2B8; /* Cyan */
+    --graph-color-6: #6C757D; /* Gray */
+
+    /* Axis and grid lines */
+    --axis-color: #CCCCCC;
+    --grid-line-color: #EEEEEE;
+
+    /* Tooltip background */
+    --tooltip-background-color: #FFFFFF;
+    --tooltip-text-color: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* Solarized Dark Base Colors */
+        --background-color: #002b36; /* base03 */
+        --paper-background-color: #003c4a;
+        --text-color: #839496; /* base0 */
+        --accent-color: #268bd2; /* blue */
+
+        /* Graph colors - Solarized Accent Colors */
+        --graph-color-1: #b58900; /* yellow */
+        --graph-color-2: #cb4b16; /* orange */
+        --graph-color-3: #dc322f; /* red */
+        --graph-color-4: #d33682; /* magenta */
+        --graph-color-5: #6c71c4; /* violet */
+        --graph-color-6: #2aa198; /* cyan */
+
+        /* Axis and grid lines */
+        --axis-color: #586e75; /* base01 */
+        --grid-line-color: #073642; /* base02 */
+
+        /* Tooltip background */
+        --tooltip-background-color: #002b36; /* base03 */
+        --tooltip-text-color: #839496; /* base0 */
+    }
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+input, textarea, select, option, button {
+    background-color: var(--paper-background-color);
+    border: 1px solid var(--accent-color);
+    color: var(--text-color);
+    padding: 8px;
+    border-radius: 4px;
+}
+
 body * {
     padding-left: .3em;
     padding-right: .3em;