Hi Léo and everyone!
Today I was watching an Oaktone video and noticed how vibrant and visually engaging the setlist colors looked. It instantly reminded me of something I’ve been thinking for a while — it would be great if AbleSet could offer more vivid or saturated color options for songs in the Setlist View.
The current palette works well, but having the possibility to assign brighter, more eye-catching colors would cool.
It’s just a small detail — definitely not urgent at all
— but I thought I’d share the idea in case it’s something that could be considered in the future.
Thanks so much as always for your incredible work!
Best,
Agus
Hey @agustinvolpe,
Thank you for this suggestion!
If you’d like to play around with the song colors, you could do so using a custom CSS style. Here’s a list of all song colors AbleSet currently uses:
:root {
--color-default-unplayed: var(--color-background);
--color-default-played: var(--color-background-light);
--color-default-skipped: var(--color-background-deep);
--color-white-unplayed: var(--color-background);
--color-white-played: var(--color-white-950);
--color-white-skipped: var(--color-white-950);
--color-gray-unplayed: var(--color-gray-900);
--color-gray-played: var(--color-gray-950);
--color-gray-skipped: var(--color-gray-950);
--color-red-unplayed: var(--color-red-900);
--color-red-played: var(--color-red-950);
--color-red-skipped: var(--color-red-950);
--color-orange-unplayed: var(--color-orange-900);
--color-orange-played: var(--color-orange-950);
--color-orange-skipped: var(--color-orange-950);
--color-amber-unplayed: var(--color-amber-900);
--color-amber-played: var(--color-amber-950);
--color-amber-skipped: var(--color-amber-950);
--color-yellow-unplayed: var(--color-yellow-900);
--color-yellow-played: var(--color-yellow-950);
--color-yellow-skipped: var(--color-yellow-950);
--color-lime-unplayed: var(--color-lime-900);
--color-lime-played: var(--color-lime-950);
--color-lime-skipped: var(--color-lime-950);
--color-green-unplayed: var(--color-green-900);
--color-green-played: var(--color-green-950);
--color-green-skipped: var(--color-green-950);
--color-emerald-unplayed: var(--color-emerald-900);
--color-emerald-played: var(--color-emerald-950);
--color-emerald-skipped: var(--color-emerald-950);
--color-teal-unplayed: var(--color-teal-900);
--color-teal-played: var(--color-teal-950);
--color-teal-skipped: var(--color-teal-950);
--color-cyan-unplayed: var(--color-cyan-900);
--color-cyan-played: var(--color-cyan-950);
--color-cyan-skipped: var(--color-cyan-950);
--color-sky-unplayed: var(--color-sky-900);
--color-sky-played: var(--color-sky-950);
--color-sky-skipped: var(--color-sky-950);
--color-blue-unplayed: var(--color-blue-900);
--color-blue-played: var(--color-blue-950);
--color-blue-skipped: var(--color-blue-950);
--color-indigo-unplayed: var(--color-indigo-900);
--color-indigo-played: var(--color-indigo-950);
--color-indigo-skipped: var(--color-indigo-950);
--color-violet-unplayed: var(--color-violet-900);
--color-violet-played: var(--color-violet-950);
--color-violet-skipped: var(--color-violet-950);
--color-purple-unplayed: var(--color-purple-900);
--color-purple-played: var(--color-purple-950);
--color-purple-skipped: var(--color-purple-950);
--color-fuchsia-unplayed: var(--color-fuchsia-900);
--color-fuchsia-played: var(--color-fuchsia-950);
--color-fuchsia-skipped: var(--color-fuchsia-950);
--color-pink-unplayed: var(--color-pink-900);
--color-pink-played: var(--color-pink-950);
--color-pink-skipped: var(--color-pink-950);
--color-rose-unplayed: var(--color-rose-900);
--color-rose-played: var(--color-rose-950);
--color-rose-skipped: var(--color-rose-950);
}
You could replace these either with other variants of the predefined colors or with hex values, e.g.
:root {
--color-rose-unplayed: var(--color-rose-800);
--color-rose-played: #501a2e;
--color-rose-skipped: #501a2e;
}
I’d love to see what color scheme you come up with! 
1 Like