diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue index b59ae9d01..856bd1b01 100644 --- a/docs/.vitepress/theme/components/ColorPicker.vue +++ b/docs/.vitepress/theme/components/ColorPicker.vue @@ -4,27 +4,6 @@ import { useStorage, useStyleTag } from '@vueuse/core' import { watch, onMounted } from 'vue' import Switch from './Switch.vue' -// Add Halloween colors -const halloweenColors = { - 50: '#fff7ed', - 100: '#ffedd5', - 200: '#fed7aa', - 300: '#fdba74', - 400: '#fb923c', - 500: '#FF6A00', - 600: '#ea580c', - 700: '#c2410c', - 800: '#9a3412', - 900: '#7c2d12', - 950: '#431407' -} - -// hall extend or something -const extendedColors = { - ...colors, - halloween: halloweenColors -} - const colorScales = [ '50', '100', @@ -39,18 +18,18 @@ const colorScales = [ '950' ] as const -type ColorNames = keyof typeof extendedColors -const selectedColor = useStorage('preferred-color', 'halloween') +type ColorNames = keyof typeof colors +const selectedColor = useStorage('preferred-color', 'swarm') const isAmoledMode = useStorage('amoled-mode', false) -const colorOptions = Object.keys(extendedColors).filter( - (key) => typeof extendedColors[key as keyof typeof extendedColors] === 'object' +const colorOptions = Object.keys(colors).filter( + (key) => typeof colors[key as keyof typeof colors] === 'object' ) as Array const { css } = useStyleTag('', { id: 'brand-color' }) const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { - const colorSet = extendedColors[colorName] + const colorSet = colors[colorName] const cssVars = colorScales .map((scale) => `--vp-c-brand-${scale}: ${colorSet[scale]};`) @@ -58,122 +37,61 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { const htmlElement = document.documentElement - // Manage theme classes - if (colorName === 'halloween') { - 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 { + ${cssVars} + --vp-c-brand-1: ${colorSet[500]}; + --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; + } + + .dark { + ${cssVars} + --vp-c-brand-1: ${colorSet[400]}; + --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; + } - css.value = ` - :root { - ${cssVars} - --vp-c-brand-1: ${colorSet[500]}; - --vp-c-brand-2: ${colorSet[600]}; - --vp-c-brand-3: ${colorSet[800]}; - --vp-c-brand-soft: ${colorSet[400]}; - } - - .dark { - ${cssVars} - --vp-c-brand-1: ${colorSet[400]}; - --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 { - css.value = ` - :root { - ${cssVars} - --vp-c-brand-1: ${colorSet[500]}; - --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; - } - - .dark { - ${cssVars} - --vp-c-brand-1: ${colorSet[400]}; - --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; - } - - html, body { - background-color: #ffffff !important; - } - - .VPApp, .Layout, .VPContent, .VPHome, .VPHero, #app, .vp-doc { - background-color: #ffffff !important; - } - - .dark html, .dark body { - background-color: ${darkBg} !important; - } - - .dark .VPApp, .dark .Layout, .dark .VPContent, .dark .VPHome, .dark .VPHero, .dark #app, .dark .vp-doc { - background-color: ${darkBg} !important; - } - ` - } + html, body { + background-color: #ffffff !important; + } + + .VPApp, .Layout, .VPContent, .VPHome, .VPHero, #app, .vp-doc { + background-color: #ffffff !important; + } + + .dark html, .dark body { + background-color: ${darkBg} !important; + } + + .dark .VPApp, .dark .Layout, .dark .VPContent, .dark .VPHome, .dark .VPHero, .dark #app, .vp-doc { + background-color: ${darkBg} !important; + } + ` } 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') } @@ -203,16 +121,9 @@ const normalizeColorName = (colorName: string) => :title="normalizeColorName(color)" > - 🎃 - - + :style="{ backgroundColor: colors[color][500] }" + > @@ -227,4 +138,4 @@ const normalizeColorName = (colorName: string) => - + \ No newline at end of file diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss index 4c69e7367..6c1b54432 100644 --- a/docs/.vitepress/theme/style.scss +++ b/docs/.vitepress/theme/style.scss @@ -23,19 +23,6 @@ --vp-c-bg-elv: rgba(255, 255, 255, 0.7); --vp-c-bg-mark: rgb(232, 232, 232); - /* Colors: Halloween Theme */ - --halloween-50: #fff7ed; - --halloween-100: #ffedd5; - --halloween-200: #fed7aa; - --halloween-300: #fdba74; - --halloween-400: #fb923c; - --halloween-500: #FF6A00; - --halloween-600: #ea580c; - --halloween-700: #c2410c; - --halloween-800: #9a3412; - --halloween-900: #7c2d12; - --halloween-950: #431407; - /* Colors: Custom Block */ /** Info */ --vp-custom-block-info-bg: theme('colors.swarm.100'); @@ -57,63 +44,6 @@ --vp-custom-block-danger-border: theme('colors.carnation.800'); --vp-custom-block-danger-text: theme('colors.carnation.800'); --vp-custom-block-danger-text-deep: theme('colors.carnation.900'); - /** Halloween */ - --vp-custom-block-halloween-bg: var(--halloween-100); - --vp-custom-block-halloween-border: var(--halloween-800); - --vp-custom-block-halloween-text: var(--halloween-800); - --vp-custom-block-halloween-text-deep: var(--halloween-900); -} - -/* Apply Halloween theme by default (for light mode)*/ -:root { - --vp-c-bg: #fef3e8 !important; - --vp-c-bg-alt: #fef0e7 !important; - --vp-c-bg-elv: rgba(254, 240, 231, 0.8) !important; - --vp-c-bg-soft: #fef0e7 !important; - --vp-button-alt-bg: #a855f7 !important; - --vp-button-alt-text: #fff !important; - --vp-button-alt-hover-bg: #9333ea !important; - --vp-button-alt-hover-text: #fff !important; - --vp-button-brand-bg: #FF6A00 !important; - --vp-button-brand-border: #FF6A00 !important; - --vp-button-brand-text: #fff !important; - --vp-button-brand-hover-bg: #ea580c !important; - --vp-button-brand-hover-border: #ea580c !important; - --vp-button-brand-hover-text: #fff !important; -} - -body { - background-color: #fef3e8 !important; -} - -.VPApp, .Layout, .VPContent, .VPHome, .VPHero, #app { - background-color: #fef3e8 !important; -} - -/* Apply Halloween theme by default - (for dark mode) */ -.dark { - --vp-c-bg: rgb(15, 15, 15) !important; - --vp-c-bg-alt: rgb(12, 12, 12) !important; - --vp-c-bg-elv: rgba(12, 12, 12, 0.8) !important; - --vp-c-bg-soft: rgb(12, 12, 12) !important; - --vp-button-alt-bg: #8b5cf6 !important; - --vp-button-alt-text: #e9d5ff !important; - --vp-button-alt-hover-bg: #a855f7 !important; - --vp-button-alt-hover-text: #fff !important; - --vp-button-brand-bg: #FF6A00 !important; - --vp-button-brand-border: #FF6A00 !important; - --vp-button-brand-text: #fff !important; - --vp-button-brand-hover-bg: #ea580c !important; - --vp-button-brand-hover-border: #ea580c !important; - --vp-button-brand-hover-text: #fff !important; -} - -.dark body { - background-color: rgb(15, 15, 15) !important; -} - -.dark .VPApp, .dark .Layout, .dark .VPContent, .dark .VPHome, .dark .VPHero, .dark #app { - background-color: rgb(15, 15, 15) !important; } .dark { @@ -149,78 +79,6 @@ body { --vp-custom-block-danger-border: theme('colors.carnation.800'); --vp-custom-block-danger-text: theme('colors.carnation.200'); --vp-custom-block-danger-text-deep: theme('colors.carnation.200'); - /** Halloween */ - --vp-custom-block-halloween-bg: var(--halloween-950); - --vp-custom-block-halloween-border: var(--halloween-800); - --vp-custom-block-halloween-text: var(--halloween-200); - --vp-custom-block-halloween-text-deep: var(--halloween-200); -} - -/* Halloween theme overrides */ -/* Halloween theme overrides - (for light mode) */ -html[data-halloween-theme]:not(.dark) { - --vp-c-bg: #fef3e8 !important; - --vp-c-bg-alt: #fef0e7 !important; - --vp-c-bg-elv: rgba(254, 240, 231, 0.8) !important; - --vp-c-bg-soft: #fef0e7 !important; - --vp-button-alt-bg: #a855f7 !important; - --vp-button-alt-text: #fff !important; - --vp-button-alt-hover-bg: #9333ea !important; - --vp-button-alt-hover-text: #fff !important; - --vp-button-brand-bg: #FF6A00 !important; - --vp-button-brand-border: #FF6A00 !important; - --vp-button-brand-text: #fff !important; - --vp-button-brand-hover-bg: #ea580c !important; - --vp-button-brand-hover-border: #ea580c !important; - --vp-button-brand-hover-text: #fff !important; - - background-color: #fef3e8 !important; -} - -html[data-halloween-theme]:not(.dark) body { - background-color: #fef3e8 !important; -} - -html[data-halloween-theme]:not(.dark) .VPApp, -html[data-halloween-theme]:not(.dark) .Layout, -html[data-halloween-theme]:not(.dark) .VPContent, -html[data-halloween-theme]:not(.dark) .VPHome, -html[data-halloween-theme]:not(.dark) .VPHero, -html[data-halloween-theme]:not(.dark) #app { - background-color: #fef3e8 !important; -} - -/* Halloween theme overrides - (for dark mode) */ -html[data-halloween-theme].dark { - --vp-c-bg: rgb(15, 15, 15) !important; - --vp-c-bg-alt: rgb(12, 12, 12) !important; - --vp-c-bg-elv: rgba(12, 12, 12, 0.8) !important; - --vp-c-bg-soft: rgb(12, 12, 12) !important; - --vp-button-alt-bg: #8b5cf6 !important; - --vp-button-alt-text: #e9d5ff !important; - --vp-button-alt-hover-bg: #a855f7 !important; - --vp-button-alt-hover-text: #fff !important; - --vp-button-brand-bg: #FF6A00 !important; - --vp-button-brand-border: #FF6A00 !important; - --vp-button-brand-text: #fff !important; - --vp-button-brand-hover-bg: #ea580c !important; - --vp-button-brand-hover-border: #ea580c !important; - --vp-button-brand-hover-text: #fff !important; - - background-color: rgb(15, 15, 15) !important; -} - -html[data-halloween-theme].dark body { - background-color: rgb(15, 15, 15) !important; -} - -html[data-halloween-theme].dark .VPApp, -html[data-halloween-theme].dark .Layout, -html[data-halloween-theme].dark .VPContent, -html[data-halloween-theme].dark .VPHome, -html[data-halloween-theme].dark .VPHero, -html[data-halloween-theme].dark #app { - background-color: rgb(15, 15, 15) !important; } .vp-doc a { @@ -282,14 +140,14 @@ html[data-halloween-theme].dark #app { --vp-home-hero-name-color: transparent; --vp-home-hero-name-background: -webkit-linear-gradient( 120deg, - #ff8c3a 30%, - #FF6A00 + #c4b5fd 30%, + #7bc5e4 ); --vp-home-hero-image-background-image: linear-gradient( -45deg, - #ff8c3a 50%, - #ea580c 50% + #c4b5fd 50%, + #47caff 50% ); --vp-home-hero-image-filter: blur(44px); } @@ -464,19 +322,6 @@ html[data-halloween-theme].dark #app { color: var(--vp-custom-block-danger-text-deep); } -.halloween.custom-block a { - color: var(--vp-custom-block-halloween-text); - font-weight: 500; - text-decoration: underline; - text-underline-offset: 2px; - transition: opacity 0.25s; -} - -.halloween.custom-block a:hover { - opacity: 0.7; - color: var(--vp-custom-block-halloween-text-deep); -} - .info.custom-block { --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWluZm8iPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00Ii8+PHBhdGggZD0iTTEyIDhoLjAxIi8+PC9zdmc+'); } @@ -497,10 +342,6 @@ html[data-halloween-theme].dark #app { --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNrdWxsIj48Y2lyY2xlIGN4PSI5IiBjeT0iMTIiIHI9IjEiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjEyIiByPSIxIi8+PHBhdGggZD0iTTggMjB2Mmg4di0yIi8+PHBhdGggZD0ibTEyLjUgMTctLjUtMS0uNSAxaDF6Ii8+PHBhdGggZD0iTTE2IDIwYTIgMiAwIDAgMCAxLjU2LTMuMjUgOCA4IDAgMSAwLTExLjEyIDBBMiAyIDAgMCAwIDggMjAiLz48L3N2Zz4='); } -.halloween.custom-block { - --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiAyYzMgMCA1IDIgNSA1djZjMCA0LTMgNy04IDdoLTJjLTUtMS04LTMtOC03VjdjMC0zIDItNSA1LTVoOHoiLz48Y2lyY2xlIGN4PSI5IiBjeT0iOSIgcj0iMSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iOSIgcj0iMSIvPjxwYXRoIGQ9Im0xMCAxNCAyIDJoMGwyLTIiLz48L3N2Zz4='); -} - .custom-block-title { display: inline-flex; align-items: center; @@ -517,4 +358,4 @@ html[data-halloween-theme].dark #app { mask-size: 100% 100%; background-color: currentColor; color: inherit; -} +} \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 22532f017..29712afd9 100644 --- a/docs/index.md +++ b/docs/index.md @@ -10,7 +10,7 @@ hero: title: Nov 2025 Updates 🍂 link: /posts/Nov-2025 image: - src: /hall.png + src: /test.png alt: FMHY Icon actions: - theme: brand @@ -169,13 +169,13 @@ onMounted(() => { const setKawaii = () => { const images = document.querySelectorAll('.VPImage.image-src') images.forEach((img) => { - img.src = '/uwu-hall.png' + img.src = '/logo-uwu.svg' }) } const resetKawaii = () => { const images = document.querySelectorAll('.VPImage.image-src') images.forEach((img) => { - img.src = '/hall.png' + img.src = '/test.png' }) } if (kawaii === 'true') { @@ -217,4 +217,4 @@ onMounted(() => { heroImage.addEventListener('click', handleClick); } }) - + \ No newline at end of file diff --git a/unocss.config.ts b/unocss.config.ts index a33dcbc69..001b1f731 100644 --- a/unocss.config.ts +++ b/unocss.config.ts @@ -25,27 +25,6 @@ import { transformerDirectives } from 'unocss' -// Add Halloween colors to extend the existing colors -const halloweenColors = { - 50: '#fff7ed', - 100: '#ffedd5', - 200: '#fed7aa', - 300: '#fdba74', - 400: '#fb923c', - 500: '#FF6A00', - 600: '#ea580c', - 700: '#c2410c', - 800: '#9a3412', - 900: '#7c2d12', - 950: '#431407' -} - -// Extend colors with Halloween theme -const extendedColors = { - ...colors, - halloween: halloweenColors -} - const colorScales = [ '50', '100', @@ -60,7 +39,7 @@ const colorScales = [ '950' ] as const -const colorPattern = Object.keys(extendedColors).join('|') +const colorPattern = Object.keys(colors).join('|') const createColorRules = (type: 'text' | 'bg' | 'border'): Rule[] => { const property = type === 'text' @@ -73,7 +52,7 @@ const createColorRules = (type: 'text' | 'bg' | 'border'): Rule[] => { (scale) => [ new RegExp(`^${type}-(${colorPattern})-${scale}$`), - ([, color]) => ({ [property]: extendedColors[color][scale] }) + ([, color]) => ({ [property]: colors[color][scale] }) ] as const ) } @@ -84,7 +63,7 @@ export default defineConfig({ }, theme: { colors: { - ...extendedColors, + ...colors, primary: 'var(--vp-c-brand-1)', bg: 'var(--vp-c-bg)', 'bg-alt': 'var(--vp-c-bg-alt)', @@ -158,4 +137,4 @@ export default defineConfig({ }) ], transformers: [transformerDirectives()] -}) +}) \ No newline at end of file