From df3c51e125f452a7e8aa87887afe42c56b05d230 Mon Sep 17 00:00:00 2001 From: DarshanKudrigi Date: Wed, 14 Oct 2026 23:30:03 +0530 Subject: [PATCH 1/3] fix: improve theme toggle visibility in light mode --- theme/css/footer.css | 100 ++++++++++++++++++++++++------------------- 1 file changed, 56 insertions(+), 44 deletions(-) diff --git a/theme/css/footer.css b/theme/css/footer.css index ae68c5505..399b1e59d 100644 --- a/theme/css/footer.css +++ b/theme/css/footer.css @@ -17,59 +17,71 @@ footer.footer{ } /* ========== Color mode toggle (footer) ========== */ -.color_mode{ - display:flex; - align-items:center; - min-height:28px; +.color_mode { + display: flex; + align-items: center; + min-height: 28px; } /* The switch “track” */ -.color_choice{ - width:48px; - height:24px; - appearance:none; - -webkit-appearance:none; - background:rgba(255,255,255,.12); - border:1px solid rgba(255,255,255,.18); - border-radius:999px; - position:relative; - cursor:pointer; - outline:none; - display:inline-block; +.color_choice { + width: 48px; + height: 24px; + appearance: none; + -webkit-appearance: none; + background: #fff; + border: 2px solid #000; + border-radius: 999px; + position: relative; + cursor: pointer; + outline: none; + display: inline-block; + box-sizing: border-box; + transition: + border-color 0.22s ease, + background 0.22s ease; +} + +/* Accessible focus state */ +.color_choice:focus-visible { + outline: 2px solid var(--brand-strong); + outline-offset: 3px; } /* The “knob” */ -.color_choice::after{ - content:""; - position:absolute; - top:2px; - left:2px; - width:20px; - height:20px; - border-radius:50%; - background:#fff; - box-shadow:0 2px 8px rgba(0,0,0,.25); - transform:translateX(0); - transition:transform .22s ease, background .22s ease; +.color_choice::after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + width: 16px; + height: 16px; + border-radius: 50%; + background: #000; + transform: translateX(0); + transition: + transform 0.22s ease, + background 0.22s ease; } -/* Dark mode: move knob right */ -html[data-mode="dim"] .color_choice::after{ - transform:translateX(24px); +/* Dark mode: track and knob */ +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::after { + background: #fff; + transform: translateX(24px); } -html[data-mode="dim"] .color_choice:before{ - content:"🌙"; - left:auto; - right:6px; + +@media (prefers-color-scheme: dark) { + html:not([data-mode="lit"]) .color_choice { + background: transparent; + border-color: #fff; + } + html:not([data-mode="lit"]) .color_choice::after { + background: #fff; + transform: translateX(24px); + } } From 56c472ea8b5b5c7528416a4a7a598e33e401260d Mon Sep 17 00:00:00 2001 From: DarshanKudrigi Date: Wed, 14 Oct 2026 23:41:04 +0530 Subject: [PATCH 2/3] fix: improve theme toggle visibility in light mode --- theme/css/footer.css | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/theme/css/footer.css b/theme/css/footer.css index 399b1e59d..5ea3ac880 100644 --- a/theme/css/footer.css +++ b/theme/css/footer.css @@ -85,3 +85,34 @@ html[data-mode="dim"] .color_choice::after { transform: translateX(24px); } } + + +/* footer.footer{ border-top: 1px solid var(--nav-border); background: rgba(255,255,255,.02); } +.footer_inner{ display: flex; gap: 1rem; align-items: center; justify-content: space-between; } +.badge-updated{ background: rgba(255,255,255,.08); color: var(--muted); border-radius: .5rem; padding: .35rem .6rem; } + +.color_mode{ display:flex; align-items:center; min-height:28px; } + +/* Switch track */ +.color_choice{ width:48px; height:24px; appearance:none; -webkit-appearance:none; + background:#fff; border:2px solid #000; border-radius:999px; + position:relative; cursor:pointer; outline:none; + display:inline-block; box-sizing:border-box; + transition:border-color .22s ease, background .22s ease; +} +.color_choice:focus-visible{ outline:2px solid var(--brand-strong); outline-offset:3px; } + +/* Knob */ +.color_choice::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; + border-radius:50%; background:#000; transform:translateX(0); + transition:transform .22s ease, background .22s ease; +} + +/* Dim mode = “light on” */ +html[data-mode="dim"] .color_choice{ background:transparent; border-color:#fff; } +html[data-mode="dim"] .color_choice::after{ background:#fff; transform:translateX(24px); } + +@media (prefers-color-scheme:dark){ + html:not([data-mode="lit"]) .color_choice{ background:transparent; border-color:#fff; } + html:not([data-mode="lit"]) .color_choice::after{ background:#fff; transform:translateX(24px); } +} From 37666006a286a7b9fc924fb054ac3edcb0039caa Mon Sep 17 00:00:00 2001 From: DarshanKudrigi Date: Wed, 14 Oct 2026 23:58:13 +0530 Subject: [PATCH 3/3] fix: improve theme toggle visibility Final in light mode --- theme/css/footer.css | 44 +------------------------------------------- 1 file changed, 1 insertion(+), 43 deletions(-) diff --git a/theme/css/footer.css b/theme/css/footer.css index 5ea3ac880..3a31be890 100644 --- a/theme/css/footer.css +++ b/theme/css/footer.css @@ -73,46 +73,4 @@ html[data-mode="dim"] .color_choice { html[data-mode="dim"] .color_choice::after { background: #fff; transform: translateX(24px); -} - -@media (prefers-color-scheme: dark) { - html:not([data-mode="lit"]) .color_choice { - background: transparent; - border-color: #fff; - } - html:not([data-mode="lit"]) .color_choice::after { - background: #fff; - transform: translateX(24px); - } -} - - -/* footer.footer{ border-top: 1px solid var(--nav-border); background: rgba(255,255,255,.02); } -.footer_inner{ display: flex; gap: 1rem; align-items: center; justify-content: space-between; } -.badge-updated{ background: rgba(255,255,255,.08); color: var(--muted); border-radius: .5rem; padding: .35rem .6rem; } - -.color_mode{ display:flex; align-items:center; min-height:28px; } - -/* Switch track */ -.color_choice{ width:48px; height:24px; appearance:none; -webkit-appearance:none; - background:#fff; border:2px solid #000; border-radius:999px; - position:relative; cursor:pointer; outline:none; - display:inline-block; box-sizing:border-box; - transition:border-color .22s ease, background .22s ease; -} -.color_choice:focus-visible{ outline:2px solid var(--brand-strong); outline-offset:3px; } - -/* Knob */ -.color_choice::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; - border-radius:50%; background:#000; transform:translateX(0); - transition:transform .22s ease, background .22s ease; -} - -/* Dim mode = “light on” */ -html[data-mode="dim"] .color_choice{ background:transparent; border-color:#fff; } -html[data-mode="dim"] .color_choice::after{ background:#fff; transform:translateX(24px); } - -@media (prefers-color-scheme:dark){ - html:not([data-mode="lit"]) .color_choice{ background:transparent; border-color:#fff; } - html:not([data-mode="lit"]) .color_choice::after{ background:#fff; transform:translateX(24px); } -} +} \ No newline at end of file