3

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'
Alex Gyoshev
  • 11,929
  • 4
  • 44
  • 74
BriDev
  • 143
  • 1
  • 2
  • 9

1 Answers1

7

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

Vincent V.
  • 766
  • 8
  • 16
  • 1
    So, perhaps I should step back a bit... I broke the cardinal rule of asking a question without actually stating my goal. ; ) What I really want is to be able to include the theme libraries in my component in a manner such that I can easily adjust the color variables and test see their resulting changes without having to recompile the entire theme source.The documentation from Telerik implied you could do this by referencing the scss instead of the output css. I honestly don't mind whether it is applied to just my component or my whole site html at this point. – BriDev Jan 27 '17 at 14:51
  • 2
    Well, this is what my solution does. Basically, you import the whole theme's scss in your own scss file. So if you change any variable used by the theme, it will change the output css. Note that you are not referencing the output css directly, but the scss. It is webpack (or equivalent) who will transform this in css for you when building. It means that you have to be able to use scss in your project. See my edit for that part. – Vincent V. Jan 27 '17 at 15:12
  • Ok, thanks Vincent, I think you are pointing me in the right direction. It appears that my current webpack setup may not be setup in the way that this requires (as you pointed out). (I'm still very new to angular / webpack.. using a template created by someone else). At any rate, here is my current webpack config for handling scss files: { test: /\.css?$/, loader: 'raw-loader' }, { test: /\.scss?$/, loader: 'raw-loader!csso-loader!sass' } – BriDev Jan 27 '17 at 15:49
  • Sheesh... ok... so it works when I put the ViewEncapsulation at the level of my component.... but I'm still having trouble when I put it at the higher level. Shouldn't it still work at the component level even without the viewencapsulation turned off and just apply to that component? – BriDev Jan 27 '17 at 19:15
  • Not sure if i understand well, it's hard without seeing code :) You need to put ensapsulation to none in the component where you include the scss kendo theme. To answer your question, yes it should work but not in the sub-components in your component. – Vincent V. Jan 28 '17 at 21:17
  • That's what I wasn't getting. Say I have an app component, then a sub component that contains my kendo pieces. If I simply link to the kendo theme via @import without using any encapsulation it doesn't load. If I add encapsulation to the app component, the sub component is not styled (as you mentioned above). This is what I had been trying to do up until my last post. When I put encapsulation none in the sub component, then the kendo elements of the sub component display correctly. – BriDev Jan 30 '17 at 14:37
  • Grr... still not understanding this completely. Why would this not work at all if I don't have ViewEncapsulation turned off? Shouldn't the styles still apply to the component in which I have imported the kendo styles / scss?? That's what's bothering me. – BriDev Feb 01 '17 at 15:00
  • Also interesting is that if I use ViewEncapsulation.Native, the styles apply, but the kendo web font icons (used for various things like expand/collapse) don't load correctly. Getting frustrated with this.... ;) – BriDev Feb 01 '17 at 15:28
  • 1
    It won't work because kendo components are sub-components. So kendo styles would apply only to the html inside your component, but not beneath the tags. Read Appendix 1 on this link, and inspect your own page to understand how encapsulation works :) https://angular.io/docs/ts/latest/guide/component-styles.html – Vincent V. Feb 01 '17 at 16:40
  • That makes perfect sense now!!! Thank you for helping me get to the bottom of things! I ended up doing a hybrid type solution... I basically created a scss file that contained whatever override variables I wanted to modify, then I compiled it to css & linked directly to that css globally in my doc head. This makes sure the kendo theme is global, but still lets me style using scss variables. Thanks again!!! – BriDev Feb 02 '17 at 21:30