From 23e98e3696b492d0015e85e196a3945f8ce49b3b Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Fri, 15 Aug 2025 06:49:43 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20Update=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style.css | 87 +++++++++++++++++++++++--------------------------------
 1 file changed, 37 insertions(+), 50 deletions(-)

diff --git a/style.css b/style.css
index 46323a2..34ad60b 100644
--- a/style.css
+++ b/style.css
@@ -17,21 +17,13 @@
 }
 
 body {
+    background-color: var(--background-color-light);
+    color: var(--text-color-light);
     font-family: sans-serif;
     text-align: center;
     transition: background-color 0.3s, color 0.3s;
 }
 
-body[data-theme='light'] {
-    background-color: var(--background-color-light);
-    color: var(--text-color-light);
-}
-
-body[data-theme='dark'] {
-    background-color: var(--background-color-dark);
-    color: var(--text-color-dark);
-}
-
 .theme-switcher {
     position: absolute;
     right: .75rem;
@@ -40,21 +32,12 @@ body[data-theme='dark'] {
 
 #theme-switch {
     background: none;
-    border: 1px solid;
+    border: 1px solid var(--text-color-light);
+    color: var(--text-color-light);
     cursor: pointer;
     padding: .25rem .5rem;
 }
 
-body[data-theme='light'] #theme-switch {
-    border-color: var(--text-color-light);
-    color: var(--text-color-light);
-}
-
-body[data-theme='dark'] #theme-switch {
-    border-color: var(--text-color-dark);
-    color: var(--text-color-dark);
-}
-
 .container {
     margin: auto;
     overflow: hidden;
@@ -64,11 +47,10 @@ body[data-theme='dark'] #theme-switch {
 
 h1 { color: var(--h1-color-light); }
 
-body[data-theme='dark'] h1 { color: var(--h1-color-dark); }
-
 .scores {
-    border: 1px solid;
+    border: 1px solid var(--text-color-light);
     border-left: none;
+    color: var(--text-color-light);
     border-right: none;
     display: flex;
     justify-content: space-around;
@@ -82,16 +64,6 @@ body[data-theme='dark'] h1 { color: var(--h1-color-dark); }
     }
 }
 
-body[data-theme='light'] .scores {
-    border-color: var(--text-color-light);
-    color: var(--text-color-light);
-}
-
-body[data-theme='dark'] .scores {
-    border-color: var(--text-color-dark);
-    color: var(--text-color-dark);
-}
-
 .actions button {
     background-color: var(--button-background-color);
     border: none;
@@ -116,25 +88,40 @@ body[data-theme='dark'] .scores {
 .log {
     margin-top: 1.5rem;
     text-align: left;
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    li {
+        background: var(--log-background-color-light);
+        border-left: 5px solid var(--log-border-color-light);
+        margin-bottom: .25rem;
+        padding: .5rem;
+        transition: background-color 0.3s, border-left-color 0.3s;
+    }
 }
 
-.log ul {
-    list-style-type: none;
-    padding: 0;
-}
+/* Dark mode styles */
+body[data-theme='dark'] {
+    background-color: var(--background-color-dark);
+    color: var(--text-color-dark);
 
-.log li {
-    margin-bottom: .25rem;
-    padding: .5rem;
-    transition: background-color 0.3s, border-left-color 0.3s;
-}
+    #theme-switch {
+        border-color: var(--text-color-dark);
+        color: var(--text-color-dark);
+    }
 
-body[data-theme='light'] .log li {
-    background: var(--log-background-color-light);
-    border-left: 5px solid var(--log-border-color-light);
-}
+    h1 { color: var(--h1-color-dark); }
 
-body[data-theme='dark'] .log li {
-    background: var(--log-background-color-dark);
-    border-left: 5px solid var(--log-border-color-dark);
+    .scores {
+        border-color: var(--text-color-dark);
+        color: var(--text-color-dark);
+    }
+
+    .log li {
+        background: var(--log-background-color-dark);
+        border-left: 5px solid var(--log-border-color-dark);
+    }
 }