search

material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
363 stars 28 forks source link

[Web] Can't export the theme generated out of dynamic color #93

Closed Ghedeon closed 1 year ago

Ghedeon commented 1 year ago

Describe the bug Maybe I'm missing something but my expectation was that it should be possible to export current theme, generated from wallpaper. What happens instead is there is no export action available in "Dynamic" and once you switch to "Custom" the theme is being set to a default one, so you dynamic palette is lost.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://m3.material.io/theme-builder#/dynamic
  2. Click on 'Dynamic'
  3. Click on wallpaper, observe that the theme has changed
  4. Click on 'Custom' in order to export current theme
  5. Observe that the theme is lost and reset to the default one

Expected behavior Add Export action directly to "Dynamic" tab or at least apply current theme to "Custom" so it can be exported

Desktop:

jwill commented 1 year ago

Logging the issue as a feature request but it works as intended.

Closing as WAI/Not planned now.

Ghedeon commented 1 year ago

If not being able to export the "Dynamic" scheme considered "works as intended", does it mean that it has no practical usage and is only for demonstration purposes?

jwill commented 1 year ago

That was the original intent, yes, as a demonstration of how dynamic color affects a UI. A prior version of the UI even had a button to change to a random color. The intent is for you to navigate to Custom to create a theme for export.

michenriksen commented 1 year ago

I have found a way to export a dynamic theme generated from a wallpaper: It looks like the theme builder detects the most prevelant color in an image and uses that as the primary theme color. The rest are complementary colors derived from the primary.

So to get an exportable theme from a wallpaper, you need to grab the hex color used for these buttons in the preview (can be done with the color picker tool in developer tools):

Material_Design

And set that color as primary in the Core colors section of the custom theme builder page. The other colors will be derived from the primary color, and should match what you see in the dynamic preview.

UnFunnyGuy commented 1 year ago

imagine not allowing to export dynamic colors