mirror of
https://github.com/fmhy/edit.git
synced 2026-01-11 19:06:17 +00:00
Make Amoled Default (#4412)
* like attempt 4 uhghgh * ok got it to default to amoled, now just make it not fall back if u select another theme * attempt like 6? * 7 ufhfhfhf * yo kill evb rn * attempt like 9?
This commit is contained in:
Samidy
GitHub
@@ -1,395 +1,401 @@
|
|||||||
/**
|
/**
|
||||||
* Copyright (c) 2025 taskylizard. Apache License 2.0.
|
* Copyright (c) 2025 taskylizard. Apache License 2.0.
|
||||||
*
|
*
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
* you may not use this file except in compliance with the License.
|
* you may not use this file except in compliance with the License.
|
||||||
* You may obtain a copy of the License at
|
* You may obtain a copy of the License at
|
||||||
*
|
*
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
*
|
*
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { ref, onMounted, computed } from 'vue'
|
import { ref, onMounted, computed } from 'vue'
|
||||||
import type { DisplayMode, ThemeState, Theme, ModeColors } from './types'
|
import type { DisplayMode, ThemeState, Theme, ModeColors } from './types'
|
||||||
import { themeRegistry } from './configs'
|
import { themeRegistry } from './configs'
|
||||||
|
|
||||||
const STORAGE_KEY_THEME = 'vitepress-theme-name'
|
const STORAGE_KEY_THEME = 'vitepress-theme-name'
|
||||||
const STORAGE_KEY_MODE = 'vitepress-display-mode'
|
const STORAGE_KEY_MODE = 'vitepress-display-mode'
|
||||||
const STORAGE_KEY_AMOLED = 'vitepress-amoled-enabled'
|
const STORAGE_KEY_AMOLED = 'vitepress-amoled-enabled'
|
||||||
|
|
||||||
export class ThemeHandler {
|
export class ThemeHandler {
|
||||||
private state = ref<ThemeState>({
|
private state = ref<ThemeState>({
|
||||||
currentTheme: 'christmas',
|
currentTheme: 'christmas',
|
||||||
currentMode: 'light' as DisplayMode,
|
currentMode: 'light' as DisplayMode,
|
||||||
theme: themeRegistry.christmas
|
theme: themeRegistry.christmas
|
||||||
})
|
})
|
||||||
private amoledEnabled = ref(false)
|
private amoledEnabled = ref(false)
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.initializeTheme()
|
this.initializeTheme()
|
||||||
}
|
}
|
||||||
|
|
||||||
private initializeTheme() {
|
private initializeTheme() {
|
||||||
if (typeof window === 'undefined') return
|
if (typeof window === 'undefined') return
|
||||||
|
|
||||||
// Load saved preferences
|
// Load saved preferences
|
||||||
const savedTheme = localStorage.getItem(STORAGE_KEY_THEME) || 'christmas'
|
const savedTheme = localStorage.getItem(STORAGE_KEY_THEME) || 'christmas'
|
||||||
const savedMode = localStorage.getItem(STORAGE_KEY_MODE) as DisplayMode | null
|
const savedMode = localStorage.getItem(STORAGE_KEY_MODE) as DisplayMode | null
|
||||||
const savedAmoled = localStorage.getItem(STORAGE_KEY_AMOLED) === 'true'
|
const savedAmoledPref = localStorage.getItem(STORAGE_KEY_AMOLED)
|
||||||
|
|
||||||
// Set theme
|
// Set theme
|
||||||
if (themeRegistry[savedTheme]) {
|
if (themeRegistry[savedTheme]) {
|
||||||
this.state.value.currentTheme = savedTheme
|
this.state.value.currentTheme = savedTheme
|
||||||
this.state.value.theme = themeRegistry[savedTheme]
|
this.state.value.theme = themeRegistry[savedTheme]
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set amoled preference
|
// Set amoled preference
|
||||||
this.amoledEnabled.value = savedAmoled
|
this.amoledEnabled.value = savedAmoledPref === null ? true : savedAmoledPref === 'true'
|
||||||
|
|
||||||
// Set mode
|
// Set mode
|
||||||
if (savedMode) {
|
if (savedMode) {
|
||||||
this.state.value.currentMode = savedMode
|
this.state.value.currentMode = savedMode
|
||||||
} else {
|
} else {
|
||||||
// Detect system preference for initial mode
|
// Detect system preference for initial mode
|
||||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||||
this.state.value.currentMode = prefersDark ? 'dark' : 'light'
|
this.state.value.currentMode = prefersDark ? 'dark' : 'light'
|
||||||
}
|
}
|
||||||
|
|
||||||
this.applyTheme()
|
|
||||||
|
this.applyTheme()
|
||||||
// Listen for system theme changes (only if user hasn't set a preference)
|
|
||||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
// Listen for system theme changes (only if user hasn't set a preference)
|
||||||
if (!localStorage.getItem(STORAGE_KEY_MODE)) {
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
||||||
this.state.value.currentMode = e.matches ? 'dark' : 'light'
|
if (!localStorage.getItem(STORAGE_KEY_MODE)) {
|
||||||
this.applyTheme()
|
this.state.value.currentMode = e.matches ? 'dark' : 'light'
|
||||||
}
|
this.applyTheme()
|
||||||
})
|
}
|
||||||
}
|
})
|
||||||
|
}
|
||||||
private applyTheme() {
|
|
||||||
if (typeof document === 'undefined') return
|
private applyTheme() {
|
||||||
|
if (typeof document === 'undefined') return
|
||||||
const { currentMode, theme } = this.state.value
|
|
||||||
const modeColors = theme.modes[currentMode]
|
const { currentMode, theme } = this.state.value
|
||||||
|
const modeColors = theme.modes[currentMode]
|
||||||
this.applyDOMClasses(currentMode)
|
|
||||||
this.applyCSSVariables(modeColors, theme)
|
this.applyDOMClasses(currentMode)
|
||||||
}
|
this.applyCSSVariables(modeColors, theme)
|
||||||
|
}
|
||||||
private applyDOMClasses(mode: DisplayMode) {
|
|
||||||
const root = document.documentElement
|
private applyDOMClasses(mode: DisplayMode) {
|
||||||
|
const root = document.documentElement
|
||||||
// Remove all mode classes
|
|
||||||
root.classList.remove('dark', 'light', 'amoled')
|
// Remove all mode classes
|
||||||
|
root.classList.remove('dark', 'light', 'amoled')
|
||||||
// Add current mode class
|
|
||||||
root.classList.add(mode)
|
// Add current mode class
|
||||||
|
root.classList.add(mode)
|
||||||
// Add amoled class if enabled in dark mode
|
|
||||||
if (mode === 'dark' && this.amoledEnabled.value) {
|
// Add amoled class if enabled in dark mode
|
||||||
root.classList.add('amoled')
|
if (mode === 'dark' && this.amoledEnabled.value) {
|
||||||
}
|
root.classList.add('amoled')
|
||||||
|
}
|
||||||
// Add dark class for backward compatibility with VitePress
|
|
||||||
if (mode === 'dark') {
|
// Add dark class for backward compatibility with VitePress
|
||||||
root.classList.add('dark')
|
if (mode === 'dark') {
|
||||||
}
|
root.classList.add('dark')
|
||||||
}
|
}
|
||||||
|
|
||||||
private applyCSSVariables(colors: ModeColors, theme: Theme) {
|
// Remove amoled class if current mode is not 'dark'
|
||||||
if (typeof document === 'undefined') return
|
if (mode !== 'dark') {
|
||||||
|
root.classList.remove('amoled')
|
||||||
const root = document.documentElement
|
}
|
||||||
|
}
|
||||||
// Clear ALL inline styles related to theming to ensure clean slate
|
|
||||||
const allStyleProps = Array.from(root.style)
|
private applyCSSVariables(colors: ModeColors, theme: Theme) {
|
||||||
allStyleProps.forEach(prop => {
|
if (typeof document === 'undefined') return
|
||||||
if (prop.startsWith('--vp-')) {
|
|
||||||
root.style.removeProperty(prop)
|
const root = document.documentElement
|
||||||
}
|
|
||||||
})
|
// Clear ALL inline styles related to theming to ensure clean slate
|
||||||
let bgColor = colors.bg
|
const allStyleProps = Array.from(root.style)
|
||||||
let bgAltColor = colors.bgAlt
|
allStyleProps.forEach(prop => {
|
||||||
let bgElvColor = colors.bgElv
|
if (prop.startsWith('--vp-')) {
|
||||||
|
root.style.removeProperty(prop)
|
||||||
if (this.state.value.currentMode === 'dark' && this.amoledEnabled.value) {
|
}
|
||||||
bgColor = '#000000'
|
})
|
||||||
bgAltColor = '#000000'
|
let bgColor = colors.bg
|
||||||
bgElvColor = 'rgba(0, 0, 0, 0.9)'
|
let bgAltColor = colors.bgAlt
|
||||||
}
|
let bgElvColor = colors.bgElv
|
||||||
|
|
||||||
// Apply brand colors only if theme specifies them
|
if (this.state.value.currentMode === 'dark' && this.amoledEnabled.value) {
|
||||||
// Otherwise, remove inline styles to let ColorPicker CSS take effect
|
bgColor = '#000000'
|
||||||
if (colors.brand && (colors.brand[1] || colors.brand[2] || colors.brand[3] || colors.brand.soft)) {
|
bgAltColor = '#000000'
|
||||||
if (colors.brand[1]) root.style.setProperty('--vp-c-brand-1', colors.brand[1])
|
bgElvColor = 'rgba(0, 0, 0, 0.9)'
|
||||||
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])
|
|
||||||
if (colors.brand.soft) root.style.setProperty('--vp-c-brand-soft', colors.brand.soft)
|
// Apply brand colors only if theme specifies them
|
||||||
} else {
|
// Otherwise, remove inline styles to let ColorPicker CSS take effect
|
||||||
// Remove inline brand color styles so ColorPicker CSS can apply
|
if (colors.brand && (colors.brand[1] || colors.brand[2] || colors.brand[3] || colors.brand.soft)) {
|
||||||
root.style.removeProperty('--vp-c-brand-1')
|
if (colors.brand[1]) root.style.setProperty('--vp-c-brand-1', colors.brand[1])
|
||||||
root.style.removeProperty('--vp-c-brand-2')
|
if (colors.brand[2]) root.style.setProperty('--vp-c-brand-2', colors.brand[2])
|
||||||
root.style.removeProperty('--vp-c-brand-3')
|
if (colors.brand[3]) root.style.setProperty('--vp-c-brand-3', colors.brand[3])
|
||||||
root.style.removeProperty('--vp-c-brand-soft')
|
if (colors.brand.soft) root.style.setProperty('--vp-c-brand-soft', colors.brand.soft)
|
||||||
}
|
} else {
|
||||||
|
// Remove inline brand color styles so ColorPicker CSS can apply
|
||||||
// Apply background colors
|
root.style.removeProperty('--vp-c-brand-1')
|
||||||
root.style.setProperty('--vp-c-bg', bgColor)
|
root.style.removeProperty('--vp-c-brand-2')
|
||||||
root.style.setProperty('--vp-c-bg-alt', bgAltColor)
|
root.style.removeProperty('--vp-c-brand-3')
|
||||||
root.style.setProperty('--vp-c-bg-elv', bgElvColor)
|
root.style.removeProperty('--vp-c-brand-soft')
|
||||||
if (colors.bgMark) {
|
}
|
||||||
root.style.setProperty('--vp-c-bg-mark', colors.bgMark)
|
|
||||||
}
|
// Apply background colors
|
||||||
|
root.style.setProperty('--vp-c-bg', bgColor)
|
||||||
// Apply text colors - always set them to ensure proper theme switching
|
root.style.setProperty('--vp-c-bg-alt', bgAltColor)
|
||||||
if (colors.text) {
|
root.style.setProperty('--vp-c-bg-elv', bgElvColor)
|
||||||
if (colors.text[1]) root.style.setProperty('--vp-c-text-1', colors.text[1])
|
if (colors.bgMark) {
|
||||||
if (colors.text[2]) root.style.setProperty('--vp-c-text-2', colors.text[2])
|
root.style.setProperty('--vp-c-bg-mark', colors.bgMark)
|
||||||
if (colors.text[3]) root.style.setProperty('--vp-c-text-3', colors.text[3])
|
}
|
||||||
} else {
|
|
||||||
// Remove inline styles if theme doesn't specify text colors
|
// Apply text colors - always set them to ensure proper theme switching
|
||||||
// This allows CSS variables from style.scss to take effect
|
if (colors.text) {
|
||||||
root.style.removeProperty('--vp-c-text-1')
|
if (colors.text[1]) root.style.setProperty('--vp-c-text-1', colors.text[1])
|
||||||
root.style.removeProperty('--vp-c-text-2')
|
if (colors.text[2]) root.style.setProperty('--vp-c-text-2', colors.text[2])
|
||||||
root.style.removeProperty('--vp-c-text-3')
|
if (colors.text[3]) root.style.setProperty('--vp-c-text-3', colors.text[3])
|
||||||
}
|
} else {
|
||||||
|
// Remove inline styles if theme doesn't specify text colors
|
||||||
// Debug: log applied text color variables so we can inspect in console
|
// This allows CSS variables from style.scss to take effect
|
||||||
try {
|
root.style.removeProperty('--vp-c-text-1')
|
||||||
// eslint-disable-next-line no-console
|
root.style.removeProperty('--vp-c-text-2')
|
||||||
console.log('[ThemeHandler] applied text vars', {
|
root.style.removeProperty('--vp-c-text-3')
|
||||||
theme: theme.name,
|
}
|
||||||
mode: this.state.value.currentMode,
|
|
||||||
vp_text_1: root.style.getPropertyValue('--vp-c-text-1'),
|
// Debug: log applied text color variables so we can inspect in console
|
||||||
vp_text_2: root.style.getPropertyValue('--vp-c-text-2'),
|
try {
|
||||||
vp_text_3: root.style.getPropertyValue('--vp-c-text-3')
|
// eslint-disable-next-line no-console
|
||||||
})
|
console.log('[ThemeHandler] applied text vars', {
|
||||||
} catch (e) {
|
theme: theme.name,
|
||||||
// ignore
|
mode: this.state.value.currentMode,
|
||||||
}
|
vp_text_1: root.style.getPropertyValue('--vp-c-text-1'),
|
||||||
|
vp_text_2: root.style.getPropertyValue('--vp-c-text-2'),
|
||||||
// Apply button colors
|
vp_text_3: root.style.getPropertyValue('--vp-c-text-3')
|
||||||
root.style.setProperty('--vp-button-brand-bg', colors.button.brand.bg)
|
})
|
||||||
root.style.setProperty('--vp-button-brand-border', colors.button.brand.border)
|
} catch (e) {
|
||||||
root.style.setProperty('--vp-button-brand-text', colors.button.brand.text)
|
// ignore
|
||||||
root.style.setProperty('--vp-button-brand-hover-border', colors.button.brand.hoverBorder)
|
}
|
||||||
root.style.setProperty('--vp-button-brand-hover-text', colors.button.brand.hoverText)
|
|
||||||
root.style.setProperty('--vp-button-brand-hover-bg', colors.button.brand.hoverBg)
|
// Apply button colors
|
||||||
root.style.setProperty('--vp-button-brand-active-border', colors.button.brand.activeBorder)
|
root.style.setProperty('--vp-button-brand-bg', colors.button.brand.bg)
|
||||||
root.style.setProperty('--vp-button-brand-active-text', colors.button.brand.activeText)
|
root.style.setProperty('--vp-button-brand-border', colors.button.brand.border)
|
||||||
root.style.setProperty('--vp-button-brand-active-bg', colors.button.brand.activeBg)
|
root.style.setProperty('--vp-button-brand-text', colors.button.brand.text)
|
||||||
root.style.setProperty('--vp-button-alt-bg', colors.button.alt.bg)
|
root.style.setProperty('--vp-button-brand-hover-border', colors.button.brand.hoverBorder)
|
||||||
root.style.setProperty('--vp-button-alt-text', colors.button.alt.text)
|
root.style.setProperty('--vp-button-brand-hover-text', colors.button.brand.hoverText)
|
||||||
root.style.setProperty('--vp-button-alt-hover-bg', colors.button.alt.hoverBg)
|
root.style.setProperty('--vp-button-brand-hover-bg', colors.button.brand.hoverBg)
|
||||||
root.style.setProperty('--vp-button-alt-hover-text', colors.button.alt.hoverText)
|
root.style.setProperty('--vp-button-brand-active-border', colors.button.brand.activeBorder)
|
||||||
|
root.style.setProperty('--vp-button-brand-active-text', colors.button.brand.activeText)
|
||||||
// Apply custom block colors
|
root.style.setProperty('--vp-button-brand-active-bg', colors.button.brand.activeBg)
|
||||||
const blocks = ['info', 'tip', 'warning', 'danger'] as const
|
root.style.setProperty('--vp-button-alt-bg', colors.button.alt.bg)
|
||||||
blocks.forEach((block) => {
|
root.style.setProperty('--vp-button-alt-text', colors.button.alt.text)
|
||||||
const blockColors = colors.customBlock[block]
|
root.style.setProperty('--vp-button-alt-hover-bg', colors.button.alt.hoverBg)
|
||||||
root.style.setProperty(`--vp-custom-block-${block}-bg`, blockColors.bg)
|
root.style.setProperty('--vp-button-alt-hover-text', colors.button.alt.hoverText)
|
||||||
root.style.setProperty(`--vp-custom-block-${block}-border`, blockColors.border)
|
|
||||||
root.style.setProperty(`--vp-custom-block-${block}-text`, blockColors.text)
|
// Apply custom block colors
|
||||||
root.style.setProperty(`--vp-custom-block-${block}-text-deep`, blockColors.textDeep)
|
const blocks = ['info', 'tip', 'warning', 'danger'] as const
|
||||||
})
|
blocks.forEach((block) => {
|
||||||
|
const blockColors = colors.customBlock[block]
|
||||||
// Apply selection color
|
root.style.setProperty(`--vp-custom-block-${block}-bg`, blockColors.bg)
|
||||||
root.style.setProperty('--vp-c-selection-bg', colors.selection.bg)
|
root.style.setProperty(`--vp-custom-block-${block}-border`, blockColors.border)
|
||||||
|
root.style.setProperty(`--vp-custom-block-${block}-text`, blockColors.text)
|
||||||
// Apply home hero colors (if defined)
|
root.style.setProperty(`--vp-custom-block-${block}-text-deep`, blockColors.textDeep)
|
||||||
if (colors.home) {
|
})
|
||||||
root.style.setProperty('--vp-home-hero-name-color', colors.home.heroNameColor)
|
|
||||||
root.style.setProperty('--vp-home-hero-name-background', colors.home.heroNameBackground)
|
// Apply selection color
|
||||||
root.style.setProperty('--vp-home-hero-image-background-image', colors.home.heroImageBackground)
|
root.style.setProperty('--vp-c-selection-bg', colors.selection.bg)
|
||||||
root.style.setProperty('--vp-home-hero-image-filter', colors.home.heroImageFilter)
|
|
||||||
} else {
|
// Apply home hero colors (if defined)
|
||||||
// Remove home hero color styles if theme doesn't specify them
|
if (colors.home) {
|
||||||
root.style.removeProperty('--vp-home-hero-name-color')
|
root.style.setProperty('--vp-home-hero-name-color', colors.home.heroNameColor)
|
||||||
root.style.removeProperty('--vp-home-hero-name-background')
|
root.style.setProperty('--vp-home-hero-name-background', colors.home.heroNameBackground)
|
||||||
root.style.removeProperty('--vp-home-hero-image-background-image')
|
root.style.setProperty('--vp-home-hero-image-background-image', colors.home.heroImageBackground)
|
||||||
root.style.removeProperty('--vp-home-hero-image-filter')
|
root.style.setProperty('--vp-home-hero-image-filter', colors.home.heroImageFilter)
|
||||||
}
|
} else {
|
||||||
|
// Remove home hero color styles if theme doesn't specify them
|
||||||
// Apply fonts (if defined)
|
root.style.removeProperty('--vp-home-hero-name-color')
|
||||||
if (theme.fonts?.body) {
|
root.style.removeProperty('--vp-home-hero-name-background')
|
||||||
root.style.setProperty('--vp-font-family-base', theme.fonts.body)
|
root.style.removeProperty('--vp-home-hero-image-background-image')
|
||||||
} else {
|
root.style.removeProperty('--vp-home-hero-image-filter')
|
||||||
root.style.removeProperty('--vp-font-family-base')
|
}
|
||||||
}
|
|
||||||
if (theme.fonts?.heading) {
|
// Apply fonts (if defined)
|
||||||
root.style.setProperty('--vp-font-family-heading', theme.fonts.heading)
|
if (theme.fonts?.body) {
|
||||||
} else {
|
root.style.setProperty('--vp-font-family-base', theme.fonts.body)
|
||||||
root.style.removeProperty('--vp-font-family-heading')
|
} else {
|
||||||
}
|
root.style.removeProperty('--vp-font-family-base')
|
||||||
|
}
|
||||||
// Apply border radius (if defined)
|
if (theme.fonts?.heading) {
|
||||||
if (theme.borderRadius) {
|
root.style.setProperty('--vp-font-family-heading', theme.fonts.heading)
|
||||||
root.style.setProperty('--vp-border-radius', theme.borderRadius)
|
} else {
|
||||||
} else {
|
root.style.removeProperty('--vp-font-family-heading')
|
||||||
root.style.removeProperty('--vp-border-radius')
|
}
|
||||||
}
|
|
||||||
|
// Apply border radius (if defined)
|
||||||
// Apply spacing (if defined)
|
if (theme.borderRadius) {
|
||||||
if (theme.spacing) {
|
root.style.setProperty('--vp-border-radius', theme.borderRadius)
|
||||||
if (theme.spacing.small) root.style.setProperty('--vp-spacing-small', theme.spacing.small)
|
} else {
|
||||||
else root.style.removeProperty('--vp-spacing-small')
|
root.style.removeProperty('--vp-border-radius')
|
||||||
if (theme.spacing.medium) root.style.setProperty('--vp-spacing-medium', theme.spacing.medium)
|
}
|
||||||
else root.style.removeProperty('--vp-spacing-medium')
|
|
||||||
if (theme.spacing.large) root.style.setProperty('--vp-spacing-large', theme.spacing.large)
|
// Apply spacing (if defined)
|
||||||
else root.style.removeProperty('--vp-spacing-large')
|
if (theme.spacing) {
|
||||||
} else {
|
if (theme.spacing.small) root.style.setProperty('--vp-spacing-small', theme.spacing.small)
|
||||||
root.style.removeProperty('--vp-spacing-small')
|
else root.style.removeProperty('--vp-spacing-small')
|
||||||
root.style.removeProperty('--vp-spacing-medium')
|
if (theme.spacing.medium) root.style.setProperty('--vp-spacing-medium', theme.spacing.medium)
|
||||||
root.style.removeProperty('--vp-spacing-large')
|
else root.style.removeProperty('--vp-spacing-medium')
|
||||||
}
|
if (theme.spacing.large) root.style.setProperty('--vp-spacing-large', theme.spacing.large)
|
||||||
|
else root.style.removeProperty('--vp-spacing-large')
|
||||||
// Apply custom properties (if defined)
|
} else {
|
||||||
if (theme.customProperties) {
|
root.style.removeProperty('--vp-spacing-small')
|
||||||
Object.entries(theme.customProperties).forEach(([key, value]) => {
|
root.style.removeProperty('--vp-spacing-medium')
|
||||||
root.style.setProperty(key, value)
|
root.style.removeProperty('--vp-spacing-large')
|
||||||
})
|
}
|
||||||
}
|
|
||||||
|
// Apply custom properties (if defined)
|
||||||
// Apply custom logo (if defined)
|
if (theme.customProperties) {
|
||||||
if (theme.logo) {
|
Object.entries(theme.customProperties).forEach(([key, value]) => {
|
||||||
root.style.setProperty('--vp-theme-logo', `url(${theme.logo})`)
|
root.style.setProperty(key, value)
|
||||||
} else {
|
})
|
||||||
root.style.removeProperty('--vp-theme-logo')
|
}
|
||||||
}
|
|
||||||
}
|
// Apply custom logo (if defined)
|
||||||
|
if (theme.logo) {
|
||||||
public setTheme(themeName: string) {
|
root.style.setProperty('--vp-theme-logo', `url(${theme.logo})`)
|
||||||
if (!themeRegistry[themeName]) {
|
} else {
|
||||||
console.warn(`Theme "${themeName}" not found. Using christmas theme.`)
|
root.style.removeProperty('--vp-theme-logo')
|
||||||
themeName = 'christmas'
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.state.value.currentTheme = themeName
|
public setTheme(themeName: string) {
|
||||||
this.state.value.theme = themeRegistry[themeName]
|
if (!themeRegistry[themeName]) {
|
||||||
localStorage.setItem(STORAGE_KEY_THEME, themeName)
|
console.warn(`Theme "${themeName}" not found. Using christmas theme.`)
|
||||||
this.applyTheme()
|
themeName = 'christmas'
|
||||||
|
}
|
||||||
// Force re-apply ColorPicker colors if theme doesn't specify brand colors
|
|
||||||
this.ensureColorPickerColors()
|
this.state.value.currentTheme = themeName
|
||||||
}
|
this.state.value.theme = themeRegistry[themeName]
|
||||||
|
localStorage.setItem(STORAGE_KEY_THEME, themeName)
|
||||||
public setMode(mode: DisplayMode) {
|
this.applyTheme()
|
||||||
this.state.value.currentMode = mode
|
|
||||||
localStorage.setItem(STORAGE_KEY_MODE, mode)
|
// Force re-apply ColorPicker colors if theme doesn't specify brand colors
|
||||||
this.applyTheme()
|
this.ensureColorPickerColors()
|
||||||
}
|
}
|
||||||
|
|
||||||
public toggleMode() {
|
public setMode(mode: DisplayMode) {
|
||||||
const currentMode = this.state.value.currentMode
|
this.state.value.currentMode = mode
|
||||||
|
localStorage.setItem(STORAGE_KEY_MODE, mode)
|
||||||
// Toggle between light and dark
|
this.applyTheme()
|
||||||
const newMode: DisplayMode = currentMode === 'light' ? 'dark' : 'light'
|
}
|
||||||
|
|
||||||
this.setMode(newMode)
|
public toggleMode() {
|
||||||
}
|
const currentMode = this.state.value.currentMode
|
||||||
|
|
||||||
public setAmoledEnabled(enabled: boolean) {
|
// Toggle between light and dark
|
||||||
this.amoledEnabled.value = enabled
|
const newMode: DisplayMode = currentMode === 'light' ? 'dark' : 'light'
|
||||||
localStorage.setItem(STORAGE_KEY_AMOLED, enabled.toString())
|
|
||||||
this.applyTheme()
|
this.setMode(newMode)
|
||||||
}
|
}
|
||||||
|
|
||||||
public getAmoledEnabled() {
|
public setAmoledEnabled(enabled: boolean) {
|
||||||
return this.amoledEnabled.value
|
this.amoledEnabled.value = enabled
|
||||||
}
|
localStorage.setItem(STORAGE_KEY_AMOLED, enabled.toString())
|
||||||
|
this.applyTheme()
|
||||||
public toggleAmoled() {
|
}
|
||||||
this.setAmoledEnabled(!this.amoledEnabled.value)
|
|
||||||
}
|
public getAmoledEnabled() {
|
||||||
|
return this.amoledEnabled.value
|
||||||
public getAmoledEnabledRef() {
|
}
|
||||||
return this.amoledEnabled
|
|
||||||
}
|
public toggleAmoled() {
|
||||||
|
this.setAmoledEnabled(!this.amoledEnabled.value)
|
||||||
private ensureColorPickerColors() {
|
}
|
||||||
// If theme doesn't specify brand colors, force ColorPicker to reapply its selection
|
|
||||||
const currentMode = this.state.value.currentMode
|
public getAmoledEnabledRef() {
|
||||||
const modeColors = this.state.value.theme.modes[currentMode]
|
return this.amoledEnabled
|
||||||
|
}
|
||||||
if (!modeColors.brand || !modeColors.brand[1]) {
|
|
||||||
// Trigger a custom event that ColorPicker can listen to
|
private ensureColorPickerColors() {
|
||||||
if (typeof window !== 'undefined') {
|
// If theme doesn't specify brand colors, force ColorPicker to reapply its selection
|
||||||
window.dispatchEvent(new CustomEvent('theme-changed-apply-colors'))
|
const currentMode = this.state.value.currentMode
|
||||||
}
|
const modeColors = this.state.value.theme.modes[currentMode]
|
||||||
}
|
|
||||||
}
|
if (!modeColors.brand || !modeColors.brand[1]) {
|
||||||
|
// Trigger a custom event that ColorPicker can listen to
|
||||||
public getState() {
|
if (typeof window !== 'undefined') {
|
||||||
return this.state
|
window.dispatchEvent(new CustomEvent('theme-changed-apply-colors'))
|
||||||
}
|
}
|
||||||
|
}
|
||||||
public getMode() {
|
}
|
||||||
return this.state.value.currentMode
|
|
||||||
}
|
public getState() {
|
||||||
|
return this.state
|
||||||
public getTheme() {
|
}
|
||||||
return this.state.value.currentTheme
|
|
||||||
}
|
public getMode() {
|
||||||
|
return this.state.value.currentMode
|
||||||
public getCurrentTheme() {
|
}
|
||||||
return this.state.value.theme
|
|
||||||
}
|
public getTheme() {
|
||||||
|
return this.state.value.currentTheme
|
||||||
public getAvailableThemes() {
|
}
|
||||||
return Object.keys(themeRegistry).map(key => ({
|
|
||||||
name: key,
|
public getCurrentTheme() {
|
||||||
displayName: themeRegistry[key].displayName
|
return this.state.value.theme
|
||||||
}))
|
}
|
||||||
}
|
|
||||||
|
public getAvailableThemes() {
|
||||||
public isDarkMode() {
|
return Object.keys(themeRegistry).map(key => ({
|
||||||
const mode = this.state.value.currentMode
|
name: key,
|
||||||
return mode === 'dark'
|
displayName: themeRegistry[key].displayName
|
||||||
}
|
}))
|
||||||
|
}
|
||||||
public isAmoledMode() {
|
|
||||||
return this.state.value.currentMode === 'dark' && this.amoledEnabled.value
|
public isDarkMode() {
|
||||||
}
|
const mode = this.state.value.currentMode
|
||||||
}
|
return mode === 'dark'
|
||||||
|
}
|
||||||
// Global theme handler instance
|
|
||||||
let themeHandlerInstance: ThemeHandler | null = null
|
public isAmoledMode() {
|
||||||
|
return this.state.value.currentMode === 'dark' && this.amoledEnabled.value
|
||||||
export function useThemeHandler() {
|
}
|
||||||
if (!themeHandlerInstance) {
|
}
|
||||||
themeHandlerInstance = new ThemeHandler()
|
|
||||||
}
|
// Global theme handler instance
|
||||||
return themeHandlerInstance
|
let themeHandlerInstance: ThemeHandler | null = null
|
||||||
}
|
|
||||||
|
export function useThemeHandler() {
|
||||||
// Composable for use in Vue components
|
if (!themeHandlerInstance) {
|
||||||
export function useTheme() {
|
themeHandlerInstance = new ThemeHandler()
|
||||||
const handler = useThemeHandler()
|
}
|
||||||
const state = handler.getState()
|
return themeHandlerInstance
|
||||||
|
}
|
||||||
onMounted(() => {
|
|
||||||
// Ensure theme is applied on mount
|
// Composable for use in Vue components
|
||||||
handler.setMode(handler.getMode())
|
export function useTheme() {
|
||||||
})
|
const handler = useThemeHandler()
|
||||||
|
const state = handler.getState()
|
||||||
return {
|
|
||||||
mode: computed(() => state.value.currentMode),
|
onMounted(() => {
|
||||||
themeName: computed(() => state.value.currentTheme),
|
// Ensure theme is applied on mount
|
||||||
theme: computed(() => state.value.theme),
|
handler.setMode(handler.getMode())
|
||||||
setMode: (mode: DisplayMode) => handler.setMode(mode),
|
})
|
||||||
setTheme: (themeName: string) => handler.setTheme(themeName),
|
|
||||||
toggleMode: () => handler.toggleMode(),
|
return {
|
||||||
getAvailableThemes: () => handler.getAvailableThemes(),
|
mode: computed(() => state.value.currentMode),
|
||||||
isDarkMode: () => handler.isDarkMode(),
|
themeName: computed(() => state.value.currentTheme),
|
||||||
isAmoledMode: () => handler.isAmoledMode(),
|
theme: computed(() => state.value.theme),
|
||||||
amoledEnabled: handler.getAmoledEnabledRef(),
|
setMode: (mode: DisplayMode) => handler.setMode(mode),
|
||||||
setAmoledEnabled: (enabled: boolean) => handler.setAmoledEnabled(enabled),
|
setTheme: (themeName: string) => handler.setTheme(themeName),
|
||||||
toggleAmoled: () => handler.toggleAmoled(),
|
toggleMode: () => handler.toggleMode(),
|
||||||
state
|
getAvailableThemes: () => handler.getAvailableThemes(),
|
||||||
}
|
isDarkMode: () => handler.isDarkMode(),
|
||||||
}
|
isAmoledMode: () => handler.isAmoledMode(),
|
||||||
|
amoledEnabled: handler.getAmoledEnabledRef(),
|
||||||
|
setAmoledEnabled: (enabled: boolean) => handler.setAmoledEnabled(enabled),
|
||||||
|
toggleAmoled: () => handler.toggleAmoled(),
|
||||||
|
state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user