diff --git a/docs/.vitepress/theme/components/ThemeDropdown.vue b/docs/.vitepress/theme/components/ThemeDropdown.vue index cc65fd9e7..465946360 100644 --- a/docs/.vitepress/theme/components/ThemeDropdown.vue +++ b/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(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('dark') - setAmoledEnabled(false) - setMonochromeEnabled(true) - } else if (choice.isAmoled) { - setMode('dark') + setMode(choice.mode) + + if (choice.isAmoled) { setAmoledEnabled(true) - setMonochromeEnabled(false) } else { - setMode(choice.mode) - setAmoledEnabled(false) - setMonochromeEnabled(false) + // Only disable AMOLED if we are explicitly switching away from it + // But wait, if we switch to 'monochrome', 'amoled' flag might still be true? + // 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) { - return current === 'dark' && monochromeEnabled.value + if (choice.mode === 'monochrome') { + 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) => { diff --git a/docs/.vitepress/theme/themes/themeHandler.ts b/docs/.vitepress/theme/themes/themeHandler.ts index 6294a0475..487429693 100644 --- a/docs/.vitepress/theme/themes/themeHandler.ts +++ b/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({ @@ -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 - if (mode === 'dark' && this.monochromeEnabled.value) { + // Add monochrome class if enabled + 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 } diff --git a/docs/.vitepress/theme/themes/types.ts b/docs/.vitepress/theme/themes/types.ts index de54fa80a..9709c020d 100644 --- a/docs/.vitepress/theme/themes/types.ts +++ b/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)