aria/FMHY-Website
1
0
Fork 0
mirror of https://github.com/fmhy/edit.git synced 2026-01-13 15:31:07 +11:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add monochrome theme support

Browse source
This commit is contained in:
Eason Li 2026-01-04 16:02:19 +08:00
parent bfda08e659
commit edaf7b727e
3 changed files with 108 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

24
docs/.vitepress/theme/components/ThemeDropdown.vue
View file

@ -3,7 +3,7 @@ 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 { mode, setMode, state, amoledEnabled, setAmoledEnabled, monochromeEnabled, setMonochromeEnabled } = useTheme()
const isOpen = ref(false)
const dropdownRef = ref<HTMLElement | null>(null)
@ -13,20 +13,25 @@ interface ModeChoice {
label: string
icon: string
isAmoled?: boolean
isMonochrome?: 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 }
{ mode: 'dark', label: 'AMOLED', icon: 'i-ph-moon-stars-duotone', isAmoled: true },
{ mode: 'dark', label: 'Monochrome', icon: 'i-ph-circle-half-tilt-duotone', isMonochrome: true }
]
const currentChoice = computed(() => {
const current = (mode && (mode as any).value) ? (mode as any).value : 'light'
if (current === 'dark' && monochromeEnabled.value) {
return modeChoices[3] // Monochrome option
}
if (current === 'dark' && amoledEnabled.value) {
return modeChoices[2] // AMOLED option
}
return modeChoices.find(choice => choice.mode === current && !choice.isAmoled) || modeChoices[0]
return modeChoices.find(choice => choice.mode === current && !choice.isAmoled && !choice.isMonochrome) || modeChoices[0]
})
const toggleDropdown = () => {
@ -34,22 +39,31 @@ const toggleDropdown = () => {
}
const selectMode = (choice: ModeChoice) => {
if (choice.isAmoled) {
if (choice.isMonochrome) {
setMode('dark')
setAmoledEnabled(false)
setMonochromeEnabled(true)
} else if (choice.isAmoled) {
setMode('dark')
setAmoledEnabled(true)
setMonochromeEnabled(false)
} else {
setMode(choice.mode)
setAmoledEnabled(false)
setMonochromeEnabled(false)
}
isOpen.value = false
}
const isActiveChoice = (choice: ModeChoice) => {
const current = (mode && (mode as any).value) ? (mode as any).value : 'light'
if (choice.isMonochrome) {
return current === 'dark' && monochromeEnabled.value
}
if (choice.isAmoled) {
return current === 'dark' && amoledEnabled.value
}
return choice.mode === current && !choice.isAmoled && !amoledEnabled.value
return choice.mode === current && !choice.isAmoled && !choice.isMonochrome && !amoledEnabled.value && !monochromeEnabled.value
}
const handleClickOutside = (event: MouseEvent) => {