diff --git a/docs/.vitepress/theme/components/ThemeDropdown.vue b/docs/.vitepress/theme/components/ThemeDropdown.vue index 465946360..e7f2d6994 100644 --- a/docs/.vitepress/theme/components/ThemeDropdown.vue +++ b/docs/.vitepress/theme/components/ThemeDropdown.vue @@ -18,15 +18,11 @@ interface ModeChoice { 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: 'monochrome', label: 'Monochrome', icon: 'i-ph-circle-half-tilt-duotone' } + { mode: 'dark', label: 'AMOLED', icon: 'i-ph-moon-stars-duotone', isAmoled: true } ] const currentChoice = computed(() => { const current = (mode && (mode as any).value) ? (mode as any).value : 'light' - if (current === 'monochrome') { - return modeChoices[3] // Monochrome option - } if (current === 'dark' && amoledEnabled.value) { return modeChoices[2] // AMOLED option } @@ -38,28 +34,18 @@ const toggleDropdown = () => { } const selectMode = (choice: ModeChoice) => { - setMode(choice.mode) - if (choice.isAmoled) { + setMode('dark') setAmoledEnabled(true) } else { - // 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) - } + setMode(choice.mode) + setAmoledEnabled(false) } isOpen.value = false } const isActiveChoice = (choice: ModeChoice) => { const current = (mode && (mode as any).value) ? (mode as any).value : 'light' - if (choice.mode === 'monochrome') { - return current === 'monochrome' - } if (choice.isAmoled) { return current === 'dark' && amoledEnabled.value } diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss index 8ca7d8560..6c1b54432 100644 --- a/docs/.vitepress/theme/style.scss +++ b/docs/.vitepress/theme/style.scss @@ -138,13 +138,17 @@ */ :root { --vp-home-hero-name-color: transparent; - --vp-home-hero-name-background: -webkit-linear-gradient(120deg, - #c4b5fd 30%, - #7bc5e4); + --vp-home-hero-name-background: -webkit-linear-gradient( + 120deg, + #c4b5fd 30%, + #7bc5e4 + ); - --vp-home-hero-image-background-image: linear-gradient(-45deg, - #c4b5fd 50%, - #47caff 50%); + --vp-home-hero-image-background-image: linear-gradient( + -45deg, + #c4b5fd 50%, + #47caff 50% + ); --vp-home-hero-image-filter: blur(44px); } @@ -219,7 +223,6 @@ animation: nprogress-spinner 400ms linear infinite; } } - .nprogress-custom-parent { overflow: hidden; position: relative; @@ -250,7 +253,7 @@ } } -#VPContent strong>a { +#VPContent strong > a { font-weight: bold; } @@ -355,20 +358,4 @@ mask-size: 100% 100%; background-color: currentColor; color: inherit; -} - -/* Monochrome Specifics */ -html.monochrome { - filter: grayscale(100%); - - img, - video, - iframe { - filter: grayscale(100%); - } - - ::selection { - background-color: #333; - color: #fff; - } } \ No newline at end of file diff --git a/docs/.vitepress/theme/themes/themeHandler.ts b/docs/.vitepress/theme/themes/themeHandler.ts index 487429693..9016cec48 100644 --- a/docs/.vitepress/theme/themes/themeHandler.ts +++ b/docs/.vitepress/theme/themes/themeHandler.ts @@ -66,8 +66,8 @@ export class ThemeHandler { if (!localStorage.getItem(STORAGE_KEY_MODE)) { this.state.value.currentMode = e.matches ? 'dark' : 'light' this.applyTheme() - } - else { + } + else { this.applyTheme() } }) @@ -80,17 +80,11 @@ export class ThemeHandler { // Is this the WORST fix of all time??? const root = document.documentElement - 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' + const bgColor = currentMode === 'dark' && this.amoledEnabled.value ? '#000000' : currentMode === 'dark' ? '#1A1A1A' : '#f8fafc' root.style.setProperty('--vp-c-bg', bgColor) - - const bgAltColor = isMonochrome ? '#000000' : currentMode === 'dark' && this.amoledEnabled.value ? '#000000' : currentMode === 'dark' ? '#171717' : '#eef2f5' + const bgAltColor = currentMode === 'dark' && this.amoledEnabled.value ? '#000000' : currentMode === 'dark' ? '#171717' : '#eef2f5' root.style.setProperty('--vp-c-bg-alt', bgAltColor) - - const bgElvColor = isMonochrome ? 'rgba(0, 0, 0, 0.9)' : currentMode === 'dark' && this.amoledEnabled.value ? 'rgba(0, 0, 0, 0.9)' : currentMode === 'dark' ? '#1a1a1acc' : 'rgba(255, 255, 255, 0.8)' + const bgElvColor = currentMode === 'dark' && this.amoledEnabled.value ? 'rgba(0, 0, 0, 0.9)' : currentMode === 'dark' ? '#1a1a1acc' : 'rgba(255, 255, 255, 0.8)' root.style.setProperty('--vp-c-bg-elv', bgElvColor) this.applyDOMClasses(currentMode) @@ -105,24 +99,17 @@ export class ThemeHandler { private applyDOMClasses(mode: DisplayMode) { const root = document.documentElement - + // Remove all mode classes - root.classList.remove('dark', 'light', 'amoled', 'monochrome') - + root.classList.remove('dark', 'light', 'amoled') + // Add current mode class root.classList.add(mode) - + // Add amoled class if enabled in dark mode if (mode === 'dark' && this.amoledEnabled.value) { root.classList.add('amoled') } - - // 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') - } } private applyCSSVariables(colors: ModeColors, theme: Theme) { @@ -140,32 +127,16 @@ export class ThemeHandler { let bgColor = colors.bg let bgAltColor = colors.bgAlt let bgElvColor = colors.bgElv - - const isMonochrome = this.state.value.currentMode === 'monochrome' - + if (this.state.value.currentMode === 'dark' && this.amoledEnabled.value) { bgColor = '#000000' bgAltColor = '#000000' bgElvColor = 'rgba(0, 0, 0, 0.9)' } - if (isMonochrome) { - bgColor = '#000000' - bgAltColor = '#000000' - bgElvColor = 'rgba(0, 0, 0, 0.9)' - } - - // Apply brand colors only if theme specifies them OR if monochrome to override - if (isMonochrome) { - root.style.setProperty('--vp-c-brand-1', '#d4d4d4') - root.style.setProperty('--vp-c-brand-2', '#a3a3a3') - root.style.setProperty('--vp-c-brand-3', '#737373') - root.style.setProperty('--vp-c-brand-soft', '#525252') - - root.style.setProperty('--vp-c-text-1', '#ffffff') - root.style.setProperty('--vp-c-text-2', '#a3a3a3') - root.style.setProperty('--vp-c-text-3', '#737373') - } else if (colors.brand && (colors.brand[1] || colors.brand[2] || colors.brand[3] || colors.brand.soft)) { + // Apply brand colors only if theme specifies them + // Otherwise, remove inline styles to let ColorPicker CSS take effect + if (colors.brand && (colors.brand[1] || colors.brand[2] || colors.brand[3] || colors.brand.soft)) { if (colors.brand[1]) root.style.setProperty('--vp-c-brand-1', colors.brand[1]) if (colors.brand[2]) root.style.setProperty('--vp-c-brand-2', colors.brand[2]) if (colors.brand[3]) root.style.setProperty('--vp-c-brand-3', colors.brand[3]) @@ -187,12 +158,11 @@ export class ThemeHandler { } // Apply text colors - always set them to ensure proper theme switching - // Except whenever Monochrome is active, we handled text colors above - if (!isMonochrome && colors.text) { + if (colors.text) { if (colors.text[1]) root.style.setProperty('--vp-c-text-1', colors.text[1]) if (colors.text[2]) root.style.setProperty('--vp-c-text-2', colors.text[2]) if (colors.text[3]) root.style.setProperty('--vp-c-text-3', colors.text[3]) - } else if (!isMonochrome) { + } else { // Remove inline styles if theme doesn't specify text colors // This allows CSS variables from style.scss to take effect root.style.removeProperty('--vp-c-text-1') @@ -314,7 +284,7 @@ export class ThemeHandler { this.state.value.theme = themeRegistry[themeName] localStorage.setItem(STORAGE_KEY_THEME, themeName) this.applyTheme() - + // Force re-apply ColorPicker colors if theme doesn't specify brand colors this.ensureColorPickerColors() } @@ -327,10 +297,10 @@ export class ThemeHandler { public toggleMode() { const currentMode = this.state.value.currentMode - + // Toggle between light and dark const newMode: DisplayMode = currentMode === 'light' ? 'dark' : 'light' - + this.setMode(newMode) } @@ -398,10 +368,6 @@ 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 @@ -437,7 +403,6 @@ export function useTheme() { amoledEnabled: handler.getAmoledEnabledRef(), setAmoledEnabled: (enabled: boolean) => handler.setAmoledEnabled(enabled), toggleAmoled: () => handler.toggleAmoled(), - isMonochromeMode: () => handler.isMonochromeMode(), state } } \ No newline at end of file diff --git a/docs/.vitepress/theme/themes/types.ts b/docs/.vitepress/theme/themes/types.ts index 9709c020d..de54fa80a 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' | 'monochrome' +export type DisplayMode = 'light' | 'dark' export interface ModeColors { // Brand colors (optional - if not specified, ColorPicker values are used)