Use whiskers to generate colors.ini with all flavour/accent combinations

[Anomalocaridid]

Recently, whiskers from catppuccin's toolbox recently got the ability to iterate over each flavour in a single file: https://github.com/catppuccin/toolbox/pull/111

Would it be a good idea to take advantage of this not only generate colors.ini with each flavour's color scheme, but also to generate every combination of flavour and accent colors? So instead of just having, latte, frappe, macchiato, mocha, there would be latte-rosewater, latte-flamingo, etc.

This would not only allow for one to specify their preferred accent color in the Spicetify config rather than having to manually set an option, but also potentially reduce redundancy in maintenance. Rather than having to manually maintain four color schemes in colors.ini, it would be a template essentially consisting of one color scheme worth of code (or two if we want to also keep the current color schemes as they currently are for compatibility) and some Handlebars directives for iterating over every combination of flavour and accent.

I should mention there is a drawback. There appears to be no way to exclude colors when iterating over them. Whiskers would generate a color scheme with an accent for every named color in the catppuccin palette. So someone could set their accent to a color that does not have an equalizer gif made for it, such as base, overlay0, etc.

I would be up for implementing this myself, however it would require changing theme.js and I am not sure what the best way to proceed with that would be. For instance, should I remove the accent menu option entirely or would it be better to keep it and adapt it so it would not break existing setups? Also, what would be the best way to handle setting --spice-equalizer if the user sets an accent color that does not have an equalizer gif?

[ohitstom]

we used to have a system like that and it was terrible for maintaining, minus the whisker though

[ohitstom]

will leave open in case I'm misinterpreting, can you make a mockup or a visual example

if you mean to have a single color ini with loads of base-accent variations I'm still against that as having the ability to change accents in app is quicker and simpler for the end user, and also means the colorini is shorter and easier to manage without the need for a separate tool

but you're welcome to try and convince me here but I'm more worried about the end user than the development process - and an option in the settings is infinitely easier

end goal would to be keeping the existing settings menu option for marketplace users, and as for equalizer we could potentially mess with implementing js code that generates a conversion color filter for the plain white equalizer instead

[Anomalocaridid]

Thank you for your willingness to hear me out.

It should be possible to keep the settings menu option. We could probably do something like keep the current latte, frappe, macchiato, mocha color schemes and then check Spicetify.Config.color_scheme to only apply the option if one of those four themes are set, and ignoring it if something like mocha-rosewater is set.

Regarding colors.ini, it would not need to be edited directly, but rather whiskers would use a handlebars template to generate it, which would just require running whiskers -o colors.ini template.hbs all. Of course, colors.ini itself would still be really long and have a lot of color schemes defined in it. I understand if that is still an issue.

I have included a template for whiskers below as a proof-of-concept. It accounts for my suggestion to keep the four currently available color schemes, which would all be located at the top of the file. I tested it and would have also included the colors.ini file it generates, but it is over 5,000 lines long. Fortunately it still takes less than a second to generate using whiskers.

# Original themes

{{#each flavors}}
[{{flavor}}]
# Spicetify
text               = {{text}}
subtext            = {{text}}
main               = {{base}}
main-elevated      = {{surface0}}
highlight          = {{surface0}}
highlight-elevated = {{surface1}}
sidebar            = {{mantle}}
player             = {{crust}}
card               = {{surface0}}
shadow             = {{mantle}}
selected-row       = {{overlay2}}
button             = {{overlay1}}
button-active      = {{overlay2}}
button-disabled    = {{overlay0}}
tab-active         = {{surface0}}
notification       = {{surface0}}
notification-error = {{red}}
equalizer          = 000000
misc               = {{surface1}}

# Catppuccin
    {{#each colors as | color colorName |}}
{{colorName}}      = {{color}}
    {{/each}}

{{/each}}

# Accented themes

{{#each flavors}}
    {{#each colors as | accentColor accentName |}}
{{!-- ../ is needed to indicate variables from scope outside of the current loop --}}
[{{../flavor}}-{{accentName}}]
# Spicetify
text               = {{accentColor}}
subtext            = {{../text}}
main               = {{../base}}
main-elevated      = {{../surface0}}
highlight          = {{../surface0}}
highlight-elevated = {{../surface1}}
sidebar            = {{../mantle}}
player             = {{../crust}}
card               = {{../surface0}}
shadow             = {{../mantle}}
selected-row       = {{../overlay2}}
button             = {{../overlay1}}
button-active      = {{accentColor}}
button-disabled    = {{../overlay0}}
tab-active         = {{../surface0}}
notification       = {{../surface0}}
notification-error = {{../red}}
equalizer          = 000000
misc               = {{../surface1}}

# Catppuccin
        {{#each ../colors as | color colorName |}}
{{colorName}}      = {{color}}
        {{/each}}

    {{/each}}
{{/each}}

[ohitstom]

I have concerns that the final color ini served to the user having loads of schemes is going to be an issue on the marketplace since their method for switching schemes is a drop-down menu.

as long as we can keep the current functionality of accent switching in the settings I'm happy for you to open a PR implementing this, I believe I understand where you are coming from but my main confusion is the "why?"

for example would this enable more advanced users to create custom schemes, and if not what other benefit is there - because with spicetify color schemes they are very "one and done" you basically never need to tweak them (and apart from user errors or formatting we haven't since the rewrite like 5 months ago) which is why I believe generating it isn't really needed if there aren't any other benefits I'm failing to see

[Anomalocaridid]

Sorry, I probably should have mentioned my reason for this earlier.

My motivation for doing this is to allow more advanced users to use the config file to specify their desired accent once and for all rather than needing to manually change it on new installations or when using the same config across, say, both a desktop and a laptop.

One particular use case I had in mind was using a system such as Nix that generates a user's config, where someone can have global options or variables to specify their catppuccin flavor and accent and reference it across all their themeable programs. This way, the flavor and accent would be defined in only one spot that could be easily changed if desired.

The generation part was mainly because as far as I am aware, without using separate themes, the only way to specify something like this in Spicetify's config system would be to have separate color schemes for each combination and having to manually maintain all possible flavor/accent combinations would be impractical at best.

I am not sure how to resolve the issue with the marketplace's drop-down menu. If it shows color schemes in the order that they are defined then we could just put the four current color schemes at the top so basic users would not have to scroll far. However, I understand if this issue would be too much of an inconvenience to basic users to consider including.

[ohitstom]

I am not sure how to resolve the issue with the marketplace's drop-down menu. If it shows color schemes in the order that they are defined then we could just put the four current color schemes at the top so basic users would not have to scroll far. However, I understand if this issue would be too much of an inconvenience to basic users to consider including.

that sounds reasonable, still not sure on the positives since there are plugins available to directly move all of your local storage between computers (which would include the selected accent color), but as long as the core functionality stays exactly as it is now and this ends up being a more optional method I'm happy.

if you're happy to fully implement it I'm down to oversee your JavaScript changes, I may need support from @nekowinston on whisker related checks in the PR.

[Anomalocaridid]

Yes, I am happy to fully implement it. I'll get to work on a PR. Thank you!

[ohitstom]

Yes, I am happy to fully implement it. I'll get to work on a PR. Thank you!

how's progress coming along?

[Anomalocaridid]

I've gotten it started, but I hit a roadblock early on. For some reason on my system, the accent drop-down in the settings menu does not show up, even with the official, unaltered theme. Without it, I do not know whether my changes are breaking it or not, so I have mainly just been trying to troubleshoot it to determine the cause.

[ohitstom]

I've gotten it started, but I hit a roadblock early on. For some reason on my system, the accent drop-down in the settings menu does not show up, even with the official, unaltered theme. Without it, I do not know whether my changes are breaking it or not, so I have mainly just been trying to troubleshoot it to determine the cause.

Can you send over your spice and Spotify versions so I can make sure you are on the latest, and if you run spicetify enable-devtools you can inspect element for errors

[Anomalocaridid]

Sorry for taking so long to respond.

spicetify-cli version: 2.34.1 Spotify version: 1.2.31.1205.g4d59ad7c

I updated my system last night, but I still cannot see the drop-down menu.

I use NixOS and use the spicetify-nix flake to configure spicetify. I suspect this is related to the problem I am having, but I cannot figure out what exactly it is. I was able to see the drop-down menu with this setup previously, but I am not sure what exactly changed.

I am also having trouble enabling devtools. Because of how my setup works, I cannot just use spicetify-cli enable-devtools. I tried enabling devtools using the https://github.com/kyrie25/spicetify-utilities extension, but I do not see "inspect element" when I right-click and nothing happens when I press Ctrl+Shift+I.

[ohitstom]

someone else had this issue on the discord, and it was because I forgot to wait for a certain dependency - they were also on nix and I think it's because deps load differently on nixos

without Dev tools there's not a whole lot that can be done though, Kyrie's utilities tool used to work really well a few versions back but hasn't been working too great for me recently - I may look into opening a pr for it.

[Anomalocaridid]

I found a workaround for setting an accent color that's much, much simpler than generating every combination of flavor and accent.

Basically just put this line in a file, replace "accent" with the name of whatever color you want as an accent as a string, and install it as a Spicetify extension:

localstorage.setItem("catppuccin-accentColor", "accent");

Anyways, thank you for bearing with me even though, looking back, my original idea would have probably ended up being a nuisance for the maintainers of this team and anyone using the Spicetify marketplace.