fix light and darkmode

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;
 }
 

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;
+  background: #b1b1b1;
-  border-color: #999;
+  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;
+  }
+}