diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue index c4e21a10b..6cd715288 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,21 @@ 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 { +<<<<<<< HEAD +<<<<<<< HEAD +======= + // Remove Halloween theme and apply other theme with pure black backgrounds (but exclude buttons) + htmlElement.classList.remove('theme-halloween') + +>>>>>>> 081e57d5bfb921f28d4044e284e82d991442bcaf +======= + // Remove Halloween theme and apply other theme with normal backgrounds + htmlElement.classList.remove('theme-halloween') + +>>>>>>> parent of 132ef4a2 (Add AMOLED mode toggle to ColorPicker) css.value = ` :root { ${cssVars} @@ -120,10 +97,10 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { --vp-c-brand-2: ${colorSet[600]}; --vp-c-brand-3: ${colorSet[800]}; --vp-c-brand-soft: ${colorSet[400]}; - --vp-c-bg: #ffffff !important; - --vp-c-bg-alt: #f9f9f9 !important; - --vp-c-bg-elv: rgba(255, 255, 255, 0.7) !important; - --vp-c-bg-soft: #f9f9f9 !important; + --vp-c-bg: #000000 !important; + --vp-c-bg-alt: #000000 !important; + --vp-c-bg-elv: #000000 !important; + --vp-c-bg-soft: #000000 !important; } .dark { @@ -132,59 +109,160 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { --vp-c-brand-2: ${colorSet[500]}; --vp-c-brand-3: ${colorSet[700]}; --vp-c-brand-soft: ${colorSet[300]}; +<<<<<<< HEAD +<<<<<<< HEAD --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: #000000 !important; + --vp-c-bg-alt: #000000 !important; + --vp-c-bg-elv: #000000 !important; + --vp-c-bg-soft: #000000 !important; +>>>>>>> 081e57d5bfb921f28d4044e284e82d991442bcaf +======= + --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; +>>>>>>> parent of 132ef4a2 (Add AMOLED mode toggle to ColorPicker) } + /* Main page backgrounds - pure black */ html, body { + background-color: #000000 !important; + } + + /* VitePress layout containers - pure black */ + .VPApp, .Layout, .VPContent, .VPHome, .VPHero, #app { + background-color: #000000 !important; + } + +<<<<<<< HEAD +<<<<<<< HEAD +======= + .VPHome { background-color: #ffffff !important; } - .VPApp, .Layout, .VPContent, .VPHome, .VPHero, #app, .vp-doc { + .VPHome .VPHero { background-color: #ffffff !important; } +>>>>>>> parent of 132ef4a2 (Add AMOLED mode toggle to ColorPicker) .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 { +<<<<<<< HEAD background-color: ${darkBg} !important; +======= + /* Content areas - pure black */ + .vp-doc, .VPDoc, .content { + background-color: #000000 !important; + } + + /* Navigation and sidebar backgrounds - pure black */ + .VPNav, .VPSidebar, .VPLocalNav { + background-color: #000000 !important; + } + + /* Footer - pure black */ + .VPFooter { + background-color: #000000 !important; + } + + /* EXCLUDE buttons and interactive elements from black background */ + button, + .VPButton, + .vp-button, + input[type="button"], + input[type="submit"], + .copy-button, + .nav-link, + .sidebar-link, + .pager-link, + .edit-link, + .outline-link, + .search-button, + [role="button"] { + background-color: initial !important; + } + + /* Dark mode - same rules */ + .dark html, .dark body { + background-color: #000000 !important; + } + + .dark .VPApp, .dark .Layout, .dark .VPContent, .dark .VPHome, .dark .VPHero, .dark #app { + background-color: #000000 !important; + } + + .dark .vp-doc, .dark .VPDoc, .dark .content { + background-color: #000000 !important; + } + + .dark .VPNav, .dark .VPSidebar, .dark .VPLocalNav { + background-color: #000000 !important; + } + + .dark .VPFooter { + background-color: #000000 !important; + } + + /* EXCLUDE buttons in dark mode too */ + .dark button, + .dark .VPButton, + .dark .vp-button, + .dark input[type="button"], + .dark input[type="submit"], + .dark .copy-button, + .dark .nav-link, + .dark .sidebar-link, + .dark .pager-link, + .dark .edit-link, + .dark .outline-link, + .dark .search-button, + .dark [role="button"] { + background-color: initial !important; +>>>>>>> 081e57d5bfb921f28d4044e284e82d991442bcaf +======= + 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; +>>>>>>> parent of 132ef4a2 (Add AMOLED mode toggle to ColorPicker) } ` } } +// 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 +274,7 @@ const normalizeColorName = (colorName: string) =>
- +