my-app/src/components/layout/ThemeToggle.module.css

@@ -1,11 +1,11 @@
 .toggleButton {
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-light);
+  background-color: var(--bg-header-button);
+  border: 1px solid var(--header-button-border);
   cursor: pointer;
   padding: 0;
   border-radius: 50%;
   transition: var(--transition-fast);
-  color: var(--text-primary);
+  color: var(white);
   font-size: 1rem;
   display: flex;
   align-items: center;
@@ -17,10 +17,8 @@
 }
 
 .toggleButton:hover {
-  background-color: var(--bg-muted);
-  border-color: var(--border-medium);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-1px);
+  background-color: var(--bg-header-button-hover);
+  border-color: var(--header-button-hover-border);
 }
 
 .toggleButton:active {
@@ -29,6 +27,10 @@
 }
 
 .toggleButton:focus {
+  outline: none;
+}
+
+.toggleButton:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }

my-app/src/styles/variables.css

@@ -36,6 +36,13 @@
   --bg-secondary: #f8f8f8;
   --bg-tertiary: #fafafa;
   --bg-muted: #f0f0f0;
+
+
+  /* Header button */
+  --bg-header-button: #00366E;
+  --bg-header-button-hover: #134E8B;
+  --header-button-border: #295481;
+  --header-button-hover-border: #688EB5;
   
   /* iPhone/iPod Style Backgrounds */
   --bg-iphone-gradient: linear-gradient(to bottom, #c5ccd4, #92a5b8);
@@ -436,6 +443,12 @@
   --bg-secondary: #21211F;
   --bg-tertiary: #333;
   --bg-muted: #3a3a3a;
+
+    /* Header button */
+  --bg-header-button: #1D3854;
+  --bg-header-button-hover: #28425D;
+  --header-button-border: #2F4861;
+  --header-button-hover-border: #6E859E;
   
   /* iPhone/iPod Style Backgrounds - dark variants */
   --bg-iphone-gradient: linear-gradient(to bottom, #2a2a2a, #1a1a1a);