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/ToggleIndexes.vue

@@ -1,19 +1,53 @@
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import Switch from './Switch.vue'
 
-const toggleIndexes = () => {
-  const root = document.documentElement
-  const enabling = !root.classList.contains('indexes-only')
-  root.classList.toggle('indexes-only')
+const isOn = ref(false)
 
-  if (enabling && root.classList.contains('starred-only')) {
-    root.classList.remove('starred-only')
+const syncState = () => {
+  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>