Fix desync state + better contrast (#4553)

* Improve toggle contrast in monochrome mode

* Fix monochrome toggle contrast

* Dim disabled toggle in dark mode

docs/.vitepress/theme/components/Switch.vue

@@ -1,14 +1,26 @@
-<script setup>
+<script setup lang="ts">
-import { Switch } from '@headlessui/vue'
+import { Switch as HeadlessSwitch } from '@headlessui/vue'
-import { ref } from 'vue'
 
-const enabled = ref(false)
+const props = defineProps<{
+  modelValue: boolean
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
 </script>
 
 <template>
-  <Switch v-model="enabled" class="switch" :class="{ enabled }">
+  <HeadlessSwitch
+    :model-value="props.modelValue"
+    :disabled="props.disabled"
+    class="switch"
+    :class="{ enabled: props.modelValue, disabled: props.disabled }"
+    @update:modelValue="emit('update:modelValue', $event)"
+  >
     <span class="thumb" />
-  </Switch>
+  </HeadlessSwitch>
 </template>
 
 <style>
@@ -33,8 +45,18 @@ const enabled = ref(false)
 .switch.disabled {
   opacity: 0.5;
   pointer-events: none;
-  background-color: var(--vp-c-bg-soft);
+  background-color: var(--vp-c-bg-soft, #2f2f2f);
-  border-color: var(--vp-c-divider);
+  border-color: var(--vp-c-divider, #666);
+}
+
+.switch.disabled .thumb {
+  background-color: #fff;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), var(--vp-shadow-1);
+}
+
+.dark .switch.disabled {
+  background-color: #2f2f2f;
+  border-color: #7d7d7d;
 }
 </style>
 
@@ -50,7 +72,7 @@ const enabled = ref(false)
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  box-shadow: var(--vp-shadow-1);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), var(--vp-shadow-1);
 }
 
 .switch.enabled .thumb {

docs/.vitepress/theme/components/ToggleIndexes.vue

@@ -1,19 +1,53 @@
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import Switch from './Switch.vue'
 
-const toggleIndexes = () => {
+const isOn = ref(false)
-  const root = document.documentElement
-  const enabling = !root.classList.contains('indexes-only')
-  root.classList.toggle('indexes-only')
 
-  if (enabling && root.classList.contains('starred-only')) {
+const syncState = () => {
-    root.classList.remove('starred-only')
+  isOn.value = document.documentElement.classList.contains('indexes-only')
+}
+
+let observer: MutationObserver | undefined
+
+onMounted(() =>
+  (observer = new MutationObserver(syncState)).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class']
+  })
+)
+
+onMounted(syncState)
+
+onBeforeUnmount(() => observer?.disconnect())
+
+const toggleIndexes = (value: boolean) => {
+  const root = document.documentElement
+  const enabling = value
+  const wasStarred = root.classList.contains('starred-only')
+
+  root.classList.toggle('indexes-only', enabling)
+
+  if (enabling) {
+    root.dataset.starredWasOn = wasStarred ? 'true' : 'false'
+
+    if (wasStarred) {
+      root.classList.remove('starred-only')
+    }
+  } else {
+    if (root.dataset.starredWasOn === 'true') {
+      root.classList.add('starred-only')
+    }
+
+    delete root.dataset.starredWasOn
   }
+
+  isOn.value = enabling
 }
 </script>
 
 <template>
-  <Switch @click="toggleIndexes()" />
+  <Switch v-model="isOn" @update:modelValue="toggleIndexes" />
 </template>
 
 <style>

docs/.vitepress/theme/components/ToggleStarred.vue

@@ -3,43 +3,46 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 import Switch from './Switch.vue'
 
 const isDisabled = ref(false)
-const switchKey = ref(0)
+const isOn = ref(false)
 
-const syncDisabled = () => {
+const syncState = () => {
   const root = document.documentElement
-  const disabled = root.classList.contains('indexes-only')
+  isDisabled.value = root.classList.contains('indexes-only')
-  isDisabled.value = disabled
+  isOn.value = root.classList.contains('starred-only')
-
-  if (disabled && root.classList.contains('starred-only')) {
-    root.classList.remove('starred-only')
-    switchKey.value += 1
-  }
 }
 
 let observer: MutationObserver | undefined
 
 onMounted(() =>
-  (observer = new MutationObserver(syncDisabled)).observe(document.documentElement, {
+  (observer = new MutationObserver(syncState)).observe(document.documentElement, {
     attributes: true,
     attributeFilter: ['class']
   })
 )
 
-onMounted(syncDisabled)
+onMounted(syncState)
 
 onBeforeUnmount(() => observer?.disconnect())
 
-const toggleStarred = () => {
+const toggleStarred = (value: boolean) => {
-  if (isDisabled.value) return
+  if (isDisabled.value) {
-  document.documentElement.classList.toggle('starred-only')
+    isOn.value = document.documentElement.classList.contains('starred-only')
+    return
+  }
+
+  const root = document.documentElement
+  root.classList.toggle('starred-only', value)
+  root.dataset.starredWasOn = value ? 'true' : 'false'
+  isOn.value = value
 }
 </script>
 
 <template>
   <Switch
-    :key="switchKey"
+    v-model="isOn"
+    :disabled="isDisabled"
     :class="{ disabled: isDisabled }"
-    @click="toggleStarred()"
+    @update:modelValue="toggleStarred"
   />
 </template>
 

docs/.vitepress/theme/style.scss

@@ -88,6 +88,31 @@
   img:not(.VPImage) {
     filter: grayscale(100%);
   }
+
+  .switch,
+  .switch * {
+    filter: none;
+  }
+
+  .switch {
+    background-color: #000;
+    border-color: #5a5a5a;
+  }
+
+  .switch .thumb {
+    background-color: #fff !important;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), var(--vp-shadow-1);
+  }
+
+  .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);
+  }
 }
 
 .vp-doc a {