The original theme generator has now been updated, link below.
Original Post below
I had a couple of spare hours today so thought I’d see what I could do to make the process of editing and creating themes a bit easier. The net result is a google sheet (see below) that simply requires you to come up with the hex codes for seven different colours: a background colour, and six accent colours, pretty much like the following:
If you’d like to try out the spreadsheet you can access it below.
All you need to do is …
Click the link and make copy of the spreadsheet. I’m pretty sure I’ve set it up so you can only view it rather than edit it, but haven’t checked. Either way, create your own copy before editing.
Edit the hex values in cells C2 to I2. Don’t try to edit the square boxes with colour, just the hex codes below them. Also, make sure you retain the ‘#’ symbol and don’t edit any other cells (unless you’re confident you know what you’re doing). Making changes to cells other than C2 to I2 may result in you creating data that won’t work or will crash Roon.
Once you’re happy with your colours, copy the data in the first column (cells A2 to A103).
Create a new ‘colors’ file, or edit an existing one (remembering to back up first) and paste in the data you copied in the previous step.
Load up Roon, select your new theme, and you should be good to go.
If you’re not familiar with how to edit a theme, take a look at the first post in this thread for further details.
My limited testing suggests that the above should work, but don’t blame me if you break something.
Tips
Cell C2 sets the colour for the main play button on the album page (and other elements).
Cell G2 sets the footer (and other elements).
Cell E2 sets the sidebar (and, yes, other elements).
Cell F2 is the background colour.
For a more subtle effect, based around one accent colour rather than two, try something like the following:
The theme generator was designed to create a light theme based on a background colour and two complementary accent colours, each split into three different tones (light, medium, darker). It will still work if you use seven completely different colours, or four, or however many, but don’t blame me if it looks rubbish when you’re finished. And, just to repeat, if you break anything in your Roon installation it’s on you.
It appears that this spreadsheet doesn’t display the colours when opened in Excel. Stick with Google Sheets.
The theme generator doesn’t distinguish between normal and classical - so no changes between the two.
I’ve added colour to all the elements I can find, but may have missed some. Let me know if you come across anything unexpected.
My screenshots show a change in font. This theme generator just changes the colour scheme. Font changing is a whole other thing
Have fun, let me know if you use it, and post screenshots of your results, either below or in the Showcase your 1.8 themes thread.
Here’s a quick visual preview of the spreadsheet: theme colours at the top, output data in the leftmost column, and a breakdown of each ‘atom’ (with notes) in the middle.
You’re welcome, and I hope you find it useful. Incidentally, if you copied the file a few minutes ago please grab a new one. I just corrected a small bug in the master copy.
Here’s another idea. Try changing the darkest accent colour on the left to something more vibrant (this controls the play button, and other bits and pieces).
I’m thinking there must be some coders here that could rustle something up that would clone the exiting and modify a copy with appropriate selections for those who wanted to try it. Just manipulating text files isn’t it?
The fonts are Newzald Book (this was used to replace GrifoM-Medium.otf and GrifoS-Medium.otf) and SF Pro Text (Regular, Medium and Bold) to replace the three Lato variants.
That’s pretty much what my spreadsheet does, but the initial values I added are an amendment rather than the stock values. Part of the problem with the way it’s currently coded is that there doesn’t seem to be a specific logic regarding which bits of the theme affect what. For example, there are numerous settings that don’t appear to change anything, at least not that I can find (e.g. atom-yellow) while others are much more important because they change a whole range of different elements. For example, the key to any theme is atom-blue as this sets the colour of the main play button, hypertext, recent listening bars, and the played section of the waweform. The latter is a bit of a nuisance as it would often be better to change one of these elements independently of the others. I suspect that not a lot of love went into this aspect of developing Roon, maybe because it only has a fairly simple job to perform if you just have two stock themes. If Roon take theme editing on board I think this will need a rewrite to be properly useful.
The other design issue that needs to be addressed, if Roon implement something like this, is the decision as to which elements should be grouped together. For the spreadsheet I split most of the elements into one of seven colours, but to do that I had to group them together (e.g. the boxes for ‘performing the music of’ and the ‘recommended albums’ on the albums page are matched to some hover values and a section of the round listening graph). The upside of doing this is that it’s easy to create a coherent theme, but the downside is that it further limits choice. For example, there’s no way to recreate either of the original themes using the seven colours in the spreadsheet as it was designed to produce a more coherent aesthetic than either of the stock themes.
For most of my themes I’ve used Photoshop to generate the hex codes, a process I’m familiar with after many years of photography, but if you’re new to the whole colour thing then the fdollowing website will help.
It’s especially useful if you have an image to base your theme on. For example, …
