Sorted and grouped themes and colors

[efb4f5ff-1298-471a-8973-3d47447115dc]

Sorted and grouped themes and colors

Pull Request Type

• Chore

Description

It looked weird to me that the themes were kind of sorted randomly. I tried to make a logical structure to it.

First grouped section are the default themes:

• System
• Light
• Dark
• Black

Second grouped section are themes that dont have specific primary and secondary colors for them, kind of sorted by A-Z if you dont take the flavour of Pink into account :

• Nordic
• Hot Pink
• Pastel Pink

Third grouped section are themes that do have specific primary and secondary colors available, sorted by A-Z:

• Catppuccin Mocha
• Dracula
• Solarized Dark
• Solarized Light

Testing

Test if all the themes and colors still work

Additional context

PR is drafted to discuss this matter.

Q: Should we sort the colors by A-Z? It looks like our basic color and now the grouped colors are kind of sorted randomly but i could be wrong.

Q: Should we add code comments on how the themes are structured so will be easier for contributors, see #5071?

Q: Are there more files I need to make these changes to make it consistent?

[kommunarr]

I think this is a reasonable sorting schema. Could you document it in the code?

[efb4f5ff-1298-471a-8973-3d47447115dc]

@jasonhenriquez see the Q's under Additional context header. This was one of them.

Where do you want me to add the comments?

[kommunarr]

At the top of baseThemeNames in theme-settings.js.

Q: Should we sort the colors by A-Z? It looks like our basic color and now the grouped colors are kind of sorted randomly but i could be wrong.

My answer from our messages:

• Bringing that theme's theme-specific primary & secondary colors to the top as a grouping when that specific main theme is active
• Sorting colors in both groups by their contrast with the main card-bg-color descending

Implementation: Use substring logic on the main theme keys and color keys to identify which theme colors are linked to which theme (if any) (or if not feasible, manually define the groupings). Then for each group, sort them by color contrast ratio descending, put the groups together, and return the result. You can use code here as a reference for getting the color contrast ratio for each color.

Optional: Consider putting the currently active color at the top if you think it would make it less confusing as you switch across different themes.

Q: Should we add code comments on how the themes are structured so will be easier for contributors, see #5071?

For this one, yes, so they can know how to place it themselves, and us too if we forget about it

Q: Are there more files I need to make these changes to make it consistent?

Not to my knowledge, no

[efb4f5ff-1298-471a-8973-3d47447115dc]

Q: Should we sort the colors by A-Z? It looks like our basic color and now the grouped colors are kind of sorted randomly but i could be wrong.

My answer from our messages:

* Bringing that theme's theme-specific primary & secondary colors to the top as a grouping when that specific main theme is active

* Sorting colors in both groups by their contrast with the main `card-bg-color` descending

Implementation: Use substring logic on the main theme keys and color keys to identify which theme colors are linked to which theme (if any) (or if not feasible, manually define the groupings). Then for each group, sort them by color contrast ratio descending, put the groups together, and return the result. You can use code here as a reference for getting the color contrast ratio for each color.

Optional: Consider putting the currently active color at the top if you think it would make it less confusing as you switch across different themes.

I wanted to keep this PR very basic so i wont implement that here. Still those colors looks like a mess. Should I sort them by A-Z?

Q: Should we add code comments on how the themes are structured so will be easier for contributors, see #5071?

For this one, yes, so they can know how to place it themselves, and us too if we forget about it

Done.

[kommunarr]

Thanks for updating!

Should I sort them by A-Z?

I don't think it's worth the effort if we are going to change it shortly after. Unless just for the sake of organizing the code, but then we have to enforce that going forward, and I'm certain people will misplace it in that list.