Provide a theming solution for apps consuming material

[Jeremy Elbourn]

Needs design doc

[Günter Zöchbauer]

angular/angular#2567

[Benjamin Francisoud]

@jelbourn about your comment #123 (comment) what do you mean by Needs design doc ?
As an end user, I would expect theming to work kind of angular1

I would expect something like this code in a app/main.ts since it's a central part of the application:

import { bootstrap }      from '@angular/platform-browser-dynamic';
import { mdThemingProvider } from '@angular2-material/core';

import { AppComponent }         from './app.component';
import { appRouterProviders }   from './app.routes';

bootstrap(AppComponent, [
  appRouterProviders,
  mdThemingProvider
]);

but in this case I don't know where to put this kind of code

mdThemingProvider.theme('default')
    .primaryPalette('pink')
    .accentPalette('orange');

so may be another solution it to have main.ts delegate to another provider like this:

import { bootstrap }      from '@angular/platform-browser-dynamic';

import { AppComponent }         from './app.component';
import { appRouterProviders }   from './app.routes';
import { appThemingProvider }   from './app.theme';

bootstrap(AppComponent, [
  appRouterProviders,
  appThemingProvider
]);

and a app.theme.tswith:

import { theme } from '@angular2-material/core';

export const appThemingProvider = [
    theme('default')
        .primaryPalette('pink')
        .accentPalette('orange');
];

a alternative would be to reproduce what is done in the router doc
app.theme.ts

import { provideTheme, ThemingConfig } from '@angular2-material/core';

const themes: ThemingConfig = [
  { id: 'default', primaryPalette: 'pink',  accentPalette: 'orange'},
  { ... },
  { ... }
];

export const appRouterProviders = [
  provideTheme(themes);
];

[Jeremy Elbourn]

The primary way of theming for material2 will be static. The run-time generation of styles is not suitable for most apps because it is rather expensive. That said, we will possibly also have an optional run-time configuration as well.

[David Reher]

maybe it is a stupid question, but can theming be done today at all?

[Jeremy Elbourn]

Not easily until we finish implementing user-facing theming.

[Muhammed Ashik]

Looking forward for this feature!

[mehran9]

Same here!

[Zac Dean]

It doesn't seem like scss is supported at all right now because components such as sidenav try to import scss with paths like @import 'default-theme'; which doesn't exist because it's from other components.

[Jon Walsh]

Thanks for continuing to work on this. I'm not sure if the following is planning on being supported, so I'm mentioning it just in case:

I plan on including a "dark/light theme" setting in my app. I'm hoping I'll be able to export both normal/dark material theme variations, with the dark version only enabled when body.dark class is present (set by the UI setting). Will this sort of thing be possible in future?

[Jeremy Elbourn]

Current status: we're trying out a couple of different designs on this now, trying to gauge what works best.

[Muhammed Ashik]

@jelbourn Great! waiting for this to be released!

[Jeremy Elbourn]

Closed by #1239, will be in the next release.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}