Changing colours of UI elements


It would be nice to have opportunity to change coluours of UI elements : buttons, bars, and so on … The reason is simple, changing the background image can produce sometime very unplesant sight viewing together with buttons. Can You imagine for example reddish background image with green buttons ? :slight_smile: But the same background with yellow, red, or orange buttons ?

So have nice day !

Sounds like this could be a nice feature.
Green seems to be the volumio brand color, so I dont know if they will change it.
If you have experience with FTP and CSS you can do the modification yourself like I did.

I just opened SFTP to Volumio and navigated to folder: volumio/http/www/styles/
There should be a file called app-f4f2f19cf9.css
Would be a very good idea to make a backup of the file at first :wink:

Then open the file with a text editor and do a “find and replace” for #54c688 to #“whatever html color you want” over the whole file and save it.
(orange would be #FFA500)

After reloading the page, all green colors will be replaced with the new one.

Volumio orange.png

ThanX !

But if You use “experimental UI”, then You need to edit this file : volumio/http/www3/styles/app-e642bf9d06.css

And some elements are still green. Like : pause button when playing, next and prev buttons if you move mouse pointer over them, background of messages, active indicator, … but there is no more #54c688 in files below www and www3 … so, this colours are litlebit different …

2 notes:

  • The filename changes with every release, as its randomly generated (to avoid caching issues
  • If you modify such files manually, OTA update will not work.

Hi Michelangelo,

That is right ! So incorporating possibility to change UI colours via user interface will be really nice feature … :slight_smile:

For buttons you have to look for #339a62
About the messagebox: rgba(84,198,152,.8) , orange would be rgba(255,164,0,.8)
Still a quick and dirty hack, of course :smiley:

VOlumio fully orange.png

Found a few more green color values:

Hover-color for buttons in settings:

“Active”-dot in settings:

Yet unknown:

Hi all,

I played few days around with the UI colours … and Yes it is a big mess to set up ( your) desired colour tones for user interface, to be visible ( contrast) and pleasant all around the UI … And when we take into account Michelangelos comment, that the style file name is changing from version to version … it is almost imposibile to edit and change all relevant colours …

My idea is for the developers to make a limited sets of UI colours, which have carefully selected colour values for UI element for each sets, and let they have a name : for example “green”, “orange”, “dark blue”, “red” sets … so the user simple can pick up one of them ( with possibility to edit by end user one-by-one …).

To have this sets, the easiest way is to create framework for editing UI colours ( as a tools inside of volumio, or as separate tools), and ask users of volumio to help to create tonally nice and balanced sets of colours, and upload them to “curators” who will choose a best ones …

Hi Toytc,
yours is a really good idea, but we have many other priorities to work into, we would like to focus on other things rather than this. Sorry…


no problem … this is a sign for volunteer programmers : lets create a plugin for managing UI looks :slight_smile: