diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue index 4760e2bdb..c4e21a10b 100644 --- a/docs/.vitepress/theme/components/ColorPicker.vue +++ b/docs/.vitepress/theme/components/ColorPicker.vue @@ -2,6 +2,7 @@ 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 = { @@ -40,6 +41,7 @@ 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' @@ -47,7 +49,7 @@ const colorOptions = Object.keys(extendedColors).filter( const { css } = useStyleTag('', { id: 'brand-color' }) -const updateThemeColor = (colorName: ColorNames) => { +const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { const colorSet = extendedColors[colorName] const cssVars = colorScales @@ -56,9 +58,30 @@ const updateThemeColor = (colorName: ColorNames) => { 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 { @@ -75,12 +98,21 @@ const updateThemeColor = (colorName: ColorNames) => { --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 pure black backgrounds (but exclude buttons) - htmlElement.classList.remove('theme-halloween') - css.value = ` :root { ${cssVars} @@ -88,10 +120,10 @@ const updateThemeColor = (colorName: ColorNames) => { --vp-c-brand-2: ${colorSet[600]}; --vp-c-brand-3: ${colorSet[800]}; --vp-c-brand-soft: ${colorSet[400]}; - --vp-c-bg: #000000 !important; - --vp-c-bg-alt: #000000 !important; - --vp-c-bg-elv: #000000 !important; - --vp-c-bg-soft: #000000 !important; + --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; } .dark { @@ -100,114 +132,59 @@ const updateThemeColor = (colorName: ColorNames) => { --vp-c-brand-2: ${colorSet[500]}; --vp-c-brand-3: ${colorSet[700]}; --vp-c-brand-soft: ${colorSet[300]}; - --vp-c-bg: #000000 !important; - --vp-c-bg-alt: #000000 !important; - --vp-c-bg-elv: #000000 !important; - --vp-c-bg-soft: #000000 !important; + --vp-c-bg: ${darkBg} !important; + --vp-c-bg-alt: ${darkBgAlt} !important; + --vp-c-bg-elv: ${darkBgElv} !important; + --vp-c-bg-soft: ${darkBgSoft} !important; } - /* Main page backgrounds - pure black */ html, body { - background-color: #000000 !important; + background-color: #ffffff !important; } - /* VitePress layout containers - pure black */ - .VPApp, .Layout, .VPContent, .VPHome, .VPHero, #app { - background-color: #000000 !important; + .VPApp, .Layout, .VPContent, .VPHome, .VPHero, #app, .vp-doc { + background-color: #ffffff !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; + background-color: ${darkBg} !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; + .dark .VPApp, .dark .Layout, .dark .VPContent, .dark .VPHome, .dark .VPHero, .dark #app, .dark .vp-doc { + background-color: ${darkBg} !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) + updateThemeColor(selectedColor.value, isAmoledMode.value) }) -watch(selectedColor, updateThemeColor) +watch([selectedColor, isAmoledMode], ([color, amoled]) => { + updateThemeColor(color, amoled) +}) const normalizeColorName = (colorName: string) => colorName.replaceAll(/-/g, ' ').charAt(0).toUpperCase() + @@ -219,7 +196,7 @@ const normalizeColorName = (colorName: string) =>
- \ No newline at end of file +