How to create/change a theme at runtime

Question

I want to implement a custom theme selector. That mean choosing a color for primary, accent, warn and background, it does not mean selecting a predefined theme.

When the user has changed a color I want to show the effect of the change. Therefore a part of the DOM with some samples gets an other (md-theme) theme assigned.

I see the following approaches:

• use a theme, say "test" and change the color at runtime.

• register the changes as new theme and dynamically change the themename (md-theme, md-theme-watch)

  However, I have no idea how to make either approaches.

It seems that I could only register themes at startup but that is not what I need

Answer 1

Meanwhile I did a deeper look at the sources (version 1.0.0). So I resulted in following statements

• The first approach will not work. Angular Material compiles a theme only once. Themes will be skipped if already compiled.

  I guess this has been choosen to get a good performance.

• Second approach fails, too. Angular Material gives themed elements a copy of currrent themes. So the elements will not know about newly created themes.

  It is not clear to me which design decision has caused this.

To show how theme changes I decided to use an iframe. In the end I have two pages. When changes apply the page flicker somewhat but that is acceptable