Change color appearance

Diy and Tweaks Diy and Tweaks
1

Hi,

I wonder if it is possible to change colors of the user interface besides the background color. I would like to change the default light green to another color, for example something like that:

volumiocolor.png

Any hints how to do this?

-paganini

2

GUI is builded on web technology. You must find right value in CSS. Open volumio GUI in desktop web browser (I recommend Chrome) . Click on it with right mouse button, select inspect and here you can find and rewrite value for color. When you know where is CSS value, you must change it inside volumio. You must connect into via Ssh find right file and rewrite it.

1 Like
3

It would be nice if this was offered as an option in the ‘appearance’ settings

4

login via ssh

jump to:

/volumio/http/www/styles/app-67aef70396.css

replace #54c688 with your favorite color

5

Hi,

I found this post whilst looking to do this exact thing! I’ve configured Volumio on my Raspberry Pi 3 with a touchscreen and I’m trying to change the colour accent of the buttons and sliders etc.

I’ve SSH’d into the Pi and logged in with @volumio but cant seem to get to the .css file.

Any suggestions? Many thanks!

-Nick

6

i used winSCp to change the color values

  • login via winSCP
  • got to /volumio/hhtp/www/styles
  • open the app-********.css
  • open with note++
  • press ctrl+h for replace
  • here are some color values i still found out for the default green volumio colors
    #54c688
    #54c698
    #2d8756
    #339a62
  • replace the color values above with your favorite color, in my case it was a yellow/orange color #ebb430
7

Aaaah nice one, logged in using winSCP and found everything.

I added this at the beginning:

:root {
–accent-colour: #f76020;
}

and then replaced the different colour codes with:

var(—accent-colour)

so I could replace them quickly all at once. Is a bit hacky but seems to be working OK.

Thanks so much for your help!

Nick

8

Thanks for this tweak, which worked for me.

Just a note of caution: When upgrading Volumio, I got a message that files in the system had changed and I needed to reinstall.

Luckily I had made a backup of the original CSS file app-********.css, before modifying it. I restored the backup and the upgrade worked fine.

9

By doing so you are changing the file-system permanently, which will sooner or later break your install when updating.