Better choice for colors in ags bar and widgets

[midn8hustlr]

The generated colors for ags bar and widgets looks dull. Most of the background or groups are given very dark color and doesn't change much with the wallpaper. I guess it might look better for OLED screens, but color variance is very little to be able to differentiate the elements at least for LED screens.

Also in the above picture, according to material UI guidelines I feel the bar background color should be against the bar group color. Since the bar groups (like workspace bar) is already dark (which is against the occupied workspace color - light), so the bar background should be light color. I might be wrong, I am not an UI expert though, this is just based upon my understanding and what I feel visually pleasing.

I was doing some experiments to make the colorscheme more vibrant, based on few inspirations and ended up with the following theme. The left ones are from the original colorscheme, while and right ones are from my modified ags scss.

Also a lighter background would suit better if transparency/blur is enabled in the _colors.scss (its not enabled above). Let me know what you all think about this colorscheme, I am personally using this but if people like it I can open a PR.

[clsty]

I'm not sure by just looking at those screenshots.
I'd like to try out your css and make further comment based on my experience.

[midn8hustlr]

Ok, I will open a PR. My css is still not perfect, I have to put some efforts to support light mode and trasnperancy. I will open a PR when its done.

[midn8hustlr]

Also the original _colors.scss in ags directory modifies the material generated colors, by reducing opacity or mixing with other colors, and generates a lighter or darker version of it. This, I feel is against the material guidelines. We do not need so many colors, the material UI already provide so many colors to choose from.

[end-4]

The color problem

• I admit that the colors look lame after a while... I've spent lots of time tinkering the values to make this look good, but the result depends on the wallpaper

  • A lot of color tint tends to be great with light theme/light wallpapers
  • Darkened colors tend to go well with dark wallpaper/dark theme

• While Material 3 does provide a lot of colors, I just use a library that provides limited ones and doesn't have as many color roles, so I did a lot of random mixing.

• Maybe using Matugen is a great idea since it provides more color roles hmm

Your pallete

• Imo this looks weird. There's too much contrast between surfaces, which is unnecessary (though honestly I think my current colors make this contrast too low)

[midn8hustlr]

Yes, I do agree a bold contrast is visible between the background (light) and the group (dark) colors. While, both the background and groups have dark color in your setup, so contrast is not visible. That was the problem I was trying to solve. We can make the background little darker in my setup to reduce the contrast difference, however I am using only the colors generated by the python library ( I am not mixing or transparentizing anything), so my options are limited.

I don't think colors are a problem, I feel the pallete choice is dull (especially for the bg of widgets). Sometimes generated colors might not be good from wallpaper to wallpaper, but we always have the option to manually select a color and generate a colorscheme.

I am also planning to create a transparent UI (switchable like dark/light mode) with iOS like blur effect (the default transparency/blur by turning on $transparency_enabled in _colors.scss and adding layerrule in hypr conf doesn't look great). If we can can achieve a perfect material UI, then transparency can be achieved just by reducing opacity of all the colors by some amount.

Thanks for the feedback btw. I was assuming that my setup looks cool, but now I feel its weird too. I will try Matugen, lets see how it goes.

[end-4]

I was assuming that my setup looks cool, but now I feel its weird too

haha, me every time i tweak these color values

[end-4]

what if
pick dominant color of image -> choose one of the very good predefined color themes that has the closest accent color
i don't really like it, but it's an option

[clsty]

I think it's a good idea.

[midn8hustlr]

Don't we already have that mode using >color in overview?

[midn8hustlr]

Btw, the material-color-utilities lib also provides a way to extract 'n' dominant colors from an image and choose one of them to generate a colorscheme (see).
By default the most prominent one is used to generate colorscheme with themeFromSourceColor in material-color-utilities-python.

[midn8hustlr]

I did try to use Matugen, but I feel there's a bug where the container and onContainer colors of generated colorscheme are very similar in dark-mode and is difficult to read text. However, light mode looks good though. I will raise an issue there regarding this.

Plus I don't feel some of its generated colors are intact with material UI. What I mean is, if I generate a colorscheme from wallpaper using material theme builder and compare with Matugen, some of the colors like those in containers don't looks alike. The official material UI generates a better and a more visually pleasing colorscheme.

This brings up for me to search for a program which exactly follows Material UI's guideline of generating colorscheme or simply a port of their libraries in Python. I found materialyoucolor-python, which does the same thing as material-color-utilities-python, but generates more colors (all the colors specified in material UI), is more frequently updated, and is faster.

The colorscheme generator from materialyoucolor-python is great and is mostly similar to what material UI generates, but the color-picker has a bug, and doesn't generates good dominant colors (as compared to what is generated by the typescript version of material-color-utilities).

I will dig into this issue and will try to incorporate this in ags when I get true material colors and finally satisfied with the generated colorscheme.

[end-4]

Thanks for the insight. I'll try to use this new lib so we have more color options in styles.

I think we might have to accept the fact that Material You colors only look good for light theme. We need something else that generates more vibrant colors for dark theme

[midn8hustlr]

IMO, in the material theme builder, the dark themes looks great too. You can try this by uploading any wallpaper.

There are two parts to this problem:

1. Picking Vibrant Colors from Wallpaper: material-color-utilities-python, does this better but is outdated, doesn't supports latest dynamic Material You colors and limited colors. Matugen also does this better, but the some of the dark theme colors sucks.
2. Generating Material colorscheme from a color: materialyoucolor-python excels in this, but sucks in picking colors from images.

Solutions:

1. Use matugen for picking colors and materialyoucolor-python for generating colorscheme s, untill one of them fixes their corresponding issues.
2. Use the official C++ library from material-color-utilities. I am trying this but facing linking issues with lib-abseil. If I succeed in this, then I can write a c++ wrapper and we can use that to generate colorscheme.

[end-4]

i'd rather use python for this one task
i've abused cpp in my rice before and it wasn't fun

[end-4]

On the Material Theme Builder, in the "Custom" tab there's an option called "Color match"
Checking it makes it respect the accent color more. I wonder if the (materialyoucolor-python) library has something like this

[midn8hustlr]

There must be a an option to set it in the library, but I am not sure what kind of function the "Color match" is executing. Upon analyzing the website, it seems that it is generated from flutter. I do not have any expertise on flutter or how to inspect elements. The official library also doesn't have good docs to explain all the options.

[end-4]

Since #337 is already merged I'm closing this