From e67df01479646f1885ac6db7143f0373fb63d189 Mon Sep 17 00:00:00 2001 From: land Date: Fri, 31 Oct 2025 21:25:16 +0530 Subject: [PATCH] Revert "Add AMOLED mode toggle to ColorPicker" This reverts commit 132ef4a25b3767e231e2559fc5a1cc48d7dd08a5. --- .../theme/components/ColorPicker.vue | 111 +++++++----------- 1 file changed, 40 insertions(+), 71 deletions(-) diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue index c4e21a10b..e4be89abf 100644 --- a/docs/.vitepress/theme/components/ColorPicker.vue +++ b/docs/.vitepress/theme/components/ColorPicker.vue @@ -2,7 +2,6 @@ import { colors } from '@fmhy/colors' import { useStorage, useStyleTag } from '@vueuse/core' import { watch, onMounted } from 'vue' -import Switch from './Switch.vue' // Add Halloween colors const halloweenColors = { @@ -41,7 +40,6 @@ const colorScales = [ type ColorNames = keyof typeof extendedColors const selectedColor = useStorage('preferred-color', 'halloween') -const isAmoledMode = useStorage('amoled-mode', false) const colorOptions = Object.keys(extendedColors).filter( (key) => typeof extendedColors[key as keyof typeof extendedColors] === 'object' @@ -49,7 +47,7 @@ const colorOptions = Object.keys(extendedColors).filter( const { css } = useStyleTag('', { id: 'brand-color' }) -const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { +const updateThemeColor = (colorName: ColorNames) => { const colorSet = extendedColors[colorName] const cssVars = colorScales @@ -58,30 +56,9 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { const htmlElement = document.documentElement - // Manage theme classes if (colorName === 'halloween') { + // Apply Halloween theme htmlElement.classList.add('theme-halloween') - } else { - htmlElement.classList.remove('theme-halloween') - } - - if (amoledEnabled) { - htmlElement.classList.add('theme-amoled') - } else { - htmlElement.classList.remove('theme-amoled') - } - - // Determine dark background color based on AMOLED mode - const darkBg = amoledEnabled ? '#000000' : 'rgb(26, 26, 26)' - const darkBgAlt = amoledEnabled ? '#000000' : 'rgb(23, 23, 23)' - const darkBgElv = amoledEnabled ? 'rgba(0, 0, 0, 0.9)' : 'rgba(23, 23, 23, 0.8)' - const darkBgSoft = amoledEnabled ? '#000000' : 'rgb(23, 23, 23)' - - // Apply Halloween theme backgrounds or normal backgrounds - if (colorName === 'halloween') { - const halloweenDarkBg = amoledEnabled ? '#000000' : 'rgb(15, 15, 15)' - const halloweenDarkBgAlt = amoledEnabled ? '#000000' : 'rgb(12, 12, 12)' - const halloweenDarkBgElv = amoledEnabled ? 'rgba(0, 0, 0, 0.9)' : 'rgba(12, 12, 12, 0.8)' css.value = ` :root { @@ -98,21 +75,12 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { --vp-c-brand-2: ${colorSet[500]}; --vp-c-brand-3: ${colorSet[700]}; --vp-c-brand-soft: ${colorSet[300]}; - --vp-c-bg: ${halloweenDarkBg} !important; - --vp-c-bg-alt: ${halloweenDarkBgAlt} !important; - --vp-c-bg-elv: ${halloweenDarkBgElv} !important; - --vp-c-bg-soft: ${halloweenDarkBgAlt} !important; - } - - .dark html, .dark body { - background-color: ${halloweenDarkBg} !important; - } - - .dark .VPApp, .dark .Layout, .dark .VPContent, .dark .VPHome, .dark .VPHero, .dark #app, .dark .vp-doc { - background-color: ${halloweenDarkBg} !important; } ` } else { + // Remove Halloween theme and apply other theme with normal backgrounds + htmlElement.classList.remove('theme-halloween') + css.value = ` :root { ${cssVars} @@ -132,10 +100,10 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { --vp-c-brand-2: ${colorSet[500]}; --vp-c-brand-3: ${colorSet[700]}; --vp-c-brand-soft: ${colorSet[300]}; - --vp-c-bg: ${darkBg} !important; - --vp-c-bg-alt: ${darkBgAlt} !important; - --vp-c-bg-elv: ${darkBgElv} !important; - --vp-c-bg-soft: ${darkBgSoft} !important; + --vp-c-bg: rgb(26, 26, 26) !important; + --vp-c-bg-alt: rgb(23, 23, 23) !important; + --vp-c-bg-elv: rgba(23, 23, 23, 0.8) !important; + --vp-c-bg-soft: rgb(23, 23, 23) !important; } html, body { @@ -146,45 +114,52 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { background-color: #ffffff !important; } + .VPHome { + background-color: #ffffff !important; + } + + .VPHome .VPHero { + background-color: #ffffff !important; + } + .dark html, .dark body { - background-color: ${darkBg} !important; + background-color: rgb(26, 26, 26) !important; } .dark .VPApp, .dark .Layout, .dark .VPContent, .dark .VPHome, .dark .VPHero, .dark #app, .dark .vp-doc { - background-color: ${darkBg} !important; + background-color: rgb(26, 26, 26) !important; + } + + .dark .VPHome { + background-color: rgb(26, 26, 26) !important; + } + + .dark .VPHome .VPHero { + background-color: rgb(26, 26, 26) !important; } ` } } +// Set Halloween theme ASAP if its the pref +const storedTheme = localStorage.getItem('preferred-color') +if (!storedTheme || storedTheme === '"halloween"') { + document.documentElement.classList.add('theme-halloween') +} + +// Initialize theme color +updateThemeColor(selectedColor.value) + +// halloween stuff onMounted(() => { - // Set Halloween theme ASAP if its the pref (only in browser) - if (typeof window !== 'undefined') { - const storedTheme = localStorage.getItem('preferred-color') - const storedAmoled = localStorage.getItem('amoled-mode') - - if (!storedTheme || storedTheme === '"halloween"') { - document.documentElement.classList.add('theme-halloween') - } - if (storedAmoled === 'true') { - document.documentElement.classList.add('theme-amoled') - } - } - if (selectedColor.value === 'halloween') { document.documentElement.classList.add('theme-halloween') } - if (isAmoledMode.value) { - document.documentElement.classList.add('theme-amoled') - } - // Re-apply the theme to ensure everything is initialized - updateThemeColor(selectedColor.value, isAmoledMode.value) + updateThemeColor(selectedColor.value) }) -watch([selectedColor, isAmoledMode], ([color, amoled]) => { - updateThemeColor(color, amoled) -}) +watch(selectedColor, updateThemeColor) const normalizeColorName = (colorName: string) => colorName.replaceAll(/-/g, ' ').charAt(0).toUpperCase() + @@ -196,7 +171,7 @@ const normalizeColorName = (colorName: string) =>