mirror of
https://github.com/fmhy/edit.git
synced 2026-01-13 07:21:08 +11:00
feat: add monochrome theme support
This commit is contained in:
Eason Li
parent
bfda08e659
commit
edaf7b727e
3 changed files with 108 additions and 34 deletions
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -138,17 +138,13 @@
|
|||
*/
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(
|
||||
120deg,
|
||||
#c4b5fd 30%,
|
||||
#7bc5e4
|
||||
);
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg,
|
||||
#c4b5fd 30%,
|
||||
#7bc5e4);
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(
|
||||
-45deg,
|
||||
#c4b5fd 50%,
|
||||
#47caff 50%
|
||||
);
|
||||
--vp-home-hero-image-background-image: linear-gradient(-45deg,
|
||||
#c4b5fd 50%,
|
||||
#47caff 50%);
|
||||
--vp-home-hero-image-filter: blur(44px);
|
||||
}
|
||||
|
||||
|
|
@ -223,6 +219,7 @@
|
|||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
@ -253,7 +250,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
#VPContent strong > a {
|
||||
#VPContent strong>a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -359,3 +356,19 @@
|
|||
background-color: currentColor;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Monochrome Specifics */
|
||||
html.monochrome {
|
||||
filter: grayscale(100%);
|
||||
|
||||
img,
|
||||
video,
|
||||
iframe {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -21,6 +21,7 @@ import { themeRegistry } from './configs'
|
|||
const STORAGE_KEY_THEME = 'vitepress-theme-name'
|
||||
const STORAGE_KEY_MODE = 'vitepress-display-mode'
|
||||
const STORAGE_KEY_AMOLED = 'vitepress-amoled-enabled'
|
||||
const STORAGE_KEY_MONOCHROME = 'vitepress-monochrome-enabled'
|
||||
|
||||
export class ThemeHandler {
|
||||
private state = ref<ThemeState>({
|
||||
|
|
@ -29,6 +30,7 @@ export class ThemeHandler {
|
|||
theme: null
|
||||
})
|
||||
private amoledEnabled = ref(false)
|
||||
private monochromeEnabled = ref(false)
|
||||
|
||||
constructor() {
|
||||
this.initializeTheme()
|
||||
|
|
@ -41,6 +43,7 @@ export class ThemeHandler {
|
|||
const savedTheme = localStorage.getItem(STORAGE_KEY_THEME) || 'color-swarm'
|
||||
const savedMode = localStorage.getItem(STORAGE_KEY_MODE) as DisplayMode | null
|
||||
const savedAmoled = localStorage.getItem(STORAGE_KEY_AMOLED) === 'true'
|
||||
const savedMonochrome = localStorage.getItem(STORAGE_KEY_MONOCHROME) === 'true'
|
||||
|
||||
if (themeRegistry[savedTheme]) {
|
||||
this.state.value.currentTheme = savedTheme
|
||||
|
|
@ -49,6 +52,7 @@ export class ThemeHandler {
|
|||
|
||||
// Set amoled preference
|
||||
this.amoledEnabled.value = savedAmoled
|
||||
this.monochromeEnabled.value = savedMonochrome
|
||||
|
||||
// Set mode
|
||||
if (savedMode) {
|
||||
|
|
@ -67,7 +71,7 @@ export class ThemeHandler {
|
|||
this.state.value.currentMode = e.matches ? 'dark' : 'light'
|
||||
this.applyTheme()
|
||||
}
|
||||
else {
|
||||
else {
|
||||
this.applyTheme()
|
||||
}
|
||||
})
|
||||
|
|
@ -80,11 +84,15 @@ export class ThemeHandler {
|
|||
|
||||
// Is this the WORST fix of all time???
|
||||
const root = document.documentElement
|
||||
const bgColor = currentMode === 'dark' && this.amoledEnabled.value ? '#000000' : currentMode === 'dark' ? '#1A1A1A' : '#f8fafc'
|
||||
const isMonochrome = currentMode === 'dark' && this.monochromeEnabled.value
|
||||
|
||||
const bgColor = isMonochrome ? '#000000' : currentMode === 'dark' && this.amoledEnabled.value ? '#000000' : currentMode === 'dark' ? '#1A1A1A' : '#f8fafc'
|
||||
root.style.setProperty('--vp-c-bg', bgColor)
|
||||
const bgAltColor = currentMode === 'dark' && this.amoledEnabled.value ? '#000000' : currentMode === 'dark' ? '#171717' : '#eef2f5'
|
||||
|
||||
const bgAltColor = isMonochrome ? '#000000' : currentMode === 'dark' && this.amoledEnabled.value ? '#000000' : currentMode === 'dark' ? '#171717' : '#eef2f5'
|
||||
root.style.setProperty('--vp-c-bg-alt', bgAltColor)
|
||||
const bgElvColor = currentMode === 'dark' && this.amoledEnabled.value ? 'rgba(0, 0, 0, 0.9)' : currentMode === 'dark' ? '#1a1a1acc' : 'rgba(255, 255, 255, 0.8)'
|
||||
|
||||
const bgElvColor = isMonochrome ? 'rgba(0, 0, 0, 0.9)' : currentMode === 'dark' && this.amoledEnabled.value ? 'rgba(0, 0, 0, 0.9)' : currentMode === 'dark' ? '#1a1a1acc' : 'rgba(255, 255, 255, 0.8)'
|
||||
root.style.setProperty('--vp-c-bg-elv', bgElvColor)
|
||||
|
||||
this.applyDOMClasses(currentMode)
|
||||
|
|
@ -101,7 +109,7 @@ export class ThemeHandler {
|
|||
const root = document.documentElement
|
||||
|
||||
// Remove all mode classes
|
||||
root.classList.remove('dark', 'light', 'amoled')
|
||||
root.classList.remove('dark', 'light', 'amoled', 'monochrome')
|
||||
|
||||
// Add current mode class
|
||||
root.classList.add(mode)
|
||||
|
|
@ -110,6 +118,11 @@ export class ThemeHandler {
|
|||
if (mode === 'dark' && this.amoledEnabled.value) {
|
||||
root.classList.add('amoled')
|
||||
}
|
||||
|
||||
// Add monochrome class if enabled in dark mode
|
||||
if (mode === 'dark' && this.monochromeEnabled.value) {
|
||||
root.classList.add('monochrome')
|
||||
}
|
||||
}
|
||||
|
||||
private applyCSSVariables(colors: ModeColors, theme: Theme) {
|
||||
|
|
@ -128,15 +141,31 @@ export class ThemeHandler {
|
|||
let bgAltColor = colors.bgAlt
|
||||
let bgElvColor = colors.bgElv
|
||||
|
||||
const isMonochrome = this.state.value.currentMode === 'dark' && this.monochromeEnabled.value
|
||||
|
||||
if (this.state.value.currentMode === 'dark' && this.amoledEnabled.value) {
|
||||
bgColor = '#000000'
|
||||
bgAltColor = '#000000'
|
||||
bgElvColor = 'rgba(0, 0, 0, 0.9)'
|
||||
}
|
||||
|
||||
// Apply brand colors only if theme specifies them
|
||||
// Otherwise, remove inline styles to let ColorPicker CSS take effect
|
||||
if (colors.brand && (colors.brand[1] || colors.brand[2] || colors.brand[3] || colors.brand.soft)) {
|
||||
if (isMonochrome) {
|
||||
bgColor = '#000000'
|
||||
bgAltColor = '#000000'
|
||||
bgElvColor = 'rgba(0, 0, 0, 0.9)'
|
||||
}
|
||||
|
||||
// Apply brand colors only if theme specifies them OR if monochrome to override
|
||||
if (isMonochrome) {
|
||||
root.style.setProperty('--vp-c-brand-1', '#d4d4d4')
|
||||
root.style.setProperty('--vp-c-brand-2', '#a3a3a3')
|
||||
root.style.setProperty('--vp-c-brand-3', '#737373')
|
||||
root.style.setProperty('--vp-c-brand-soft', '#525252')
|
||||
|
||||
root.style.setProperty('--vp-c-text-1', '#ffffff')
|
||||
root.style.setProperty('--vp-c-text-2', '#a3a3a3')
|
||||
root.style.setProperty('--vp-c-text-3', '#737373')
|
||||
} else if (colors.brand && (colors.brand[1] || colors.brand[2] || colors.brand[3] || colors.brand.soft)) {
|
||||
if (colors.brand[1]) root.style.setProperty('--vp-c-brand-1', colors.brand[1])
|
||||
if (colors.brand[2]) root.style.setProperty('--vp-c-brand-2', colors.brand[2])
|
||||
if (colors.brand[3]) root.style.setProperty('--vp-c-brand-3', colors.brand[3])
|
||||
|
|
@ -158,11 +187,12 @@ export class ThemeHandler {
|
|||
}
|
||||
|
||||
// Apply text colors - always set them to ensure proper theme switching
|
||||
if (colors.text) {
|
||||
// Except whenever Monochrome is active, we handled text colors above
|
||||
if (!isMonochrome && colors.text) {
|
||||
if (colors.text[1]) root.style.setProperty('--vp-c-text-1', colors.text[1])
|
||||
if (colors.text[2]) root.style.setProperty('--vp-c-text-2', colors.text[2])
|
||||
if (colors.text[3]) root.style.setProperty('--vp-c-text-3', colors.text[3])
|
||||
} else {
|
||||
} else if (!isMonochrome) {
|
||||
// Remove inline styles if theme doesn't specify text colors
|
||||
// This allows CSS variables from style.scss to take effect
|
||||
root.style.removeProperty('--vp-c-text-1')
|
||||
|
|
@ -304,6 +334,20 @@ export class ThemeHandler {
|
|||
this.setMode(newMode)
|
||||
}
|
||||
|
||||
public setMonochromeEnabled(enabled: boolean) {
|
||||
this.monochromeEnabled.value = enabled
|
||||
localStorage.setItem(STORAGE_KEY_MONOCHROME, enabled.toString())
|
||||
this.applyTheme()
|
||||
}
|
||||
|
||||
public getMonochromeEnabled() {
|
||||
return this.monochromeEnabled.value
|
||||
}
|
||||
|
||||
public isMonochromeMode() {
|
||||
return this.state.value.currentMode === 'dark' && this.monochromeEnabled.value
|
||||
}
|
||||
|
||||
public setAmoledEnabled(enabled: boolean) {
|
||||
this.amoledEnabled.value = enabled
|
||||
localStorage.setItem(STORAGE_KEY_AMOLED, enabled.toString())
|
||||
|
|
@ -403,6 +447,9 @@ export function useTheme() {
|
|||
amoledEnabled: handler.getAmoledEnabledRef(),
|
||||
setAmoledEnabled: (enabled: boolean) => handler.setAmoledEnabled(enabled),
|
||||
toggleAmoled: () => handler.toggleAmoled(),
|
||||
monochromeEnabled: handler.getMonochromeEnabled(),
|
||||
setMonochromeEnabled: (enabled: boolean) => handler.setMonochromeEnabled(enabled),
|
||||
isMonochromeMode: () => handler.isMonochromeMode(),
|
||||
state
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue