Gradience icon indicating copy to clipboard operation
Gradience copied to clipboard

Support for automatic theme generation from wallpaper

Open avanisubbiah opened this issue 1 year ago • 8 comments

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.

avanisubbiah avatar Jul 28 '22 17:07 avanisubbiah

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

daudix avatar Jul 28 '22 17:07 daudix

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.

avanisubbiah avatar Jul 28 '22 19:07 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

daudix avatar Jul 28 '22 20:07 daudix

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.

ArtyIF avatar Jul 28 '22 20:07 ArtyIF

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.

avanisubbiah avatar Jul 29 '22 04:07 avanisubbiah

Good luck!

daudix avatar Jul 29 '22 11:07 daudix

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.

avanisubbiah avatar Jul 29 '22 23:07 avanisubbiah

This is just amazing!

daudix avatar Jul 29 '22 23:07 daudix

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.

0xMRTT avatar Aug 10 '22 13:08 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.

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.

avanisubbiah avatar Aug 11 '22 03:08 avanisubbiah

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

0xMRTT avatar Aug 11 '22 07:08 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 Screenshot from 2022-08-11 12-34-52 image

0xMRTT avatar Aug 11 '22 10:08 0xMRTT

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

daudix avatar Aug 11 '22 11:08 daudix

Or segmented slider

daudix avatar Aug 11 '22 11:08 daudix

I generated palette from this background :

background_test_monet

With tone = 1: Screenshot from 2022-08-11 14-36-36 With tone=50: Screenshot from 2022-08-11 14-37-02 With tone=95 Screenshot from 2022-08-11 14-37-25

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

0xMRTT avatar Aug 11 '22 12:08 0xMRTT

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

Where should i add radio buttons ??

0xMRTT avatar Aug 11 '22 12:08 0xMRTT

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 avatar Aug 11 '22 12:08 daudix

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

daudix avatar Aug 11 '22 12:08 daudix

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

0xMRTT avatar Aug 11 '22 12:08 0xMRTT

I generated palette from this background :

background_test_monet

With tone = 1: Screenshot from 2022-08-11 14-36-36 With tone=50: Screenshot from 2022-08-11 14-37-02 With tone=95 Screenshot from 2022-08-11 14-37-25

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.

avanisubbiah avatar Aug 11 '22 12:08 avanisubbiah

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

0xMRTT avatar Aug 11 '22 12:08 0xMRTT

@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

daudix avatar Aug 11 '22 12:08 daudix

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

0xMRTT avatar Aug 11 '22 12:08 0xMRTT

Yes, but we can also let user choice

Also correct!

daudix avatar Aug 11 '22 12:08 daudix

It's working

0xMRTT avatar Aug 11 '22 14:08 0xMRTT

Also added automatic choice

0xMRTT avatar Aug 11 '22 14:08 0xMRTT

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

daudix avatar Aug 11 '22 21:08 daudix

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 avatar Aug 11 '22 21:08 0xMRTT

It's a goal for the next release

0xMRTT avatar Aug 11 '22 21:08 0xMRTT

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.

avanisubbiah avatar Aug 11 '22 22:08 avanisubbiah

Thank you for detailed explanation!

daudix avatar Aug 11 '22 22:08 daudix

#108 will improve performance

0xMRTT avatar Aug 11 '22 22:08 0xMRTT