# Theme Transitions

**URL:** <https://community.weweb.io/t/theme-transitions/18294>\
**Category:** Ask us anything\
**Created:** [May 16, 2025, 11:02pm UTC](https://community.weweb.io/t/theme-transitions/18294 "2025-05-16T23:02:22Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lp\_ih](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/lp_ih/32/13069_2.png) [@lp\_ih](https://community.weweb.io/u/lp_ih)\
**Post date:** [May 16, 2025, 11:02pm UTC](https://community.weweb.io/t/theme-transitions/18294/1 "2025-05-16T23:02:22Z")

</div>

Hey WeWeb community!

First, I’m loving the built in theme handler, I set everything up according to the [documentation](https://docs.weweb.io/workflows/actions/change-theme.html) and it’s working perfectly 🙂

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!

---

<div class="post-metadata">

**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\
**Post date:** [May 19, 2025, 11:51am UTC](https://community.weweb.io/t/theme-transitions/18294/2 "2025-05-19T11:51:05Z")

</div>

Hi lp 👋

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!

---

<div class="post-metadata">

**Author:** ![DanielL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/daniell/32/13398_2.png) [@DanielL](https://community.weweb.io/u/DanielL)\
**Post date:** [May 20, 2025, 10:32am UTC](https://community.weweb.io/t/theme-transitions/18294/3 "2025-05-20T10:32:51Z")

</div>

Hi @lp_ih

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![lp\_ih](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/lp_ih/32/13069_2.png) [@lp\_ih](https://community.weweb.io/u/lp_ih)\
**Post date:** [May 21, 2025, 12:06am UTC](https://community.weweb.io/t/theme-transitions/18294/4 "2025-05-21T00:06:41Z")

</div>

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](https://www.loom.com/share/720910c74dab4df1961cb322302cea7f?sid=39c69446-fd23-412e-b9f1-dcb8b546d76f) to show you. Let me know if I need to alter my setup?

---

<div class="post-metadata">

**Author:** ![DanielL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/daniell/32/13398_2.png) [@DanielL](https://community.weweb.io/u/DanielL)\
**Post date:** [May 21, 2025, 9:17am UTC](https://community.weweb.io/t/theme-transitions/18294/5 "2025-05-21T09:17:16Z")

</div>

Thanks @lp_ih !

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