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

feat: add monochrome theme support (#4537)

Browse source 
* feat: add monochrome theme support

* refactor: implement dedicated monochrome mode
This commit is contained in:
Zenith Rifle 2026-01-04 16:22:51 +08:00 • committed by GitHub
parent 703831f6ea
commit bfc15e8141
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 96 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,11 +18,15 @@ interface ModeChoice {
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: 'monochrome', label: 'Monochrome', icon: 'i-ph-circle-half-tilt-duotone' }
]
const currentChoice = computed(() => {
const current = (mode && (mode as any).value) ? (mode as any).value : 'light'
if (current === 'monochrome') {
return modeChoices[3] // Monochrome option
}
if (current === 'dark' && amoledEnabled.value) {
return modeChoices[2] // AMOLED option
}
@ -34,18 +38,28 @@ const toggleDropdown = () => {
}
const selectMode = (choice: ModeChoice) => {
setMode(choice.mode)
if (choice.isAmoled) {
setMode('dark')
setAmoledEnabled(true)
} else {
setMode(choice.mode)
setAmoledEnabled(false)
// Only disable AMOLED if we are explicitly switching away from it
// But wait, if we switch to 'monochrome', 'amoled' flag might still be true?
// It doesn't matter because amoled is only checked if mode is 'dark'.
// However, if we switch back to 'dark', should it be amoled or not?
// Standard behavior: clicking 'Dark' (non-amoled) disables amoled.
if (choice.mode === 'dark') {
setAmoledEnabled(false)
}
}
isOpen.value = false
}
const isActiveChoice = (choice: ModeChoice) => {
const current = (mode && (mode as any).value) ? (mode as any).value : 'light'
if (choice.mode === 'monochrome') {
return current === 'monochrome'
}
if (choice.isAmoled) {
return current === 'dark' && amoledEnabled.value
}