Nighttab: RGB Styling

[ABaldetti]

How about that instead of choosing a solid color we can use RGB patterns.... you know more rgb = more fps

[zombieFox]

Hi, do you mean allowing individual RGB values when selecting a colour? Eg 3 inputs, one for R, one for G and one for B?

[Q-out]

I think he means using a spectrum of colours instead of one colour, like this. That would be a resource hog with css, I dunno about js.

[zombieFox]

Got a verions of this working after a lot of experimenting. Will be out in the next release.

[zombieFox]

After a lot of experimenting and testing this past week the following has been learnt:

• Given the CSS architecture and the transitions on nearly every UI element this feature is causing serious performance issue when activated.
  
  
  
  • Disabling the transitions on select elements results in inconsistent user expierence when interacting with different UI elements.
  
  
• The constant writing to the DOM to change the Accent colour by this feature can cause very heavy loads on the system and CPU when redrawing on screen.
• An alternative to using JS to change the Accent colour is to use CSS animations which, unfortunately, bring their own issues:
  
  
  
  • Different animation timings casued by elements being added to the DOM after page load, so different UI elements can have wildly out of sync colour animations.
  
  
  • CSS animations does not transition when animating variables. So a lot of hard coding is needed to achieve the same effect. eg:
  
  

@keyframes rainbow {
  0% {
    --theme-accent-r: 255;
    --theme-accent-g: 0;
    --theme-accent-b: 0;
  }

  100% {
    --theme-accent-r: 0;
    --theme-accent-g: 255;
    --theme-accent-b: 0;
  }
}

Does not animate the same as:

@keyframes rainbow {
  0% {
    background-color: rgb(255, 0, 0);
  }

  100% {
    background-color: rgb(0, 255, 0);
  }
}

Which is a damn shame because if CSS animate worked the same with variables it would have solved the performance issue perfectly.

---

For those reasons I am considering removing this feature from nightTab. For now a warning is placed near the controls for this feature.

[Q-out]

I've seen someone animate rgb colours with css before using a background image with a gradient that is moved with css animate. You may have considered it already but I'll just throw it out there anyway. The code is here. I'll copy the relevant part here:

````
@keyframes rotate-gradient{
from{background-position: 0 0;}
to{background-position: 200vw 0;}
}

TabsToolbar::before{

background-image: linear-gradient(to right, magenta, red, yellow, green, cyan, blue, magenta);
animation: rotate-gradient 10s steps(60) infinite;
/animation-timing-function: linear; */ / smoother animation, but greatly increased cpu use */
}
````
This is what it looked like when applied:

It would be a bit different than having a consistent colour over the entire page that changes everywhere at the same time, but it's something.

[Q-out]

I think the effect on performance is not that bad, any recent PC will handle it easily.

[zombieFox]

I've seen someone animate rgb colours with css before using a background image with a gradient that is moved with css animate. You may have considered it already but I'll just throw it out there anyway. The code is here.

That is really cool, not seen that mod before but I am familiar with the technique used to create the effect. I considered doing something similar with nightTab however this technique only works when animating a single area/background. With multple elements on the page (with the accent colour) there is no "one background". All the bookmarks, for example, need to animate at the same rate but offset to match the effect of the background moving. Since each bookmark is responsive, and can change in width, the animation, timing and syncchronisation of the backgrounds becomes nearly impossible.

I think the effect on performance is not that bad, any recent PC will handle it easily.

Yes I agree. In my testing some machines handled it better than others. But there will always be situations, (when a system is under heavy load, lots of tabs open etc) where performance will be poor.

I now agree with you, the warning added to the control should be enough.

Thank you for the help 👍