Kendo Angular 2 Themes

I'm trying to figure out how to customize a theme as outlined here:

http://www.telerik.com/kendo-angular-ui/components/styling/

What I can't figure out is under the section Custom Themes. It describes being able to change the scss variables directly in your own application, but this isn't working for me. Exactly what references do I need in place so I can do this?

$accent: #ff69b4;

@import "~@progress/kendo-theme-default/scss/all";

I can put this in my component style file... but I'm still missing something (it does nothing).

What is the "correct path to modules" that they reference here?

@Component({
  selector: 'my-app',
  styleUrls: [
    // load the default theme (use correct path to modules)
    'styles.scss'

Solution

Due to style encapsulation, if you put this in a component it's going go be applied only to your component's own html.

You want your theme to be applied to the whole html, so you can either put this on your root component (usually app component) with ViewEncapsulation set to none, or put this in a global scss file declared in your <head>.

Here's some code for the first option (the cleanest, in my opinion) :

app.component.ts :

@Component({
    selector: 'app',
    template: require('./app.component.html'),
    encapsulation: ViewEncapsulation.None,
    styles: [require('./app.component.scss')]
})

app.component.scss :

/* Redefine here all the kendo theme variables you want */
$accent: red;

@import "~@progress/kendo-theme-default/scss/all";

Now, this means you have to be able to use scss on your project. For example, with webpack, you can do this:

module: {
    loaders: [
        { test: /\.scss$/, loader: 'to-string!css!sass' },
        ...

You will need to use css-loader and sass-loader npm packages.

You can find all the variables you can customize in the _variables.scss file : https://github.com/telerik/kendo-theme-default/blob/master/scss/_variables.scss