Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-22 07:19:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add support for custom light color palette (#2156)

Browse Source 
Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Chenlei Hu
2025-01-04 18:53:47 -05:00
committed by GitHub
parent e46706777c
commit e65653c107
10 changed files with 70 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/GraphView.vue
View File

@@ -13,7 +13,7 @@
import { useEventListener } from '@vueuse/core'
import type { ToastMessageOptions } from 'primevue/toast'
import { useToast } from 'primevue/usetoast'
import { computed, onBeforeUnmount, onMounted, watch, watchEffect } from 'vue'
import { onBeforeUnmount, onMounted, watch, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
import BrowserTabTitle from '@/components/BrowserTabTitle.vue'
@@ -41,6 +41,7 @@ import {
import { useServerConfigStore } from '@/stores/serverConfigStore'
import { useSettingStore } from '@/stores/settingStore'
import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
import { useWorkspaceStore } from '@/stores/workspaceStore'
import { StatusWsMessageStatus } from '@/types/apiTypes'
@@ -51,18 +52,16 @@ const { t } = useI18n()
const toast = useToast()
const settingStore = useSettingStore()
const executionStore = useExecutionStore()
const theme = computed<string>(() => settingStore.get('Comfy.ColorPalette'))
const colorPaletteStore = useColorPaletteStore()
watch(
theme,
() => colorPaletteStore.completedActivePalette,
(newTheme) => {
const DARK_THEME_CLASS = 'dark-theme'
const isDarkTheme = newTheme !== 'light'
if (isDarkTheme) {
document.body.classList.add(DARK_THEME_CLASS)
} else {
if (newTheme.light_theme) {
document.body.classList.remove(DARK_THEME_CLASS)
} else {
document.body.classList.add(DARK_THEME_CLASS)
}
},
{ immediate: true }