From 04a8a15f237b1811fdb2dcb1a4521e75e53ad7b1 Mon Sep 17 00:00:00 2001
From: lukasadrion <lukas.adrion@uni-ulm.de>
Date: Sat, 6 Dec 2025 16:39:33 +0100
Subject: [PATCH] fix light and darkmode

---
 src/app/app.component.css                     |  8 ++++++--
 .../keyboards/circle-keyboard.component.css   | 20 ++++++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index f9a4cda..7f3b095 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -103,6 +103,11 @@ button {
   button:active {
     background-color: #0f0f0f69;
   }
+  
+  .key-button {
+    background: rgb(58, 56, 56);
+    color: white;
+  }
 }
 
 .keyboard {
@@ -128,13 +133,12 @@ button {
   font-weight: bold;
   border: 2px solid #ddd;
   border-radius: 8px;
-  background: rgb(58, 56, 56);
   cursor: pointer;
   transition: all 0.1s;
 }
 
 .key-button:hover {
-  background: #979797;
+  background: #b1b1b1;
   border-color: #3d3d3d;
 }
 
diff --git a/src/app/keyboards/circle-keyboard.component.css b/src/app/keyboards/circle-keyboard.component.css
index f1791d8..c61d1a4 100644
--- a/src/app/keyboards/circle-keyboard.component.css
+++ b/src/app/keyboards/circle-keyboard.component.css
@@ -21,6 +21,7 @@
 .center-section {
   position: absolute;
   background: white;
+  color: #0f0f0f;
   font-size: 20px;
   font-weight: bold;
   cursor: pointer;
@@ -105,11 +106,12 @@
   border-radius: 50%;
   border: 2px solid #ddd;
   background: white;
+  color: #0f0f0f;
   font-size: 24px;
   font-weight: bold;
   cursor: pointer;
   transition: background 0.2s, border-color 0.2s;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
   z-index: 1;
 }
 
@@ -138,10 +140,22 @@
 }
 
 .circle-button:hover, .center-section:hover {
-  background: #e8e8e8;
-  border-color: #999;
+  background: #b1b1b1;
+  border-color: #3d3d3d;
 }
 
 .circle-button:active, .center-section:active {
   background: #d0d0d0;
 }
+
+@media (prefers-color-scheme: dark) {
+  .center-section {
+    background: rgb(58, 56, 56);
+    color: white;
+  }
+  
+  .circle-button {
+    background: rgb(58, 56, 56);
+    color: white;
+  }
+}