Added Toggle Indexes (#4544)

* Add monochrome theme with grayscale filter

* Add indexes toggle and disable starred

* Keep filters mutually exclusive

docs/.vitepress/theme/components/SidebarCard.vue

@@ -4,6 +4,7 @@ import ColorPicker from './ColorPicker.vue'
 import ThemeSelector from './ThemeSelector.vue'
 import InputField from './InputField.vue'
 import ToggleStarred from './ToggleStarred.vue'
+import ToggleIndexes from './ToggleIndexes.vue'
 </script>
 
 <template>
@@ -26,6 +27,11 @@ import ToggleStarred from './ToggleStarred.vue'
         <ToggleStarred />
       </template>
     </InputField>
+    <InputField id="toggle-indexes" label="Toggle Indexes">
+      <template #display>
+        <ToggleIndexes />
+      </template>
+    </InputField>
 
     <div class="mt-4">
       <ColorPicker />

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

@@ -29,6 +29,13 @@ const enabled = ref(false)
 .switch.enabled {
   background-color: var(--vp-c-brand);
 }
+
+.switch.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  background-color: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-divider);
+}
 </style>
 
 <style scoped>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Switch from './Switch.vue'
+
+const toggleIndexes = () => {
+  const root = document.documentElement
+  const enabling = !root.classList.contains('indexes-only')
+  root.classList.toggle('indexes-only')
+
+  if (enabling && root.classList.contains('starred-only')) {
+    root.classList.remove('starred-only')
+  }
+}
+</script>
+
+<template>
+  <Switch @click="toggleIndexes()" />
+</template>
+
+<style>
+.indexes-only li:not(.index) {
+  display: none;
+}
+</style>

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

@@ -1,12 +1,46 @@
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import Switch from './Switch.vue'
 
-const toggleStarred = () =>
+const isDisabled = ref(false)
+const switchKey = ref(0)
+
+const syncDisabled = () => {
+  const root = document.documentElement
+  const disabled = root.classList.contains('indexes-only')
+  isDisabled.value = disabled
+
+  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, {
+    attributes: true,
+    attributeFilter: ['class']
+  })
+)
+
+onMounted(syncDisabled)
+
+onBeforeUnmount(() => observer?.disconnect())
+
+const toggleStarred = () => {
+  if (isDisabled.value) return
   document.documentElement.classList.toggle('starred-only')
+}
 </script>
 
 <template>
-  <Switch @click="toggleStarred()" />
+  <Switch
+    :key="switchKey"
+    :class="{ disabled: isDisabled }"
+    @click="toggleStarred()"
+  />
 </template>
 
 <style>