I found a few snippets of CSS code examples on the forum, but no full documentation of what options are available.
Somewhere there was an example (I can’t find again) of how to set the DEFAULT COLOR of a song in the setlist.
As I’m still looking for that, I’m curious if anyone has that, or any other custom CSS that they have developed for their own use, that might expose some options for the rest of us?
For example, I’d like to set the default color as well as the selected song color.
I’d also like to override the 16 supported colors with hex values for html colors. On my screen, the yellow looks red, so a simple solution would be to just override with hex.
AbleSet uses the color variables from Tailwind CSS throughout the whole app. I’m not sure if this is the best solution, but you can override all of these colors using custom CSS, by copying this code into your custom styles file, then changing the individual color values. The section with variables starting with --color-default will be what you’re looking for to change the default color, and you can also change the individual colors.
I got this file from the Chrome Devtools in AbleSet.
Hope this helps!
In other words, we don’t put amber-50 in Ableset; just [Amber].
So If I want to change the color of [Amber] in Ableset, which one of these numbered options do I change?
Additionally, I don’t see an option for ‘selected’ (current song)
color-gray-unplayed: var(–color-gray-900);
color-gray-played: var(–color-gray-50);
color-gray-skipped: var(–color-gray-50);
You can see what each color looks like on this page from Tailwind CSS. Basically, the higher the number, the darker the color. 50 is almost white, while 950 is a very dark shade of the color.
When you set a song or section to be [amber], AbleSet uses different shades of that amber color in different places.
For example, the lighter color here is amber-600 and the darker color is amber-900.
These different shades are used all throughout the interface, and you would end up having to replace almost all of them.
My understanding (disclaimer, I am not the developer) of how the different shades are used in the latest beta release:
played (950) is displayed when the actively playing song/section is after this one (in other words, this song has already been played).
unplayed (900) is used when the song is not currently playing, and hasn’t been played yet.
I’m not sure what skipped (950) is used for, but it’s the same shade as played.
highlight (600) is used for the part of the song/section that has played so far. The left half of the screenshot I sent above.
low (700) is used for the part that hasn’t played yet. The right half of the screenshot above.
500 is used for the song name in performance view.
800 is used for the background color of the section name tag in performance view.
50 is used for the text color of the section name tag in performance view.
So if you want to properly swap out a color, you would need to replace at least the shades of 500, 600, 700, 800, 900, & 950. Plus it is likely that there are even more shades of these colors that I didn’t find, used in different areas of the interface.
I see. I suppose you’re using a dev feature in a browser to ‘view source’ of the page?
I wanted a better understanding of all the color options, so I wouldn’t break anything. You certainly gave me that! Thank you very much!
For now, I just want to fix my song colors in the playlist/setlist.
The Amber is somewhere between 600 and 900 and I just want it to be lighter, like maybe 200 or 300, but will have to be careful of the white font washing out if the color is too light.
Trying to get songs (Multifile Mode) colored by ‘energy level’.
The info you’ve given me is very helpful and should get me well on my way.
I greatly appreciate your time and willingness to help!
