versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 💫 Animate color scheme changes

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-25 17:39:07 +01:00
parent 53cd4fc57d
commit 14c1dea7a5
No known key found for this signature in database
1 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app.vue
View file

@ -39,7 +39,14 @@ const theme = useSetting(SettingIds.Theme) as Ref<EnumSetting>;
const colorMode = useColorMode(); const colorMode = useColorMode();
watch(theme.value, () => { watch(theme.value, () => {
// Add theme-changing class to html to trigger transition
document.documentElement.classList.add("theme-changing");
colorMode.preference = theme.value.value; colorMode.preference = theme.value.value;
setTimeout(() => {
// Remove theme-changing class after transition
document.documentElement.classList.remove("theme-changing");
}, 1000);
}); });
useSeoMeta({ useSeoMeta({
@ -87,4 +94,9 @@ useCacheRefresh(client);
body { body {
font-family: Inter, sans-serif; font-family: Inter, sans-serif;
} }
html.theme-changing * {
/* Stroke and fill aren't animatable */
transition: background 1s ease, border 1s ease, color 1s ease, box-shadow 1s ease;
}
</style> </style>