Showcase your 1.8 themes

[Alexander_Legge]

I call this the Valentine’s Day Roon Theme

Valentine’s Day Roon Code

// ===================================================
// Theme Colors
// ===================================================

atom-background #8F002C
atom-background-fade #e8e8e8
atom-black-fade #000000
atom-separator-light #FF67AE
atom-separator-heavy #FF67AE
atom-classical-background #8F002C

atom-grey4 #101010
atom-grey4-hover #000000
atom-grey4-insensitive #10%101010
atom-grey4-marked #72%222222
atom-grey4-secondary #808080

atom-grey3 #101010
atom-grey3-hover #50%000000
atom-grey3-insensitive #20%101010
atom-grey3-marked #101010

atom-grey2 #FF67AE
atom-grey2-hover #99A2FA
atom-grey2-pressed #FF67AE
atom-grey2-insensitive #50%c9baa1

atom-grey1 #8F002C
atom-grey1-hover #888888
atom-grey1-insensitive #808080
atom-grey1-marked #85%fffef7

atom-grey #FFD5C2
atom-grey-mapping #FF67AE

atom-genre-mapping #FF67AE

atom-blue #EDA47D
atom-blue-hover #FFD5C2
atom-blue-pressed #FF67AE
atom-blue-insensitive #40%7494a6
atom-blue-mapping #FF67AE
atom-onebox-blue #FFD5C2
atom-orange #99A2FA
atom-orange-hover #bababa
atom-orange-insensitive #dadada
atom-orange-mapping #AB1077
atom-green #57c6b9
atom-green-hover #4cafa3
atom-green-insensitive #b0f3eb
atom-red #EDA47D
atom-red-hover #cacaca
atom-red-insensitive #eaeaea
atom-selectable-blue #888888
atom-selectable-blue-hover #888888
atom-selectable-blue-checked #888888
atom-selectable #AB1077
atom-selectable-hover #FFD5C2
atom-selectable-checked #FFD5C2
atom-selectable-insensitive #FFD5C2
atom-bluebg-noalpha #888888
atom-bluebg-noalpha-classical #888888
atom-bluebg #AB1077
atom-bluebg-hover #FF67AE
atom-bluebg-pressed #e9e9e9
atom-bluebg-insensitive #e9e9e9
atom-footer #FF67AE
atom-classical-footer #FF67AE
atom-zebra-stripe #fefbf9
atom-panel #AB1077
atom-classical-panel #AB1077
atom-popup #8F002C
atom-border #888888
atom-graph-1 #FFD5C2
atom-graph-2 #FF67AE
atom-graph-3 #00FFFA
atom-graph-4 #99A2FA
atom-graph-5 #EDA47D
atom-graph-6 #AB1077
// ===================
// not theme colors.
// ===================
atom-white #ffffff
atom-white-hover #75%ffffff
atom-white-insensitive #05%fffef7
atom-white-marked #85%fffef7
atom-white-button-hover #22%fffef7
atom-white-button #12%fffef7
atom-black #101010
atom-black-hover #303030
atom-black-insensitive #aaaaaa
atom-black-marked #85%fffef7
atom-waveform #888888
atom-fade #1e1e1e
atom-highlight #888888
atom-yellow #888888
atom-purple #888888
atom-purple-hover #888888
atom-purple-pressed #888888
// ===================
// brand colors
// ===================
dropbox-color #888888
facebook-color #888888
twitter-color #888888
// ===================
// BACKGROUND & DIM LAYERS
// ===================
feedbackpanel #aa000000
dimlayer #70%000000
album-dimlayer #70%181818

[Alexander_Legge]

Here’s a ‘Blue Roon’ theme I developed via tinkering with different colors.

Here’s the code to copy:

// ==========================================
// Blue Roon
// v1 by Alex
// ==========================================
atom-background #2A4D69
atom-background-fade #2A4D69
atom-black-fade #2A4D69
atom-separator-light #00C2C7
atom-separator-heavy #00C2C7
atom-classical-background #2A4D69
atom-grey4 #E7EFF6
atom-grey4-hover #E7EFF6
atom-grey4-insensitive #40%DCEDC1
atom-grey4-marked #80%F2F0FC
atom-grey4-secondary #ADCBE3
atom-grey3 #E7EFF6
atom-grey3-hover #DCEDC1
atom-grey3-insensitive #70%fcfcfc
atom-grey3-marked #DCEDC1
atom-grey2 #FFD3B6
atom-grey2-hover #A8E6CF
atom-grey2-pressed #00C2C7
atom-grey2-insensitive #50%A8E6CF
atom-grey1 #BEB6F4
atom-grey1-hover #E7EFF6
atom-grey1-insensitive #ADCBE3
atom-grey1-marked #80%fcfcfc
atom-grey #FFD3B6
atom-grey-mapping #ADCBE3
atom-genre-mapping #ADCBE3
atom-blue #FF8B94
atom-blue-hover #BEB6F4
atom-blue-pressed #00C2C7
atom-blue-insensitive #40%FF8B94
atom-blue-mapping #00C2C7
atom-onebox-blue #FFD3B6
atom-orange #A8E6CF
atom-orange-hover #ADCBE3
atom-orange-insensitive #ADCBE3
atom-orange-mapping #ADCBE3
atom-green #57c6b9
atom-green-hover #4cafa3
atom-green-insensitive #b0f3eb
atom-red #A8E6CF
atom-red-hover #ADCBE3
atom-red-insensitive #00C2C7
atom-selectable-blue #193A5E
atom-selectable-blue-hover #17304D
atom-selectable-blue-checked #414245
atom-selectable #0086AD
atom-selectable-hover #0086AD
atom-selectable-checked #0086AD
atom-selectable-insensitive #0086AD
atom-bluebg-noalpha #0086AD
atom-bluebg-noalpha-classical #0086AD
atom-bluebg #A8E6CF
atom-bluebg-hover #0086AD
atom-bluebg-pressed #0086AD
atom-bluebg-insensitive #0086AD
atom-footer #00C2C7
atom-classical-footer #FFAAA5
atom-zebra-stripe #0086AD
atom-panel #0086AD
atom-classical-panel #FFAAA5
atom-popup #0086AD
atom-border #fcfcfc
atom-graph-1 #BEB6F4
atom-graph-2 #FF8B94
atom-graph-3 #FFD3B6
atom-graph-4 #00C2C7
atom-graph-5 #ADCBE3
atom-graph-6 #A8E6CF
// ===================
// not theme colors.
// ===================
atom-white #ffffff
atom-white-hover #75%ffffff
atom-white-insensitive #05%ffffff
atom-white-marked #85%ffffff
atom-white-button-hover #22%ffffff
atom-white-button #12%ffffff
atom-black #000000
atom-black-hover #2D2C2C
atom-black-insensitive #ACACAC
atom-black-marked #85%2C2C2E
atom-waveform #75808F
atom-fade #1E1E1E
atom-highlight #FF8000
atom-yellow #E6BB72
atom-purple #5D9CE0
atom-purple-hover #7fb5eb
atom-purple-pressed #4996E3
// ===================
// brand colors
// ===================
dropbox-color #ffffff
facebook-color #3B5998
twitter-color #1DA1F2
// ===================
// BACKGROUND & DIM LAYERS
// ===================
feedbackpanel #aa000000
dimlayer #70%000000
album-dimlayer #70%181818

[miss_my_zune (the Dude abides)]

That’s really nice, thanks!

[miss_my_zune (the Dude abides)]

Does anybody have a graphic that maps lines in the colors file to specific screen elements. I feel like I’ve seen one posted but I can’t find it. I really like the blue theme above from @Alexander_Legge but maybe with slight tweaks to the now playing bar and the pinkish button color… It really is a pretty theme as is though.

[DaveN]

@miss_my_zune

Does anybody have a graphic that maps lines in the colors file to specific screen elements.

I’m not sure if I’ve seen one, but Column G in my spreadsheet does identify some of them - you’ll just need to make it a bit wider to read all the data.

[AnimalOnDrums]

Has anyone figured out which atom controls the color of the search field when using the magnifying glass. Got a a them I like, but it is a dark theme and the search field is still a blinding white. Trying to make it a light gray, or a dark gray depending on what else gets changed. Thanks!

[hmack]

Just in case anyone is struggling to find the file to edit for artist circle changes in the latest software release for build 795, the correct file to edit is ui-atlas@1x-2.png.

[DaveN]

@AnimalOnDrums

Has anyone figured out which atom controls the color of the search field when using the magnifying glass.

I think that’s one of the elements that can’t be changed, much like the background of the playing now screen.

[AnimalOnDrums]

right, that makes sense. I figure out how to change the color of the drop down menu that opens when you click into the search field, but not the search field itself. but I am thinking that it may be easier to change the text color to white for the search field when it goes black from using the dark title bar trick. I have been going through the app piece by piece in visual studio and it is not really that complicated, it is just split up into so many micro sections that the issue is simply finding the code

[AnimalOnDrums]

I can’t remember if you are a Mac user or not, but if you are what program are you using to change the ui_atlas files and get the pixel numbers and everything? Thanks

[DaveN]

I am a mac user, and used Photoshop to edit the ui_atlas file.

[AnimalOnDrums]

Ok thanks. I am using Pixelmator pro, but the pixel locations from the ui_atlas 1x dont seem to line up with the ui_atlas1 image. The coordinates in the spec files are x, y, length, height, or is that not correct. Thanks

[DaveN]

@AnimalOnDrums

The coordinates in the spec files are x, y, length, height, or is that not correct. Thanks

As I understand it, yes, but I didn’t use the spec files when I amended the ui_atlas files - I just measured the existing elements and replaced them.

[AnimalOnDrums]

oh ok. Thanks. In the atlas spec sheets, I found the search bar listed but I can’t figure out where it is on the atlas png sheets. But ill keep trying

[DaveN]

@AnimalOnDrums

I found the search bar listed but I can’t figure out where it is on the atlas png sheets.

Which bits reference the search bar? If you can let me know I’ll take a look and see if I can find them.

[AnimalOnDrums]

Hey. Thanks for the offer! But I figured it out. There is no way to change the color of the search bad using the ui.atlas png or the theme colors atoms list. There are now a few other things I can try, which include changing settings in the info.plist. So now I am going through apple developer stuff to see my options.

Roon said they have no issues with us customizing Roon, so I wonder why they won’t mention how to do this

[DaveN]

@AnimalOnDrums

Roon said they have no issues with us customizing Roon, so I wonder why they won’t mention how to do this

If it’s hard coded - and I suspect it is - there wouldn’t be much point in Roon commenting as there wouldn’t be any way to change it.

[Robert_Schumacher]

Hi guys, I’ve been playing around a bit and created a Roon theme, or rather how I imagine Roon 2.0 to look like.

[AnimalOnDrums]

That’s is awesome! I love how sleek and native it looks. Great job!

[Robert_Schumacher]

I’m sorry, that’s just Photoshop and not a theme.
But yes it would be a dream if Roon didn’t look so 2010.
My post is probably a bit misleading.
I just wanted to show how I imagine Roon 2.0.
But I’m pleased that you like it.