AngularT Dark_870x220

Our Buttons are looking pretty good after the work we did in the last post. But what if we wanted to customize them? Where would we even begin? Find out the answers to these questions, along with how to utilize themes that come with Kendo UI in part three of Angular & Kendo UI Unite!

Hello, and howdy. My name is Alyssa Nicoll. Welcome back to segment three of Angular & Kendo UI Unite. If you are new to this series, check out the first post to get started!

You can also watch the the video this post is based on right here - otherwise, dive on into the text below.

Now that we've concluded part two of this series, right now our buttons are looking pretty good.

image-7

However, what if we wanted to customize them? Where would we even begin with something like that? And what about themes? What are themes and how can we utilize them?

Themes

Themes are styles for our Kendo UI components to make them look cohesive and snazzy. When we first used ng add to include Kendo UI Buttons in our application, that also included the default Kendo UI Theme (see package.json file). You can see what all components for the default theme look like here.

img-1

We have more than the default theme however! I want to show you inside our docs, where we have a styling overview that talks about the multiple themes that we have to offer. The first, as you know, is the default theme, that came with our button components initially. We also have a Bootstrap and a Material one.

img-2

Check out more about our Bootstrap theme here:

img-3

Check out more about our Material theme here:

img-4

Including a Different Theme

In this article we are going to be giving the Material theme a spin. We’ll begin by installing the Material theme in our app:

npm install --save @progress/kendo-theme-material

Next, we'll change any references to kendo-theme-default to kendo-theme-material in angular.json. Then, spin up the ol’ server and check out the insta-magic. Instead of the default orange button for our primary button that we had, we should see a blue one for the Material look:

img-5

In fact, all of our buttons look different now!

Default styles:

img-6

Material theme styles:

img-7

Customizing a Theme

What I'd like to talk about next is actually customizing the theme. So if we head on over to the customization page in the docs, you can see a list of SCSS variables. These variables are overridable, which means we can set them to whatever values we’d like.

img-8

In order to modify these variables, we need to go ahead and start using SCSS in our angular application. All we need to do is change the extension of the styles file to .scss. Then, in angular.json, modify any styles.css references to styles.scss.

Now that we've made those changes, we should be able to use SCSS in our application. In fact, if we go ahead and reopen the terminal and restart our app, we see that nothing has changed and all looks as it did! This is because all valid CSS is valid SCSS. So we don’t need to change our styles at all for the .scss file to just work.

The next part, which you can actually read about in our docs, is customizing themes. The links to the variables for the Default, the Bootstrap and the Material theme are all right there, super handy. But then below we also talk about using SCSS.

To start customizing, let’s go inside of our styles.scss file and modify some variables like the $primary button color. Then, let’s import the scss for the Kendo UI Material Button. So before we had a blue primary button, but now with our new $primary variable, we should be able to see a pink primary button instead!

$primary: #ff69b4;
@import "~@progress/kendo-theme-material/scss/button";

img-9

It worked! Let's go ahead and change another variable, like for instance the first one on the list, button text. So, let's go back over and change it, and we're not going to get fancy. We're just going to do the same pink:

$primary: #ff69b4;
$button-text: #ff69b4;

@import "~@progress/kendo-theme-material/scss/button";

img-10

So, as expected, any Material buttons now have pink text. However, I wanted to mention as a side note that these variables, as with any good variable, are used in multiple places. So, it's not just used on the button text, it's also smartly used to create, for instance, a background on hover:

img-11

If we go over these buttons and see their background color on hover is using a slightly more opaque color of pink as the button text color we just provided.

You can, of course, modify other things outside of the variable list and use these variables yourself as well. For instance, we have this nice pink text on our Material buttons and we’d like that same look for the Bare buttons. We can call out the k-button and k-bare classes, and then set the color to $button-text variable.

$primary: #ff69b4;
$button-text: #ff69b4;

@import "~@progress/kendo-theme-material/scss/button";

.k-button.k-bare {
  color: $button-text;
}

img-12

Now we see that the bare buttons text has been changed, however on hover, it doesn’t look so hot.

img-13

We simply need to add a call out for on :hover as well:

...
.k-button.k-bare, .k-button.k-bare:hover {
  color: $button-text;
}

So, Kendo UI theming is super flexible and we have a lot of documentation that you can check out to dive further. It's one of, honestly, my favorite parts because I've worked with other CSS libraries that just weren't as flexible. Something to watch out for, because we are a CSS library, sometimes we do have to use the important tags. It's always nice to use your inspector, to find out what is being used currently to style things and what selectors you should use to override them:

img-14

This is exactly how I knew that we would need to select .k-button.k-bare to give it the pink text color.

One last thing I wanted to mention was if we go back to our styles, as you see, we are importing just the Kendo UI Material button styles into our scss. This is a good practice instead of importing all of the styles, like this:

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

It’s best to only import the styles you’ll be using in your application and preferably into individual files for the specific thing you’ll be styling. So if you are customizing the Kendo UI Charts in your app, best to put those in their own style sheet.

Helpful hint: We no longer need the Kendo UI theme styles listed out in our angular.json file since we are importing these inside our scss file! You can remove those if you’d like. :)

That is all I have for you today on customizing with style and themes. I hope you all are having a blast. Watch out for the next post in the series where we’ll be taking our app to the next level by building out a to-do list! Have a wonderful day and happy coding. :D

If you're new to Kendo UI for Angular, you can learn more here or just jump into a free 30 day trial today.


AlyssaNicoll
About the Author

Alyssa Nicoll

Alyssa is an Angular Developer Advocate & GDE. Her two degrees (Web Design & Development and Psychology) feed her speaking career. She has spoken at over 30 conferences internationally, specializing in motivational soft talks, enjoys gaming on Xbox and scuba diving in her spare time. Her DM is always open, come talk sometime.

Related Posts

Comments

Comments are disabled in preview mode.