Extract dominant color from icons

[D3vil0p3r]

Description

I'm using same icons on different themes in different colors (red, blue, green and so on) and I'm using the Neon Light theme of Kando that has a pink color as default. Since I would like to automate this glow color of neon theme dynamically based on the color of icons I set, is it possible to add inside:

  "menuThemeColors": {
    "neon-lights": {
      "glow-color": "<value>"
    }
  },

in particular in glow-color an option that set automatically its color based on the color of the icons around?

In this manner, when I change the icons colored differently, I dont need to manually edit also the glow-color of the central ring.

Affected Desktop Environments

All

Additional Information

No response

[Schneegans]

Sorry, but I think I do not understand your request 🫤

in particular in glow-color an option that set automatically its color based on the color of the icons around?

Do you want a specific value like "glow-color": "auto" which makes the color dependent on the icons? But how should that work? Each icon can have a different color?

Can't you create three different themes for Kando and switch the theme when you switch your desktop theme?

[D3vil0p3r]

Do you want a specific value like "glow-color": "auto" which makes the color dependent on the icons? But how should that work? Each icon can have a different color?

Yes, it was the idea. I think it could be done by checking the overall average color of icons. You did a similar thing kn FlyPie on the "fade/projection" when you click on a menu item if I remember well. Once at home I will share a screenshot from FlyPie

[D3vil0p3r]

@Schneegans here what I mean in FlyPie. I have a menu with colored icons:

If I hover the mouse pointer to the one with some red, I get a circle with light red:

If I hover the mouse pointer to the skull icon, I get a black circle:

If I hover the mouse pointer to the pen icon, I get a light cyan circle:

I guess that the colored circle is computed automatically. Is it possible to do the same on the Neon theme of Kando on the central animated circle?

[Schneegans]

Once I find the time, I can do some experiments. There is this lib which could be used for some testing. However, in Kando icons can also come from fonts (like the emoji) or can be animated gifs. In such cases such an approach would fail.

Also, I doubt that it will be fast enough. In Fly-Pie this only worked with a lot of caching and subsampling of the icons. And even then themes using those auto-colors are noticeably slower in Fly-Pie if you have many items.

So the ideal solution would be if we had a few additional CSS variables, like --dominant-icon-color or --average-child-icon-color which themes could use. But again, I doubt that this will be possible.

If anybody has an idea how to approach this, please drop a comment here!

[D3vil0p3r]

Could not be easier to compute the "average value" of colors of icon and applying it?

[Schneegans]

Yeah, that's what I suggest. But how? As I said before, an icon in Kando is not simply an image. It can be text, it can be animated, it can be a vector graphic, it can be a raster image. Computing the "average value" of something like this is very difficult, and maybe impossible if you only have a fraction of a millisecond to do it...

[paclarap]

I just fire away (without having a look at the actual existing code), maybe it helps:

If i understood correctly, you wonder about mean/average-color-determination for icons and/or for example empjis used instead of icons?

If so, for graphics there is the Fast-Average-Color library ( https://fast-average-color.github.io/examples/background.html ) - an npm install away.

For a universal embedded version, it would be possible to calculate the average/mean color of an imagelement by creating a canvas, then drawImage (basically capturing/screenshotting) and getImageData to then iterate through each color channels data applying math.floor colorchannel by count.

Since the canvas element can be used to draw/capture any type of element, this can also be a font-based element.

I have nothing but an ipad and iphone at hand at the moment until i get back home, so cant demonstrate this easily.

But well maybe this helps for the task?

[paclarap]

Oops, totally ignored the "in a fraction of a millisecond" part.

Sure it won't be fast, but on the other hand this can be done outsourced to a worker, then caching it to localstorage and creating a localdb which stores the actual mean values once done for each icon/img/element alongside, that is if Kando actually allows all these options, i am not aware what features of js/css/html are available for kando.

If you find the time, feel free to point out what features are accessible, so in the future i/others can give more precise answers, without flooding issues.

[Schneegans]

Yeah, all of this is available. Basically everything you know from web dev. Of course this can be done somehow... But it's not going to be exactly easy.

Caching can be an option, but invalidating the cache will be challenging. For instance, the color of text-based icons depends on the menu theme. So if the user changes or tweaks the menu theme, the cache needs to be invalidated as well. In the future, once we have the API to open menus programmatically, we will also have the possibility that the user of the API provides the icons (maybe as a base64 encoded string). These icons can by dynamic (for instance showing a counter of unread messages). Then, caching will not help much either.

So it has to be fast anyways. If anybody wants to give this a shot, the relevant part of the source code is here. At this point, we would need to compute the dominant color of the returned icon div!

[paclarap]

Thanks, i will try to dig myself into the code in the spare time i can free up.