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 {
background-color: #000;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), var(--vp-shadow-1);
background-color: #fff;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), var(--vp-shadow-1);
}
.dark .switch.disabled {
@ -67,12 +67,12 @@ const emit = defineEmits<{
.thumb {
display: inline-block;
background-color: #000;
background-color: #fff;
transition: transform 0.25s;
width: 20px;
height: 20px;
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 {

View file

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