mirror of
https://github.com/fmhy/edit.git
synced 2026-01-12 15:01:06 +11:00
Theme Handler (By Land), Christmas & Catppuccin Theme And Feedback Window Revamp (#4386)
* Add files for christmas theme, theme handler, feedback revamp and cattpuccin theme * Add files via upload * update image on home page * add tree logo for faster loading * change link to raw github
This commit is contained in:
Samidy
GitHub
parent
d0b9c2079b
commit
d4d4ad0d85
20 changed files with 1657 additions and 129 deletions
|
|
@ -1,141 +1,262 @@
|
|||
<script setup lang="ts">
|
||||
import { colors } from '@fmhy/colors'
|
||||
import { useStorage, useStyleTag } from '@vueuse/core'
|
||||
import { watch, onMounted } from 'vue'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { watch, onMounted, nextTick } from 'vue'
|
||||
import { useTheme } from '../themes/themeHandler'
|
||||
import { themeRegistry } from '../themes/configs'
|
||||
import type { Theme } from '../themes/types'
|
||||
import Switch from './Switch.vue'
|
||||
|
||||
const colorScales = [
|
||||
'50',
|
||||
'100',
|
||||
'200',
|
||||
'300',
|
||||
'400',
|
||||
'500',
|
||||
'600',
|
||||
'700',
|
||||
'800',
|
||||
'900',
|
||||
'950'
|
||||
] as const
|
||||
|
||||
type ColorNames = keyof typeof colors
|
||||
const selectedColor = useStorage<ColorNames>('preferred-color', 'swarm')
|
||||
const isAmoledMode = useStorage('amoled-mode', false)
|
||||
|
||||
// Use the theme system
|
||||
const { amoledEnabled, setAmoledEnabled, setTheme, state, mode, themeName } = useTheme()
|
||||
|
||||
const colorOptions = Object.keys(colors).filter(
|
||||
(key) => typeof colors[key as keyof typeof colors] === 'object'
|
||||
) as Array<ColorNames>
|
||||
|
||||
const { css } = useStyleTag('', { id: 'brand-color' })
|
||||
// Preset themes (exclude dynamically generated color- themes)
|
||||
const presetThemeNames = Object.keys(themeRegistry).filter((k) => !k.startsWith('color-'))
|
||||
|
||||
const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => {
|
||||
const colorSet = colors[colorName]
|
||||
const getThemePreviewStyle = (name: string) => {
|
||||
const theme = themeRegistry[name]
|
||||
if (!theme) return {}
|
||||
const modeKey = (mode && (mode as any).value) ? (mode as any).value as keyof typeof theme.modes : 'light'
|
||||
const modeColors = theme.modes[modeKey]
|
||||
|
||||
const cssVars = colorScales
|
||||
.map((scale) => `--vp-c-brand-${scale}: ${colorSet[scale]};`)
|
||||
.join('\n ')
|
||||
|
||||
const htmlElement = document.documentElement
|
||||
|
||||
if (amoledEnabled) {
|
||||
htmlElement.classList.add('theme-amoled')
|
||||
} else {
|
||||
htmlElement.classList.remove('theme-amoled')
|
||||
if (theme.preview) {
|
||||
// If preview is a URL or gradient, use it directly
|
||||
if (theme.preview.startsWith('http') || theme.preview.startsWith('data:')) {
|
||||
return { backgroundImage: `url(${theme.preview})`, backgroundSize: 'cover' }
|
||||
}
|
||||
return { background: theme.preview }
|
||||
}
|
||||
|
||||
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)'
|
||||
|
||||
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;
|
||||
if (modeColors?.brand && modeColors.brand[1] && modeColors.brand[2]) {
|
||||
return {
|
||||
background: `linear-gradient(135deg, ${modeColors.brand[1]} 0%, ${modeColors.brand[2]} 100%)`
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
// Fallback to CSS var brand if present
|
||||
return { background: 'var(--vp-c-brand-1)' }
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (isAmoledMode.value) {
|
||||
document.documentElement.classList.add('theme-amoled')
|
||||
}
|
||||
const generateThemeFromColor = (colorName: ColorNames): Theme => {
|
||||
const colorSet = colors[colorName]
|
||||
|
||||
// Re-apply the theme to ensure everything is initialized
|
||||
updateThemeColor(selectedColor.value, isAmoledMode.value)
|
||||
})
|
||||
|
||||
watch([selectedColor, isAmoledMode], ([color, amoled]) => {
|
||||
updateThemeColor(color, amoled)
|
||||
})
|
||||
return {
|
||||
name: `color-${colorName}`,
|
||||
displayName: normalizeColorName(colorName),
|
||||
modes: {
|
||||
light: {
|
||||
brand: {
|
||||
1: colorSet[500],
|
||||
2: colorSet[600],
|
||||
3: colorSet[800],
|
||||
soft: colorSet[400]
|
||||
},
|
||||
bg: '#f8fafc',
|
||||
bgAlt: '#eef2f5',
|
||||
bgElv: 'rgba(255, 255, 255, 0.8)',
|
||||
bgMark: 'rgb(226, 232, 240)',
|
||||
text: {
|
||||
1: '#0f172a',
|
||||
2: '#334155',
|
||||
3: '#64748b'
|
||||
},
|
||||
button: {
|
||||
brand: {
|
||||
bg: colorSet[500],
|
||||
border: colorSet[400],
|
||||
text: 'rgba(255, 255, 255)',
|
||||
hoverBorder: colorSet[400],
|
||||
hoverText: 'rgba(255, 255, 255)',
|
||||
hoverBg: colorSet[400],
|
||||
activeBorder: colorSet[400],
|
||||
activeText: 'rgba(255, 255, 255)',
|
||||
activeBg: colorSet[500]
|
||||
},
|
||||
alt: {
|
||||
bg: '#484848',
|
||||
text: '#f0eeee',
|
||||
hoverBg: '#484848',
|
||||
hoverText: '#f0eeee'
|
||||
}
|
||||
},
|
||||
customBlock: {
|
||||
info: {
|
||||
bg: `${colorSet[100]}`,
|
||||
border: `${colorSet[800]}`,
|
||||
text: `${colorSet[800]}`,
|
||||
textDeep: `${colorSet[900]}`
|
||||
},
|
||||
tip: {
|
||||
bg: '#D8F8E4',
|
||||
border: '#447A61',
|
||||
text: '#2D6A58',
|
||||
textDeep: '#166534'
|
||||
},
|
||||
warning: {
|
||||
bg: '#FCEFC3',
|
||||
border: '#9A8034',
|
||||
text: '#9C701B',
|
||||
textDeep: '#92400e'
|
||||
},
|
||||
danger: {
|
||||
bg: '#FBE1E2',
|
||||
border: '#B3565E',
|
||||
text: '#912239',
|
||||
textDeep: '#991b1b'
|
||||
}
|
||||
},
|
||||
selection: {
|
||||
bg: colorSet[200]
|
||||
},
|
||||
home: {
|
||||
heroNameColor: 'transparent',
|
||||
heroNameBackground: `-webkit-linear-gradient(120deg, ${colorSet[400]} 30%, ${colorSet[500]})`,
|
||||
heroImageBackground: `linear-gradient(-45deg, ${colorSet[400]} 50%, ${colorSet[500]} 50%)`,
|
||||
heroImageFilter: 'blur(44px)'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
brand: {
|
||||
1: colorSet[400],
|
||||
2: colorSet[500],
|
||||
3: colorSet[600],
|
||||
soft: colorSet[300]
|
||||
},
|
||||
bg: '#1A1A1A',
|
||||
bgAlt: '#171717',
|
||||
bgElv: '#1a1a1acc',
|
||||
button: {
|
||||
brand: {
|
||||
bg: colorSet[400],
|
||||
border: colorSet[300],
|
||||
text: 'rgba(15, 23, 42)',
|
||||
hoverBorder: colorSet[300],
|
||||
hoverText: 'rgba(15, 23, 42)',
|
||||
hoverBg: colorSet[300],
|
||||
activeBorder: colorSet[300],
|
||||
activeText: 'rgba(15, 23, 42)',
|
||||
activeBg: colorSet[400]
|
||||
},
|
||||
alt: {
|
||||
bg: '#484848',
|
||||
text: '#f0eeee',
|
||||
hoverBg: '#484848',
|
||||
hoverText: '#f0eeee'
|
||||
}
|
||||
},
|
||||
customBlock: {
|
||||
info: {
|
||||
bg: `${colorSet[950]}`,
|
||||
border: `${colorSet[700]}`,
|
||||
text: `${colorSet[200]}`,
|
||||
textDeep: `${colorSet[200]}`
|
||||
},
|
||||
tip: {
|
||||
bg: '#0C2A20',
|
||||
border: '#184633',
|
||||
text: '#B0EBC9',
|
||||
textDeep: '#166534'
|
||||
},
|
||||
warning: {
|
||||
bg: '#403207',
|
||||
border: '#7E6211',
|
||||
text: '#F9DE88',
|
||||
textDeep: '#92400e'
|
||||
},
|
||||
danger: {
|
||||
bg: '#3F060A',
|
||||
border: '#7C0F18',
|
||||
text: '#F7C1BC',
|
||||
textDeep: '#991b1b'
|
||||
}
|
||||
},
|
||||
selection: {
|
||||
bg: colorSet[800]
|
||||
},
|
||||
home: {
|
||||
heroNameColor: 'transparent',
|
||||
heroNameBackground: `-webkit-linear-gradient(120deg, ${colorSet[400]} 30%, ${colorSet[500]})`,
|
||||
heroImageBackground: `linear-gradient(-45deg, ${colorSet[400]} 50%, ${colorSet[500]} 50%)`,
|
||||
heroImageFilter: 'blur(44px)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const normalizeColorName = (colorName: string) =>
|
||||
colorName.replaceAll(/-/g, ' ').charAt(0).toUpperCase() +
|
||||
colorName.slice(1).replaceAll(/-/g, ' ')
|
||||
|
||||
onMounted(async () => {
|
||||
// Don't auto-apply color theme - only apply when user explicitly selects
|
||||
// Wait for next tick to ensure theme handler is fully initialized
|
||||
await nextTick()
|
||||
})
|
||||
|
||||
watch(selectedColor, async (color) => {
|
||||
const theme = generateThemeFromColor(color)
|
||||
themeRegistry[`color-${color}`] = theme
|
||||
// Explicitly set the theme to override any previous selection
|
||||
await nextTick()
|
||||
console.log('Setting theme to:', `color-${color}`)
|
||||
console.log('Current themeName:', themeName ? themeName.value : undefined, 'mode:', mode ? (mode as any).value : undefined)
|
||||
setTheme(`color-${color}`)
|
||||
console.log('After setTheme, themeName:', themeName ? themeName.value : undefined)
|
||||
})
|
||||
|
||||
const toggleAmoled = () => {
|
||||
setAmoledEnabled(!amoledEnabled.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<!-- Color picker generated themes (render first) -->
|
||||
<div v-for="color in colorOptions" :key="color">
|
||||
<button
|
||||
:class=" [
|
||||
'inline-block w-6 h-6 rounded-full transition-all duration-200'
|
||||
:class="[
|
||||
'inline-block w-6 h-6 rounded-full transition-all duration-200 border-2',
|
||||
selectedColor === color
|
||||
? 'border-slate-200 dark:border-slate-400 shadow-lg'
|
||||
: 'border-transparent'
|
||||
]"
|
||||
@click="selectedColor = color"
|
||||
:title="normalizeColorName(color)"
|
||||
>
|
||||
<span
|
||||
class="inline-block w-6 h-6 rounded-full"
|
||||
:style="{ backgroundColor: colors[color][500] }"
|
||||
class="inline-block w-full h-full rounded-full"
|
||||
:style="{ backgroundColor: colors[color][500], backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }"
|
||||
></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Preset themes (render at the end) -->
|
||||
<div v-for="t in presetThemeNames" :key="t">
|
||||
<button
|
||||
:class="[
|
||||
'inline-block w-6 h-6 rounded-full transition-all duration-200 border-2',
|
||||
(themeName && themeName.value === t)
|
||||
? 'border-slate-200 dark:border-slate-400 shadow-lg'
|
||||
: 'border-transparent'
|
||||
]"
|
||||
@click="setTheme(t)"
|
||||
:title="themeRegistry[t].displayName"
|
||||
>
|
||||
<span
|
||||
class="inline-block w-full h-full rounded-full"
|
||||
:style="Object.assign({ backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }, getThemePreviewStyle(t))"
|
||||
></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 text-sm text-$vp-c-text-2">
|
||||
Selected: {{ normalizeColorName(selectedColor) }}
|
||||
</div>
|
||||
|
||||
<!-- AMOLED toggle -->
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span class="text-sm text-$vp-c-text-2">AMOLED</span>
|
||||
<Switch v-model="isAmoledMode" @click="isAmoledMode = !isAmoledMode" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -145,36 +145,28 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
|
|||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
class="mt-2 p-4 border-2 border-solid bg-brand-50 border-brand-300 dark:bg-brand-950 dark:border-brand-800 rounded-xl col-span-3 transition-colors duration-250"
|
||||
class="mt-2 p-4 border-2 border-solid bg-$vp-c-bg-alt border-$vp-c-divider rounded-xl col-span-3 transition-colors duration-250"
|
||||
>
|
||||
<div class="flex items-start md:items-center gap-3">
|
||||
<div class="pt-1 md:pt-0">
|
||||
<div
|
||||
class="w-10 h-10 rounded-full flex items-center justify-center bg-brand-500 dark:bg-brand-400"
|
||||
>
|
||||
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-$vp-c-brand-3">
|
||||
<span
|
||||
:class="
|
||||
isCardShown === false
|
||||
? `i-lucide:mail w-6 h-6 text-white dark:text-brand-950`
|
||||
: `i-lucide:mail-x w-6 h-6 text-white dark:text-brand-950`
|
||||
? `i-lucide:mail w-6 h-6 text-$vp-c-text-1`
|
||||
: `i-lucide:mail-x w-6 h-6 text-$vp-c-text-1`
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex-grow flex items-start md:items-center gap-3 flex-col md:flex-row"
|
||||
>
|
||||
<div class="flex-grow flex items-start md:items-center gap-3 flex-col md:flex-row">
|
||||
<div class="flex-grow">
|
||||
<div class="font-semibold text-brand-950 dark:text-brand-50">
|
||||
Got feedback?
|
||||
</div>
|
||||
<div class="text-sm text-brand-800 dark:text-brand-100">
|
||||
We'd love to know what you think about this page.
|
||||
</div>
|
||||
<div class="font-semibold text-$vp-c-text-1">Got feedback?</div>
|
||||
<div class="text-sm text-$vp-c-text-2">We'd love to know what you think about this page.</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="inline-block text-center rounded-full px-4 py-2.5 text-sm font-medium border-2 border-solid text-brand-700 border-brand-300 dark:text-brand-100 dark:border-brand-800"
|
||||
class="inline-block text-center rounded-full px-4 py-2.5 text-sm font-medium border-2 border-solid text-$vp-c-text-1 border-$vp-c-divider"
|
||||
@click="toggleCard()"
|
||||
>
|
||||
Share Feedback
|
||||
|
|
@ -199,7 +191,7 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
|
|||
<button
|
||||
v-for="item in feedbackOptions"
|
||||
:key="item.value"
|
||||
class="bg-bg border-$vp-c-default-soft hover:border-primary mt-2 select-none rounded border-2 border-solid font-bold transition-all duration-250 rounded-lg text-[14px] font-500 leading-normal m-0 px-3 py-1.5 text-center align-middle whitespace-nowrap"
|
||||
class="bg-$vp-c-bg border-$vp-c-default-soft hover:border-primary mt-2 select-none rounded border-2 border-solid font-bold transition-all duration-250 rounded-lg text-[14px] font-500 leading-normal m-0 px-3 py-1.5 text-center align-middle whitespace-nowrap"
|
||||
@click="handleSubmit(item.value)"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
|
|
@ -240,9 +232,10 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
|
|||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="border border-div rounded-lg transition-colors duration-250 inline-block text-14px font-500 leading-1.5 px-3 py-3 text-center align-middle whitespace-nowrap disabled:opacity-50 text-text-2 bg-brand-100 dark:bg-brand-700 border-brand-800 dark:border-brand-700 disabled:bg-brand-100 dark:disabled:bg-brand-900 hover:border-brand-900 dark:hover:border-brand-800 hover:bg-brand-200 dark:hover:bg-brand-800"
|
||||
class="btn btn-primary"
|
||||
:disabled="isDisabled"
|
||||
@click="handleSubmit()"
|
||||
:style="isDisabled ? {} : { 'background-color': 'var(--vp-button-brand-bg)', 'border-color': 'var(--vp-button-brand-border)', color: 'var(--vp-button-brand-text)' }"
|
||||
>
|
||||
Send Feedback 📩
|
||||
</button>
|
||||
|
|
@ -284,14 +277,14 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-button-brand-text);
|
||||
background-color: var(--vp-button-brand-bg);
|
||||
border-color: var(--vp-button-brand-border);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--vp-c-brand-darker);
|
||||
border-color: var(--vp-c-brand-darker);
|
||||
background-color: var(--vp-button-brand-hover-bg);
|
||||
border-color: var(--vp-button-brand-hover-border);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import Field from './CardField.vue'
|
||||
import ColorPicker from './ColorPicker.vue'
|
||||
import ThemeSelector from './ThemeSelector.vue'
|
||||
import InputField from './InputField.vue'
|
||||
import ToggleStarred from './ToggleStarred.vue'
|
||||
</script>
|
||||
|
|
@ -26,6 +27,12 @@ import ToggleStarred from './ToggleStarred.vue'
|
|||
</template>
|
||||
</InputField>
|
||||
|
||||
<ColorPicker />
|
||||
<div class="mt-4">
|
||||
<ColorPicker />
|
||||
</div>
|
||||
|
||||
<div class="mt-6 pt-6 border-t border-$vp-c-divider">
|
||||
<ThemeSelector />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
184
docs/.vitepress/theme/components/ThemeDropdown.vue
Normal file
184
docs/.vitepress/theme/components/ThemeDropdown.vue
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useTheme } from '../themes/themeHandler'
|
||||
import type { DisplayMode } from '../themes/types'
|
||||
|
||||
const { mode, setMode, state, amoledEnabled, setAmoledEnabled } = useTheme()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const dropdownRef = ref<HTMLElement | null>(null)
|
||||
|
||||
interface ModeChoice {
|
||||
mode: DisplayMode
|
||||
label: string
|
||||
icon: string
|
||||
isAmoled?: boolean
|
||||
}
|
||||
|
||||
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 }
|
||||
]
|
||||
|
||||
const currentChoice = computed(() => {
|
||||
const current = (mode && (mode as any).value) ? (mode as any).value : 'light'
|
||||
if (current === 'dark' && amoledEnabled.value) {
|
||||
return modeChoices[2] // AMOLED option
|
||||
}
|
||||
return modeChoices.find(choice => choice.mode === current && !choice.isAmoled) || modeChoices[0]
|
||||
})
|
||||
|
||||
const toggleDropdown = () => {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
const selectMode = (choice: ModeChoice) => {
|
||||
if (choice.isAmoled) {
|
||||
setMode('dark')
|
||||
setAmoledEnabled(true)
|
||||
} else {
|
||||
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.isAmoled) {
|
||||
return current === 'dark' && amoledEnabled.value
|
||||
}
|
||||
return choice.mode === current && !choice.isAmoled && !amoledEnabled.value
|
||||
}
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
|
||||
isOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="dropdownRef" class="theme-dropdown">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-dropdown-toggle"
|
||||
:title="currentChoice.label"
|
||||
@click="toggleDropdown"
|
||||
>
|
||||
<ClientOnly>
|
||||
<div :class="[currentChoice.icon, 'text-xl']" />
|
||||
</ClientOnly>
|
||||
</button>
|
||||
|
||||
<Transition name="dropdown">
|
||||
<div v-if="isOpen" class="theme-dropdown-menu">
|
||||
<button
|
||||
v-for="(choice, index) in modeChoices"
|
||||
:key="index"
|
||||
class="theme-dropdown-item"
|
||||
:class="{ active: isActiveChoice(choice) }"
|
||||
@click="selectMode(choice)"
|
||||
>
|
||||
<div :class="[choice.icon, 'text-lg']" />
|
||||
<span>{{ choice.label }}</span>
|
||||
<div v-if="isActiveChoice(choice)" class="i-ph-check text-lg ml-auto" />
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.theme-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.theme-dropdown-toggle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
color: var(--vp-c-text-1);
|
||||
background: var(--vp-c-bg-elv);
|
||||
transition: color 0.25s, background 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
min-width: 180px;
|
||||
background: var(--vp-c-bg-elv);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
padding: 6px;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(12px);
|
||||
|
||||
.dark & {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.theme-dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
</style>
|
||||
48
docs/.vitepress/theme/components/ThemeSelector.vue
Normal file
48
docs/.vitepress/theme/components/ThemeSelector.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useTheme } from '../themes/themeHandler'
|
||||
import { themeRegistry } from '../themes/configs'
|
||||
|
||||
const { themeName, setTheme, getAvailableThemes, state, mode } = useTheme()
|
||||
|
||||
const availableThemes = computed(() => getAvailableThemes())
|
||||
|
||||
const getThemePreview = (name: string) => {
|
||||
const theme = themeRegistry[name]
|
||||
if (theme?.preview) {
|
||||
return theme.preview
|
||||
}
|
||||
// Fallback: create gradient from theme's brand colors if they exist
|
||||
const modeKey = (mode && (mode as any).value) ? (mode as any).value : 'light'
|
||||
const colors = modeKey === 'dark' ? theme?.modes.dark : theme?.modes.light
|
||||
|
||||
if (colors?.brand && colors.brand[1] && colors.brand[2] && colors.brand[3]) {
|
||||
return `linear-gradient(135deg, ${colors.brand[1]} 0%, ${colors.brand[2]} 50%, ${colors.brand[3]} 100%)`
|
||||
}
|
||||
|
||||
return 'linear-gradient(135deg, var(--vp-c-brand-1) 0%, var(--vp-c-brand-2) 100%)'
|
||||
}
|
||||
|
||||
const normalizeThemeName = (name: string) =>
|
||||
name.replaceAll(/-/g, ' ').charAt(0).toUpperCase() +
|
||||
name.slice(1).replaceAll(/-/g, ' ')
|
||||
|
||||
const currentDisplayName = computed(() => {
|
||||
const t = themeName && (themeName as any).value ? (themeName as any).value : ''
|
||||
if (!t) return 'Default'
|
||||
const cfg = themeRegistry[t]
|
||||
if (cfg && cfg.displayName) return cfg.displayName
|
||||
// fallback: humanize the key
|
||||
return normalizeThemeName(t)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-2 text-sm text-$vp-c-text-1">Theme</div>
|
||||
<div class="text-sm text-$vp-c-text-2">
|
||||
<span class="font-medium">Theme:</span>
|
||||
<span class="ml-1">{{ currentDisplayName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue