Theme Transitions

Ask us anything
1

Hey WeWeb community!

First, I’m loving the built in theme handler, I set everything up according to the documentation and it’s working perfectly :slight_smile:

My only small critique is that the transition is pretty abrupt. Does anything know if there’s a way have the light / dark mode workflow have a short transition?

Thanks!

2

Hi lp :waving_hand:

I’m not sure we are able to animate this transition, but just in case I have tagged the tech team internally and will let you know if it is possible.

Cheers!

3

Hi @lp_ih

You can add an HTML element from the “Add” panel and paste this CSS:

<style>

html {

transition: background-color 3s ease, color 3s ease;

}

:root {

--bg-duration: 3s;

--color-duration: 3s;

transition: background-color var(--bg-duration) ease, color var(--color-duration) ease;

}

</style>
2 Likes
4

Thank you @DanielL and @Agustin_Carozo for helping me out here! I did as you said and it’s not working, I’m sure it’s user error. I made this little video to show you. Let me know if I need to alter my setup?

5

Thanks @lp_ih !

I couldn’t reproduce the issue. Can you send me the editor URL via chat support?

1 Like