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

[Major Refactor] Use pinia store to manage setting & nodeDef (#202)

Browse Source 
* Node def store and settings tore

* Fix initial values

* Remove legacy setting listen

* Fix searchbox test
This commit is contained in:
Chenlei Hu
2024-07-24 11:49:09 -04:00
committed by GitHub
parent 84d8c5fc16
commit b73fe80761
10 changed files with 186 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/sidebar/SideBarThemeToggleIcon.vue
View File

@@ -8,31 +8,23 @@
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { computed, ref } from "vue";
import SideBarIcon from "./SideBarIcon.vue";
import { app } from "@/scripts/app";
import { useSettingStore } from "@/stores/settingStore";
const isDarkMode = ref(false);
const previousDarkTheme = ref("dark");
const currentTheme = computed(() =>
useSettingStore().get("Comfy.ColorPalette", "dark")
);
const isDarkMode = computed(() => currentTheme.value !== "light");
const icon = computed(() => (isDarkMode.value ? "pi pi-moon" : "pi pi-sun"));
const themeId = computed(() => (isDarkMode.value ? "dark" : "light"));
const toggleTheme = () => {
isDarkMode.value = !isDarkMode.value;
if (isDarkMode.value) {
previousDarkTheme.value = currentTheme.value;
useSettingStore().set("Comfy.ColorPalette", "light");
} else {
useSettingStore().set("Comfy.ColorPalette", previousDarkTheme.value);
}
};
watch(themeId, (newThemeId) => {
app.ui.settings.setSettingValue("Comfy.ColorPalette", newThemeId);
});
const updateTheme = (e) => {
isDarkMode.value = e.detail.value !== "light";
};
onMounted(() => {
app.ui.settings.addEventListener("Comfy.ColorPalette.change", updateTheme);
app.ui.settings.refreshSetting("Comfy.ColorPalette");
});
onUnmounted(() => {
app.ui.settings.removeEventListener("Comfy.ColorPalette.change", updateTheme);
});
</script>