Fix monochrome toggle contrast

This commit is contained in:
Eason Li 2026-01-06 10:27:56 +08:00
parent 87f17bcf61
commit b5fccb0812
2 changed files with 17 additions and 12 deletions

View file

@ -50,8 +50,8 @@ const emit = defineEmits<{
} }
.switch.disabled .thumb { .switch.disabled .thumb {
background-color: #000; background-color: #fff;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), var(--vp-shadow-1); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), var(--vp-shadow-1);
} }
.dark .switch.disabled { .dark .switch.disabled {
@ -67,12 +67,12 @@ const emit = defineEmits<{
.thumb { .thumb {
display: inline-block; display: inline-block;
background-color: #000; background-color: #fff;
transition: transform 0.25s; transition: transform 0.25s;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08), var(--vp-shadow-1); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), var(--vp-shadow-1);
} }
.switch.enabled .thumb { .switch.enabled .thumb {

View file

@ -94,19 +94,24 @@
filter: none; filter: none;
} }
.switch .thumb { .switch {
background-color: #000 !important; background-color: #000;
border-color: #5a5a5a;
} }
/* Keep sidebar toggles legible in monochrome mode */ .switch .thumb {
.switch, background-color: #fff !important;
.switch * { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), var(--vp-shadow-1);
filter: none;
} }
/* Ensure toggle thumb stays black in grayscale */ .switch.enabled {
.switch .thumb { background-color: #fff;
border-color: #5a5a5a;
}
.switch.enabled .thumb {
background-color: #000 !important; background-color: #000 !important;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), var(--vp-shadow-1);
} }
} }