Support for automatic theme generation from wallpaper

[avanisubbiah]

I created a script here that creates a preset.json file with color definitions from any provided image (Created using material-color-utilities).

I was wondering if it would be possible to integrate this functionality into AdwCustomizer as a section in the themes drop down to allow the user to select an automatically generated light or dark theme using their wallpaper. I don't know if it will be entirely possible because I had to write the script in JavaScript because material-color-utils doesn't currently have a Python library yet.

[daudix]

I have done Mockup for this in #25, I really want it too.

[avanisubbiah]

I published an npm package for the script here so the script could be integrated by having main.py checking if the npm package has been installed, if not run npm install -g adwaita-materialu, and then run gen-materialu-theme -i <Path to image file> -t <Theme type (dark|light)> to create the auto generated presets.

However, I am not sure if a flatpak can install an npm package within itself.

[daudix]

I am not a developer (for now), but i think we can add this script directly in the project, or like with blueprint-compiler, pull it from git repo

[ArtyIF]

I'll probably do it one day. I think it'll be better to rewrite the program so it was more oomox-like for easier integration of new features.

[avanisubbiah]

I am not a developer (for now), but i think we can add this script directly in the project, or like with blueprint-compiler, pull it from git repo

I looked into some solutions, but there really isn't any good way to get around the dependency of requiring all of NodeJS installed to run the script because the material-color-utilities JavaScript package is only usable with ES6 and pkg only compiles JavaScript packages that use ES5 and below. Some other options like ncc and caxa package it into a single file but still require Node to be installed locally on the system to run it. This is a bit of a problem for it to be usable in flatpak because there isn't a flatpak distribution of NodeJS available, so the user would have to manually install that through their package manager.

I'm currently working on porting material-color-utilities to Python in this repo so this script can be run without Node.

[daudix]

Good luck!

[avanisubbiah]

Good luck!

Progress went very well. I have ported the whole material-color-utilities library to Python (available here).

It should be very easy now to integrate this into the project. The only dependency it uses is pillow because I could not find any other obvious way to iterate through pixels in an image and convert formats without it. Also there is some usage examples of how to generate themes or source colors from images on the repo README.

[daudix]

This is just amazing!

[0xMRTT]

Hi @avanishsubbiah.

Do you want to add this repo to the org, it will be more easy to integrate your amazing tool with Adwaita Manager.

[avanisubbiah]

Hi @avanishsubbiah.

Do you want to add this repo to the org, it will be more easy to integrate your amazing tool with Adwaita Manager.

Hello, I'm currently working on updating the code to follow Google's Python guidelines so it can be added into the material-color-utilities repo (pr here). The current code works just fine, it just needs some variables renamed so feel free to fork and use it.

[0xMRTT]

Thanks 👍🙏. I'll include ur generator in the UI redisgn

[0xMRTT]

I'm working on.

@daudix-UFO: I need to add a combobox for selecting the tone. If the tone is low, the color will be darker, if the tone is high, the color will be lighter

[daudix]

OK, looks nice! But can you add radio buttons (circles that becomes blue when selected)?

[daudix]

Or segmented slider

[0xMRTT]

I generated palette from this background :

With tone = 1:

With tone=50:

With tone=95

I think that i will remove very low tone because it's bad

[0xMRTT]

OK, looks nice! But can you add radio buttons (circles that becomes blue when selected)?

Where should i add radio buttons ??

[daudix]

OK, looks nice! But can you add radio buttons (circles that becomes blue when selected)?

Where should i add radio buttons ??

Nevermind, just checked, you maked it correctly

[daudix]

I think tones works pretty good, but first one is too dark

[0xMRTT]

Yes, i am removing tone 1. I need to try all others tone to determine which one is better and set this one as default

[avanisubbiah]

I generated palette from this background :

With tone = 1: With tone=50: With tone=95

I think that i will remove very low tone because it's bad

There is some extra processing used beyond the palette to make a cohesive scheme with Material You. I recommend picking tokens from here: https://m3.material.io/styles/color/the-color-system/tokens, and there might be a way to have it brighten the tone of the generated tokens for tone selection.

As an example here are some token to adwaita mappings.

[0xMRTT]

@daudix-UFO I also need to add another combo box to select if the theme will be light or dark

[daudix]

@daudix-UFO I also need to add another combo box to select if the theme will be light or dark

I think we need to make automatic, see #12

[0xMRTT]

Yes, but we can also let user choice

Adwaita Manager can automaticly select dark or light following user preferences and the user can change it if he want

[daudix]

Yes, but we can also let user choice

Also correct!

[0xMRTT]

It's working

[0xMRTT]

Also added automatic choice

[daudix]

Also, maybe wiered question, but any idea why there is a huge difference in performance between material you GNOME extension and in-app generator?

[0xMRTT]

Material you is written in JavaScript with the original library by google. Adwaita Manager use a port in python. Just created 14 days ago

[0xMRTT]

It's a goal for the next release

[avanisubbiah]

Also, maybe wiered question, but any idea why there is a huge difference in performance between material you GNOME extension and in-app generator?

By default the extension resizes the wallpaper to 64x64 before processing it because it barely makes any visible difference to the colors picked. Also the Python port I made is slower than the JavaScript version of the material-color-utilities library. Either of these or both could contribute to performance differences.

[daudix]

Thank you for detailed explanation!

[0xMRTT]

#108 will improve performance