Themes Comeback

Hey everyone! I’m pretty new to using Claude (Anthropic’s AI assistant), but I decided to try building an app to create color themes for Roon. I borrowed the idea from @grant, and built it up step by step with Claude’s help.

I tested it a lot and it works — there’s plenty to play around with: you pick colors from a palette, see a live preview of the “My Albums” screen, and generate Roon’s colors file. You can also save your own themes, name each one, and it’s available in Portuguese, English, and Spanish.

I included a sample preset called Time Out, which I think looks really nice, originally created a few years ago by @DaveN. Its colors are approximate — I read them from a small thumbnail image, so they might not match the original exactly.

Link to try it out: cosmicroonstudio.netlify.app

Hope you all can navigate the app easily and create your own themes just the way you like.

Thanks

Antonio

2 Likes

:united_kingdom: CosmicRoon Theme Studio — User Manual

The CosmicRoon Theme Studio is an app for creating custom color themes for Roon. You pick the 15 colors that make up the theme’s base, watch the result update live in a preview of Roon’s “My Albums” screen, and at the end the app generates the two files Roon needs to install a custom theme: colors and name.

No installation or account needed — the app runs entirely in your browser.

Opening the app
Just open the app’s public link in any browser — computer, tablet or phone. Nothing is sent to any server: everything happens in your own browser, and anything you save stays only there.

Step 1 — Pick a starting theme
In the left panel, under “Start from a preset”, you’ll find the ready-made themes:

  • Dark (original) — Roon’s default dark theme

  • Light (original) — Roon’s exact light theme

  • Time Out — a colorful theme rebuilt from a spreadsheet (approximate values)
    Click one to load it as your starting point. All the colors and the preview on the right update instantly.

Step 2 — Customize the colors
Below the presets is a list of the palette colors (background, panel, text, accent, borders, etc.), each with a name and a short description of what it controls.

  • Click the colored square to open the color picker, or

  • type the hex code directly into the text box next to it (e.g. #1A2B3C)
    Tip: as soon as you change the first color (or font) starting from a built-in preset, the “Theme name” field automatically switches to “My Theme” — this keeps you from accidentally saving over a built-in preset.

Step 3 — Choose the font
In the “Font” section, choose the font for Text and for Titles. This is only for how the preview looks here in the app — the real font in Roon comes from Roon itself, so it isn’t part of the colors file.

Step 4 — Save your theme in the app
Give your theme a name and click “Save current theme as preset”. To rename or delete it, select it and use the corresponding buttons. Your saved themes stay in this browser, and the most recently saved one loads automatically the next time you open the app.

Step 5 — Generate the files
Choose the format (with or without the .txt extension) and click the colors.txt and name.txt buttons to open the ready-to-copy content.

How to save it in Roon (Mac)
On Mac, Roon doesn’t read the colors/name files from just anywhere — the theme needs to live inside the Roon app’s own package. Here’s the correct step by step:

  1. Generate and copy the colors and name files from the CosmicRoon Theme Studio.

  2. In Finder, locate Roon.app (usually in the Applications folder).

  3. Right-click on Roon.app and choose “Show Package Contents”.

  4. Inside the package, navigate to Contents / Resources / Themes.

  5. In that Themes folder, create a new folder named after your theme (you can use the same name you gave the theme in the app).

  6. Place both generated files inside that folder: colors and name (no .txt extension).

  7. Quit Roon (if it’s open) and reopen it.

  8. Go to Roon > Setup > find the Themes option and select the theme you just created.
    That’s it — Roon will load your custom theme.
    Note: whenever Roon updates, the app package may get replaced, and your theme folder inside Contents/Resources/Themes can be wiped out along with it. It’s worth keeping the colors/name files (or the preset backup from the app) saved somewhere else, so you can quickly reinstall if that happens.

Sharing a theme
The “Share” button generates a link that already carries your theme’s colors and name, for someone else to open and adjust.

Backing up saved themes
In “Preset backup”, copy the code (starts with RTS1:) to save your themes. To restore, paste the code and click “Restore presets”.

Frequently asked questions

  • My saved themes disappeared: they only live in the browser where you saved them — use Preset backup to carry them with you.

  • I deleted a built-in preset: click “Restore default presets”.

  • Time Out is marked as approximate: it was rebuilt from spreadsheet images, so it may vary slightly from the original.

Nice! I’ve converted the rdio light and dark themes I made as a preset backup for use there: https://raw.githubusercontent.com/grantsteele/rdio-themes-for-roon/main/rdio-cosmicroon-presets.txt

Doesn’t this belong in Tinkering?

Yes, I have moved the topic over.