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

Fix theme toggle (#200)

Browse Source 
* Use builtin event on color change

* Fix theme toggle

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Chenlei Hu
2024-07-22 16:46:02 -04:00
committed by GitHub
parent 189662cd7c
commit bd68617c82
26 changed files with 25 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,12 +3,12 @@
</template>
<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import SideBarIcon from "./SideBarIcon.vue";
import { app } from "@/scripts/app";
const isDarkMode = ref(false);
const icon = computed(() => (isDarkMode.value ? "pi pi-sun" : "pi pi-moon"));
const icon = computed(() => (isDarkMode.value ? "pi pi-moon" : "pi pi-sun"));
const themeId = computed(() => (isDarkMode.value ? "dark" : "light"));
const toggleTheme = () => {
isDarkMode.value = !isDarkMode.value;
@@ -17,4 +17,17 @@ const toggleTheme = () => {
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>