summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components
diff options
context:
space:
mode:
authorかっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>2025-05-21 14:19:34 +0900
committerGitHub <noreply@github.com>2025-05-21 14:19:34 +0900
commit2619f69238034dbd80942a26550ef25b903bc1dc (patch)
treed4e107ecd0acac194aeb6fa54072e746a54a6674 /packages/frontend/src/components
parentenhance(frontend/aiscript): AiScriptからtoastを発行できるように (#... (diff)
downloadmisskey-2619f69238034dbd80942a26550ef25b903bc1dc.tar.gz
misskey-2619f69238034dbd80942a26550ef25b903bc1dc.tar.bz2
misskey-2619f69238034dbd80942a26550ef25b903bc1dc.zip
enhance(frontend): テーマ切り替えのアニメーションをView Transitionに変更 (#15974)
* enhance(frontend): テーマ切り替えのアニメーションをView Transitionに変更 * fix lint * fix: 切り替え時間を0.5sに
Diffstat (limited to 'packages/frontend/src/components')
-rw-r--r--packages/frontend/src/components/MkFoldableSection.vue16
1 files changed, 14 insertions, 2 deletions
diff --git a/packages/frontend/src/components/MkFoldableSection.vue b/packages/frontend/src/components/MkFoldableSection.vue
index b9888d9b64..0fa7bea7ab 100644
--- a/packages/frontend/src/components/MkFoldableSection.vue
+++ b/packages/frontend/src/components/MkFoldableSection.vue
@@ -31,9 +31,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
-import { onMounted, ref, useTemplateRef, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
import { miLocalStorage } from '@/local-storage.js';
import { prefer } from '@/preferences.js';
+import { globalEvents } from '@/events.js';
import { getBgColor } from '@/utility/get-bg-color.js';
const miLocalStoragePrefix = 'ui:folder:' as const;
@@ -83,8 +84,19 @@ function afterLeave(el: Element) {
el.style.height = '';
}
+function updateBgColor() {
+ if (rootEl.value) {
+ parentBg.value = getBgColor(rootEl.value.parentElement);
+ }
+}
+
onMounted(() => {
- parentBg.value = getBgColor(rootEl.value?.parentElement);
+ updateBgColor();
+ globalEvents.on('themeChanging', updateBgColor);
+});
+
+onBeforeUnmount(() => {
+ globalEvents.off('themeChanging', updateBgColor);
});
</script>