Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggestion: Material You #151

Open
Turbolqk opened this issue Oct 19, 2022 · 10 comments
Open

Suggestion: Material You #151

Turbolqk opened this issue Oct 19, 2022 · 10 comments
Labels
discussion enhancement New feature or request

Comments

@Turbolqk
Copy link

Right now the app looks beautiful and already has a very Material You style. Is it possible to add the coloring/accent aspect as well?

@alialbaali
Copy link
Owner

Do you have any ideas on how to implement it, more specifically on which parts? Since, folders already have chosen colors to them.

I'm thinking of implementing a way to use the system colors as folder colors. What do you think?

@Turbolqk
Copy link
Author

Turbolqk commented May 4, 2023

Hmm, that's a tricky one. I think your idea would work. The folder colors could be different shades of the same colors based on the wallpaper. Etc the yellow option would still be yellow, only matching with the system.

@Turbolqk
Copy link
Author

Turbolqk commented May 6, 2023

Hey, I've got an idea. Check out how the new update of Authenticator Pro implemented Material You. That's a great way to do it.

@alialbaali
Copy link
Owner

Can you share a link?

@alialbaali
Copy link
Owner

This one?

@Turbolqk
Copy link
Author

Turbolqk commented May 7, 2023

Yes, thats the one

@alialbaali
Copy link
Owner

So, I just checked the app. It looks like there's a toggle in settings that would enable/disable dynamic theming, and that's completely a great way to handle it in many apps.

But, with Noto, it's a bit different since folders have specific colors. So, there are two options:

  • Global option, which would allow the whole app (including folders) to look the same by depending on the wallpaper color.
  • Folder-specific option, which would allow only certain folder to depend on the wallpaper color, while the rest doesn't get affected.

Which option do you think would be more suited for Noto? Let me know your thoughts!

@Turbolqk
Copy link
Author

Turbolqk commented May 7, 2023

I have the following thoughts: Certain pastel colors match better with dark themes, while more bright hues match light themes, dynamic colors aside. Why not try to make dynamic colors for the background and accent first and see how the already present folder colors interact with it in general? Then, if necessary, we can figure out a solution for the folder colors problem. What do you think?

@pgrilo
Copy link

pgrilo commented Aug 25, 2023

I would love to see this two options implemented:

  • System colors theme, AKA Monet (based on wallpaper colors).
  • Contextual theme (based on color of selected folder).

  • Global option, which would allow the whole app (including folders) to look the same by depending on the wallpaper color.

Yes! This makes Noto look great!
I have this options implemented on my working-copy: "Follow system + Dynamic", "Light dynamic" and "Dark dynamic".
I am using this mode daily since Noto2.3.0b1 and I can't go back.

(including folders)

I'm not 100% sure what do you mean.. Do you mean all folders getting the same color? Do you mean folders getting random colors extracted from wallpaper, therefor diferent from the ones assigned by the user?

Making the folders colors completly diferent from the user-selected ones is not ideal.
I don't think that this is ideal because diferent colors signify diferent things, some are even semantic (think traffic lights & stop signal), and this plays an important role when the user associates a certain folder/subject with a certain color. In example, a folder named "Urgent" would probably get the "Red" color assigned and this shouldn't be changed drasticaly.

To keep the folder colors untoutched isn't ideal either. I can happly live with it but is not ideal.

What seems be the perfect solution (and designed specificly for cases like this) is the idea of harmonizing the folder colors with the theme's primary color. BTW, I suggest to also harmonize the SupportNotoColor.

What Harmonization does is to slighty shift the given color on the spectrum thowards the primaryColor, but just a bit so it won't become a totally diferent color.

Color Harmonization is used to "massage" semantic colors like errorColor with the primaryColor by default.

There are two functions in MaterialColors, harmonize and harmonizeWithPrimary.
Also check HarmonizedColors and HarmonizedColorsOptions.Builder.

References:

https://material.io/blog/dynamic-color-harmony

https://m3.material.io/styles/color/the-color-system/custom-colors

https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md#using-color-harmonization

https://developer.android.com/reference/com/google/android/material/color/HarmonizedColorsOptions.Builder

https://codelabs.developers.google.com/harmonize-color-android-views


But, with Noto, it's a bit different since folders have specific colors.

YES!
Folder colors, IMO, is one of the most important UI element in Noto because, in addition to the semantics and ID role, it provides CONTEXT. I.e. the fact that the FAB, labels, separators, buttons, etc, takes the folder color gives the user a clear indication about the folder that its actions relates to. UX-wise, this is awesome!

So here enters my second (and most important) suggestion:

  • Contextual theme (based on color of selected folder).

Given that Noto's folders have specific colors and they (colors) play and importante role in the UI/UX, i.e. every element inside a folder already takes the folder color (FAB, Labels, ripple, buttons, separators, progress indicators, etc.. ), the natural solution is to extend this design decision to the remaining elements like backgroundColor, onBackgroundColor, surfaceColor, onSurfaceColor, etc, making it fully themed. This would increase drasticaly the CONTEXT providing a even more immersive experience.
Next-level user experience.

The way you designed Noto makes it scream to be themed this way, and it should be the default (out-of-the-box) theme.
This approach (content based theme) is recomended in the guidelines with the goal of providing context.

A complete colorScheme can be generated dynamicaly from a single color input.

DynamicColorsOptions.Builder
.setContentBasedSource(folderColor)

Refer to:

https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md#content-based-dynamic-colors

Please take my suggestions into consideration.

I'm not sure if I explained my idea well enough. Please let me know if you understood me.

Thank you for this wonderful app!

EDIT: Just came to mind that this "Contextual Theme" could also be made possible by generating and exporting all themes (one theme by folder color) using the web based theme builder

@alialbaali
Copy link
Owner

Thank you for this wonderful app!

Thank you for your input, and feedback!

I have this options implemented on my working-copy: "Follow system + Dynamic", "Light dynamic" and "Dark dynamic".
I am using this mode daily since Noto2.3.0b1 and I can't go back.

Could you please share an example? Maybe a screenshot?

I'm not 100% sure what do you mean.. Do you mean all folders getting the same color? Do you mean folders getting random colors extracted from wallpaper, therefor diferent from the ones assigned by the user?

What I meant is exactly what you described in the following paragraph. All folders will adapt to the wallpaper primary color along with the app. However, as you have stated, that probably isn't the right way to handle it, which I agree.

I'm not sure if I explained my idea well enough. Please let me know if you understood me.

You explained it pretty well. However, I still need to wrap my head around it, since the whole thing is a bit complicated, especially when you add future platforms to it, like iOS, and Desktop.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants