Smooth Transition Between Colour Change

[Deleted user]

Currently when we change the tab, the colour flashes, it would be a nice toggle addon to enable if we wish to set time delay and transition colour slowly instead of direct flash.

[easonwong-de]

The best solution might be adding transition for background-color in userChrome.css.

Moreover, I’m working on a newer version. Which should eliminate unwanted colour changes.

[Deleted user]

Alright! Thanks, I'll try experimenting with adding youtube like ambient mode type switching for tabs.

[sebihotza]

The best solution might be adding transition for background-color in userChrome.css.

Moreover, I’m working on a newer version. Which should eliminate unwanted colour changes.

Could you tell me how to do that? Which element do I need to add transition to?

[sertchan]

I've same question with sebihotza. I wonder how could i make transition 👀

[easonwong-de]

Easiest way:

userChrome.css

#sidebar-box *,
#navigator-toolbox-background * {
    transition: background-color 1s ease-out;
}

If you wonder how to find this file, visit https://www.userchrome.org/

[mizlan]

For me, this only causes the URL bar and background tab color to change, not the toolbar color / active tab color

[jacksongoode]

Bumping!

[Moarram]

I finally figured out how to transition the active tab too! Here is my userChrome.css:

#sidebar-box *,
#urlbar-background,
#navigator-toolbox {
  transition: background-color .5s cubic-bezier(0, 0, 0, 1);
}
.tab-background {
  transition: background-color .5s cubic-bezier(0, 0, 0, 1);
  box-shadow: none !important;
  background-image: none !important;
}
.tab-background[selected] {
  background-color: var(--lwt-selected-tab-background-color) !important;
}

I love this extension and the transitions definitely take it to the next level :)

[elken]

I finally figured out how to transition the active tab too! Here is my userChrome.css:

#sidebar-box *,
#urlbar-background,
#navigator-toolbox {
  transition: background-color .5s cubic-bezier(0, 0, 0, 1);
}
.tab-background {
  transition: background-color .5s cubic-bezier(0, 0, 0, 1);
  box-shadow: none !important;
  background-image: none !important;
}
.tab-background[selected] {
  background-color: var(--lwt-selected-tab-background-color) !important;
}

I love this extension and the transitions definitely take it to the next level :)

Can confirm this works very well!

[elken]

Just reporting back that --lwt-selected-tab-background-color might not work on newer versions of Firefox; --tab-selected-bgcolor seems to still work though so the snippet should now be

#sidebar-box *,
#urlbar-background,
#navigator-toolbox {
  transition: background-color .5s cubic-bezier(0, 0, 0, 1);
}
.tab-background {
  transition: background-color .5s cubic-bezier(0, 0, 0, 1);
  box-shadow: none !important;
  background-image: none !important;
}
.tab-background[selected] {
  background-color: var(--tab-selected-bgcolor) !important;
}

[Erudition]

I'm using this with EdgyArc, so those rules aren't sufficient to cover most of the UI there, but it should be easy enough to get them working together with a few more rules.

Long-term though, if we want this as a feature rather than a hack, I suggest it be integrated with a globally known CSS variable so that other theming stuff (like EdgyArc) can inherit it! For example:

transition: background-color var(--color-change-duration) cubic-bezier(0, 0, 0, 1);

Then this could be another slider in the Options -> Customization screen, with duration set to zero by default.

I laid out this idea in an issue on the EdgyArc repo.