Rmwc: Add global Theme Picker to docs

[jamesmfriedman]

Add a theme picker to demonstrate runtime theming.

[jgoux]

I tried the theme picker and it's great!

Ideally, would it be possible to add a ThemeProvider where we only have to define the four colors in JS and it calculates and apply all the CSS variables down the tree (like the Sass solution, but in JS only)? (Like how material-ui does, you can even nest ThemeProvider to have specific sub-theme 😄)

This is my last pain before switching from material-ui to rmwc 👍

[jamesmfriedman]

@jgoux, saw your message at 3am, decided to knock it out.

https://jamesmfriedman.github.io/rmwc/theme

Come on over man, and bring your friends.

[jgoux]

@jamesmfriedman You're a machine! Thanks for implementing it!
I guess it's time for me to try rmwc. 😄

[theophanemayaud]

Hey @jamesmfriedman and @jgoux , I was wondering wether the ThemeProvider component actually does what @jgoux seemed to mention : does it calculate, like with the sass theming option from our parent material-components-web, the text colors from the few (minimum 3) we manually define :

As for the text colors, these will all be automatically calculated from the primary, secondary and background you provide, as part of the Sass definitions in mdc-theme. Pretty simple!

It doesn't seem so from the code I found from ThemeProvider, but I don't (yet) have a great understanding of flow or whatever we're using here 😅Does it calculate them ?

Also, I was thinking it'd be good to mention Theme and ThemeProvider in the getting started/styling part of the docs.
Also, while I'm at it, why is the title of that page Styling and Theming, but in the menus only Styling. Lastly, in the table of contents, there is a link, Runtime Color Theming, which isn't actually on the page...
I'll try to look how I can fix these points and tell you what I do, but you're now informed.

[jamesmfriedman]

It doesn’t actually automatically calculate any colors right now, it just allows you to set them. I can look into adding that feature.

I’ll take a pass at cleaning up the docs on this stuff as well.

[theophanemayaud]

@jamesmfriedman I just tried to do something for the styling docs, please see if my PR is ok :)

[theophanemayaud]

@jamesmfriedman so sorry, I think I did it wrong the first time. Now I think I dit it right with the commit conventions with this new PR.

[jamesmfriedman]

@CoVoCre @jgoux In 1.9 I added automatic color calculation to the ThemeProvider.

I look at primary, secondary, surface, and background that are passed and then generate all relevant colors / text colors.

Take a look and let me know what you think.

[jgoux]

@jamesmfriedman Sounds awesome, I'll test that soon!