Customizing the Roon theme

Doesn’t bother me - takes me about five minutes or less to revert back to my theme after an update. I was just relaying what I thought he meant by that phrase.

I have to say that I am so grateful for all of you who figured out how to customize the Roon interface. I wish there was an “official” way to do this (are you listening, Roon? Probably not), because all I wanted to do was to not see the aggressively eye-piercing psychotic-reaction artificial purple all the time. With the help of this thread, I changed the colors back to something that didn’t hurt my brain. But, on my install at least, changing the theme has made Roon extremely unstable with the latest update. My Roon remote on my MacBook crashes if I change the theme. Does anyone have any insight into this? I had to change the core back to its normal (purple) state because I actually do want to listen to music, no matter how ugly the color scheme is.

As a number of others have indicated, Roon developers have added a couple of new lines into the ‘Colors’ file.

My Win10 PC was unstable until I added these two new lines to my customized ‘Colors’ file.

The first is immediately after atom-bluebg-noalpha:

atom-bluebg-noalpha-classical with a value of #242424 (for dark themes) or #EAEBEC (for light themes)

The second added line is at the very bottom of the file after dimlayer:

album-dimlayer with a value of #70%181818 (for dark themes) or #50%ffffff (for light themes).

Just try adding these two lines into your customised ‘Colors’ file and your customised theme might work.

Edit: I see you use a Macbook. I am not sure if the ‘colors’ file for a MacBook is identical to the Win10 file I have described. No doubt others will be able to confirm this one way or the other.

Yep, the Mac version has the same extra two lines in the latest version. I’ve updated my theme generator to take account of this change (works for both Mac and PC).

1 Like

You folks are collectively, quite awesome. Redid my theme for the 788 update, had a couple of quick crashes and came here and immediately found the easy fix. Thanks all.

2 Likes

Again, thank you all so much for the shared knowledge. I added the two lines and now everything is stable, in my colors of choice. Just gotta stay on top of the updates, as they say. Keep on rocking!

2 Likes

Hi guys. I’m having a weird issue with Roon in my iMac. While listening to music from TIDAL MQA and switch to another MQA Album, Roon crashes on me. It only happens when selecting MQA albums. OK, why posting here, well because the root of the issue is caused by Vanilla Theme. As soon I switch back to Dark or Light theme, the crashing issue is totally gone. I can totally replicate the crashing as soon I switch to any custom theme. For now I’m back to Dark original theme and will be deleting all my custom themes from the Themes folder.

This may be the issue. Two extra lines were added to the colors file with the latest release. Unless you add these, Roon will crash.

1 Like

Is it possible to change the color of the user created tags? I find the color of the user created tags too similar to the color of the genre tags. I’ve been playing with the different lines in the configuration file and couldn’t find the one corresponding to the user created tags.

I’m fairly sure it is, but I can’t find the right line now either. I’ll take a look over the next day or so - it’s bugging me now - but please let me know if you track it down.

1 Like

Found it - it’s atom-blue. Which is a bummer, because that’s clearly one of the main colours. It also looks like there’s a hard coded fade, which is why it’s not as bright as when used elsewhere.

1 Like

Has anyone managed to successfully replace artist circles with squares or ‘squircles’ in build 778?

I run my main Roon control app on Win10 and shapes in the atlas files now appear to be quite different with the 778 build. Unfortunately, nothing I do with the new atlas files has any affect whatsoever on artist circles in my system.

Maybe try this Customizing the Roon theme - #301 by alec_eiffel

Thanks for this, but a couple of questions:

  1. are the .ast files not needed for anything else?

  2. The atlas.png files have changed significantly with build 778. Did you edit the 778 png files or simply use your edited png files from the previous build?

Is anyone else having issues with roon crashing from using some of the custom themes? I’ve tried a couple dark themes from this sub forum and it keeps crashing, and if I revert back to the default dark theme it doesn’t crash.

The last few Roon releases have made slight changes to the ‘colors’ file (a few extra lines have been added). If you download one of the themes that was created for an earlier version of Roon it will cause a crash.

1 Like

Thank you.

Do you know how I can fix them? And/or do you have an updated version of your black and red theme?

Can you send me the link to when I posted the black and red theme? I’ll take a look and update it for you. In the meanwhile, all the themes in my theme generator are working, but these are all light themes:

Thank you!!

Here ya go:

And yeah I knew about the updated theme generator but I was asking since I use dark themes.

Thanks again David

The following should work, but let me know if you run into any problems:

// ===================================================
// Firebrick Dark
// ===================================================
// Accent colours
// ===================================================

atom-blue #b21122 // Play buttons, hypertext, version icon, hearts, recent listening bars, Qobuz play button, waveform
atom-blue-hover #3C3C3C
atom-blue-pressed #AAAAAA
atom-blue-insensitive #444444
atom-blue-background-blur #444444
atom-purple-mapping #888888
atom-graph-1 #b21122
atom-graph-2 #C0C0C0
atom-graph-3 #9A9A9A
atom-graph-4 #707070
atom-graph-5 #505050
atom-graph-6 #353535

// ===================================================
// Monochrome settings for the remainder of the theme
// ===================================================

atom-background #1E1E1E // Main background colour
atom-background-fade #181818 // ?
atom-black-fade #181818 // ?
atom-separator-light #404040 // this separator on various pages
atom-separator-heavy #929292 // ?
atom-classical-background #252525 // Classical background colour

atom-grey4 #FFFFFF // Text (most of it)
atom-grey4-hover #ffffff
atom-grey4-insensitive #10%ffffff
atom-grey4-marked #72%ffffff
atom-grey4-secondary #A8A8A8

atom-grey3 #b21122 // Text (play count)
atom-grey3-hover #C2C2C2
atom-grey3-insensitive #20%C5C5C5
atom-grey3-marked #C5C5C5

atom-grey2 #4C4C4C // Active buttons
atom-grey2-hover #666666
atom-grey2-pressed #4D4D4D
atom-grey2-insensitive #3C3C3C

atom-grey1 #1E1E1E // ?
atom-grey1-hover #2C2C2C
atom-grey1-insensitive #ACACAC
atom-grey1-marked #85%1E1E1E

atom-grey #3C3C3C // Tint for text ‘Collaborators’, ‘Groups formed in’, ‘If you like’ (boxes)
atom-grey-mapping #BBBBBB // Tint/overlay for images on above

atom-genre-mapping #ADADAD // Genres overlay tint

atom-blue-mapping #555555 // Explore artist image tint/overlay
atom-onebox-blue #494949 // Recent activity, discover, recommended albums (on artist page), in their prime, influences (boxes)

atom-orange #777777 // Performing the music of, recommend albums box (on album page)
atom-orange-hover #333333
atom-orange-insensitive #CCCCCC
atom-orange-mapping #AAAAAA

atom-green #00E639 // Signal path ‘high quality’ indicator
atom-green-hover #4CAFA3
atom-green-insensitive #295E57

atom-red #b21122 // waveform progress bar
atom-red-hover #BBBBBB
atom-red-insensitive #888888

atom-selectable-blue #333333 // ?
atom-selectable-blue-hover #444444
atom-selectable-blue-checked #555555

atom-selectable #333333 // ?
atom-selectable-hover #393939
atom-selectable-checked #1F1F1F
atom-selectable-insensitive #1F1F1F

atom-bluebg-noalpha #282828 // ?
atom-bluebg #2A2A2A // Top 4 boxes on home page, new releases, ‘listening’ box
atom-bluebg-hover #b21122
atom-bluebg-pressed #383838
atom-bluebg-insensitive #282828

atom-footer #2A2A2A // footer at bottom of page
atom-classical-footer #2A2A2A // footer at bottom of page for classical
atom-zebra-stripe #1E1E1E // place marker beneath albums while loading?
atom-panel #333333 // Settings Panel
atom-classical-panel #333333 // Settings Panel for classical
atom-popup #262626 // Pop up menu (eg 3 dots menu)
atom-border #424242 // ?

atom-white #ffffff // Progress overlay on waveform
atom-white-hover #ffffff
atom-white-insensitive #05%ffffff
atom-white-marked #72%ffffff
atom-white-button-hover #22%ffffff
atom-white-button #12%ffffff
atom-black #1E1E1E // Collaboration, live etc (small circle on album)
atom-black-hover #2D2C2C
atom-black-insensitive #ACACAC
atom-black-marked #85%FFFFFF // Collaboration, live etc (info on circle)
atom-waveform #777777 // ?
atom-fade #1E1E1E // ?
atom-highlight #999999 // ?
atom-yellow #CCCCCC // ?

atom-purple #999999 // ?
atom-purple-hover #777777
atom-purple-pressed #555555

dropbox-color #ffffff
facebook-color #555555
twitter-color #BBBBBB

feedbackpanel #000000 // ?
dimlayer #70%000000 // layer to dim out background when dialog on screen
album-dimlayer #70%000000