refactor: implement dedicated monochrome mode

docs/.vitepress/theme/components/ThemeDropdown.vue

@@ -3,7 +3,7 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useTheme } from '../themes/themeHandler'
 import type { DisplayMode } from '../themes/types'
 
-const { mode, setMode, state, amoledEnabled, setAmoledEnabled, monochromeEnabled, setMonochromeEnabled } = useTheme()
+const { mode, setMode, state, amoledEnabled, setAmoledEnabled } = useTheme()
 
 const isOpen = ref(false)
 const dropdownRef = ref<HTMLElement | null>(null)
@@ -13,25 +13,24 @@ interface ModeChoice {
   label: string
   icon: string
   isAmoled?: boolean
-  isMonochrome?: boolean
 }
 
 const modeChoices: ModeChoice[] = [
   { mode: 'light', label: 'Light', icon: 'i-ph-sun-duotone' },
   { mode: 'dark', label: 'Dark', icon: 'i-ph-moon-duotone' },
   { mode: 'dark', label: 'AMOLED', icon: 'i-ph-moon-stars-duotone', isAmoled: true },
-  { mode: 'dark', label: 'Monochrome', icon: 'i-ph-circle-half-tilt-duotone', isMonochrome: true }
+  { mode: 'monochrome', label: 'Monochrome', icon: 'i-ph-circle-half-tilt-duotone' }
 ]
 
 const currentChoice = computed(() => {
   const current = (mode && (mode as any).value) ? (mode as any).value : 'light'
-  if (current === 'dark' && monochromeEnabled.value) {
+  if (current === 'monochrome') {
     return modeChoices[3] // Monochrome option
   }
   if (current === 'dark' && amoledEnabled.value) {
     return modeChoices[2] // AMOLED option
   }
-  return modeChoices.find(choice => choice.mode === current && !choice.isAmoled && !choice.isMonochrome) || modeChoices[0]
+  return modeChoices.find(choice => choice.mode === current && !choice.isAmoled) || modeChoices[0]
 })
 
 const toggleDropdown = () => {
@@ -39,31 +38,32 @@ const toggleDropdown = () => {
 }
 
 const selectMode = (choice: ModeChoice) => {
-  if (choice.isMonochrome) {
+  setMode(choice.mode)
-    setMode('dark')
+  
-    setAmoledEnabled(false)
+  if (choice.isAmoled) {
-    setMonochromeEnabled(true)
-  } else if (choice.isAmoled) {
-    setMode('dark')
     setAmoledEnabled(true)
-    setMonochromeEnabled(false)
   } else {
-    setMode(choice.mode)
+    // Only disable AMOLED if we are explicitly switching away from it
-    setAmoledEnabled(false)
+    // But wait, if we switch to 'monochrome', 'amoled' flag might still be true?
-    setMonochromeEnabled(false)
+    // It doesn't matter because amoled is only checked if mode is 'dark'.
+    // However, if we switch back to 'dark', should it be amoled or not?
+    // Standard behavior: clicking 'Dark' (non-amoled) disables amoled.
+    if (choice.mode === 'dark') {
+       setAmoledEnabled(false)
+    }
   }
   isOpen.value = false
 }
 
 const isActiveChoice = (choice: ModeChoice) => {
   const current = (mode && (mode as any).value) ? (mode as any).value : 'light'
-  if (choice.isMonochrome) {
+  if (choice.mode === 'monochrome') {
-    return current === 'dark' && monochromeEnabled.value
+     return current === 'monochrome'
   }
   if (choice.isAmoled) {
     return current === 'dark' && amoledEnabled.value
   }
-  return choice.mode === current && !choice.isAmoled && !choice.isMonochrome && !amoledEnabled.value && !monochromeEnabled.value
+  return choice.mode === current && !choice.isAmoled && !amoledEnabled.value
 }
 
 const handleClickOutside = (event: MouseEvent) => {

docs/.vitepress/theme/themes/themeHandler.ts

@@ -21,7 +21,6 @@ import { themeRegistry } from './configs'
 const STORAGE_KEY_THEME = 'vitepress-theme-name'
 const STORAGE_KEY_MODE = 'vitepress-display-mode'
 const STORAGE_KEY_AMOLED = 'vitepress-amoled-enabled'
-const STORAGE_KEY_MONOCHROME = 'vitepress-monochrome-enabled'
 
 export class ThemeHandler {
   private state = ref<ThemeState>({
@@ -30,7 +29,6 @@ export class ThemeHandler {
     theme: null
   })
   private amoledEnabled = ref(false)
-  private monochromeEnabled = ref(false)
 
   constructor() {
     this.initializeTheme()
@@ -43,7 +41,6 @@ export class ThemeHandler {
     const savedTheme = localStorage.getItem(STORAGE_KEY_THEME) || 'color-swarm'
     const savedMode = localStorage.getItem(STORAGE_KEY_MODE) as DisplayMode | null
     const savedAmoled = localStorage.getItem(STORAGE_KEY_AMOLED) === 'true'
-    const savedMonochrome = localStorage.getItem(STORAGE_KEY_MONOCHROME) === 'true'
 
     if (themeRegistry[savedTheme]) {
       this.state.value.currentTheme = savedTheme
@@ -52,7 +49,6 @@ export class ThemeHandler {
 
     // Set amoled preference
     this.amoledEnabled.value = savedAmoled
-    this.monochromeEnabled.value = savedMonochrome
 
     // Set mode
     if (savedMode) {
@@ -84,8 +80,10 @@ export class ThemeHandler {
 
     // Is this the WORST fix of all time???
     const root = document.documentElement
-    const isMonochrome = currentMode === 'dark' && this.monochromeEnabled.value
+    const isMonochrome = currentMode === 'monochrome'
 
+    // Monochrome overrides everything to pure black/white
+    // Standard Dark/Amoled logic applies otherwise
     const bgColor = isMonochrome ? '#000000' : currentMode === 'dark' && this.amoledEnabled.value ? '#000000' : currentMode === 'dark' ? '#1A1A1A' : '#f8fafc'
     root.style.setProperty('--vp-c-bg', bgColor)
 
@@ -119,9 +117,11 @@ export class ThemeHandler {
       root.classList.add('amoled')
     }
 
-    // Add monochrome class if enabled in dark mode
+    // Add monochrome class if enabled
-    if (mode === 'dark' && this.monochromeEnabled.value) {
+    if (mode === 'monochrome') {
       root.classList.add('monochrome')
+      // Also add dark class because monochrome is effectively a high contrast dark mode
+      root.classList.add('dark')
     }
   }
 
@@ -141,7 +141,7 @@ export class ThemeHandler {
     let bgAltColor = colors.bgAlt
     let bgElvColor = colors.bgElv
 
-    const isMonochrome = this.state.value.currentMode === 'dark' && this.monochromeEnabled.value
+    const isMonochrome = this.state.value.currentMode === 'monochrome'
 
     if (this.state.value.currentMode === 'dark' && this.amoledEnabled.value) {
       bgColor = '#000000'
@@ -334,20 +334,6 @@ export class ThemeHandler {
     this.setMode(newMode)
   }
 
-  public setMonochromeEnabled(enabled: boolean) {
-    this.monochromeEnabled.value = enabled
-    localStorage.setItem(STORAGE_KEY_MONOCHROME, enabled.toString())
-    this.applyTheme()
-  }
-
-  public getMonochromeEnabled() {
-    return this.monochromeEnabled.value
-  }
-
-  public isMonochromeMode() {
-    return this.state.value.currentMode === 'dark' && this.monochromeEnabled.value
-  }
-
   public setAmoledEnabled(enabled: boolean) {
     this.amoledEnabled.value = enabled
     localStorage.setItem(STORAGE_KEY_AMOLED, enabled.toString())
@@ -412,6 +398,10 @@ export class ThemeHandler {
   public isAmoledMode() {
     return this.state.value.currentMode === 'dark' && this.amoledEnabled.value
   }
+
+  public isMonochromeMode() {
+    return this.state.value.currentMode === 'monochrome'
+  }
 }
 
 // Global theme handler instance
@@ -447,8 +437,6 @@ export function useTheme() {
     amoledEnabled: handler.getAmoledEnabledRef(),
     setAmoledEnabled: (enabled: boolean) => handler.setAmoledEnabled(enabled),
     toggleAmoled: () => handler.toggleAmoled(),
-    monochromeEnabled: handler.getMonochromeEnabled(),
-    setMonochromeEnabled: (enabled: boolean) => handler.setMonochromeEnabled(enabled),
     isMonochromeMode: () => handler.isMonochromeMode(),
     state
   }

docs/.vitepress/theme/themes/types.ts

@@ -14,7 +14,7 @@
  *  limitations under the License.
  */
 
-export type DisplayMode = 'light' | 'dark'
+export type DisplayMode = 'light' | 'dark' | 'monochrome'
 
 export interface ModeColors {
   // Brand colors (optional - if not specified, ColorPicker values are used)