color destilation idea

[JxJxxJxJ]

This is an attempt to take the colors from the background and try to separate them in stuff that more or less makes sense to. It's not finished, but it's an idea... in the best scenario these would always be great to look at, but I need more color theory and coding skills to do that. After the destilation process ends, you can automatically asign them for your extensions variables, that way, hopefully, we can have an extension that does theming automatically.

Edit: ah, or maybe something like pywal would work better https://github.com/dylanaraps/pywal

[neuromorph]

Hello,

Thank you for this. I was also thinking about auto-applying by refining the colors from the palette as a future update. I do not believe that there could be a one size fit all solution. It tends to be opinionated and is inherently subjective. You are right, in that, color theory and design principles can provide sufficient guidelines to enable auto-generation/application for the style properties. In any case, I think generating multiple options would be the way to go.

There are two steps/stages and each can have multiple options:

1. Extracting the color palette from the background image. (At first, reading 'distillation', I thought this is what you are referring to but I see you mean the next step).
2. Refining/sorting the palette colors. The raw color palette likely also needs complimentary colors/palette. Based on light/dark theme, assigning them appropriately to following properties :
   • Background, Foreground, Hover/highlight, Accent/Active/Selection, Border, Shadow
   • all these for Panel bar and for the Menus (could be same for both or not)

For the first step, currently the extension uses Modified median cut quantization algorithm. There are other possibilities but it is a good start already. So, we can first focus on the second step. Your approach of using tinycolor to sort/manipulate colors is promising. The pywal project looks interesting as well but it seems in the end it expects the user to make some decisions about choosing colors to apply from the refined palette (for specific apps). I have not looked in detail so feel free to correct me if that's not the case. There's also gradience or material-color-utilities that does something like this that we can get inputs from.

I will look more into tinycolor and other options to get inspiration for how to go from a raw color palette to refined/complimentary colors assigned to specific properties listed above. Feel free to update here anything that you may find to be useful.

Btw, if you have pictures of the sample color palette in your code and what was finally selected for the properties, do share.

I am keeping this open for further discussion.

Thank you.

[neuromorph]

Update: Unfortunately, I decided not to go ahead with this and did not use tinyclor either. However, a new version of the extension is now live and it includes the options for auto-theming so you may want to try it out (v17/v18). It is a little more elaborate and has multiples variations. Check autothemes.js if you like to peek into it. In this version, it mostly uses custom logic to select and manipulate colors. This can result in much diverse results (compared to material color utilities) not all of which maybe good but one of them should be close enough. In the future, I do want to also add an option for material-color-utilities based theme but haven't started on that.

Feedback welcome. Thanks.