diff --git a/theme/css/footer.css b/theme/css/footer.css
index ae68c5505..081945ae8 100644
--- a/theme/css/footer.css
+++ b/theme/css/footer.css
@@ -29,13 +29,20 @@ footer.footer{
   height:24px;
   appearance:none;
   -webkit-appearance:none;
-  background:rgba(255,255,255,.12);
-  border:1px solid rgba(255,255,255,.18);
+  background:#fff;
+  border:2px solid #000;
   border-radius:999px;
   position:relative;
   cursor:pointer;
   outline:none;
   display:inline-block;
+  vertical-align:middle;
+  transition:background .22s ease, border-color .22s ease;
+}
+
+.color_choice:focus-visible{
+  outline:2px solid var(--brand-strong, #087fa8);
+  outline-offset:3px;
 }
 
 /* The “knob” */
@@ -44,32 +51,22 @@ footer.footer{
   position:absolute;
   top:2px;
   left:2px;
-  width:20px;
-  height:20px;
+  width:16px;
+  height:16px;
   border-radius:50%;
-  background:#fff;
-  box-shadow:0 2px 8px rgba(0,0,0,.25);
+  background:#000;
+  box-shadow:0 1px 3px rgba(0,0,0,.25);
   transform:translateX(0);
   transition:transform .22s ease, background .22s ease;
 }
 
-/* Dark mode: move knob right */
-html[data-mode="dim"] .color_choice::after{
-  transform:translateX(24px);
+/* Dark mode: move knob right with high contrast */
+html[data-mode="dim"] .color_choice{
+  background:transparent;
+  border-color:#fff;
 }
 
-/* Optional: show a subtle sun/moon via emojis (no images needed) */
-.color_choice:before{
-  content:"☀️";
-  position:absolute;
-  left:8px;
-  top:50%;
-  transform:translateY(-50%);
-  font-size:11px;
-  opacity:.8;
-}
-html[data-mode="dim"] .color_choice:before{
-  content:"🌙";
-  left:auto;
-  right:6px;
+html[data-mode="dim"] .color_choice::after{
+  background:#fff;
+  transform:translateX(24px);
 }