Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Change title color in igx-datePicker from pink to blue

I'm trying to change the color of my date picker; however, it doesn't seem to be working.  Below is from the component scss file:

// Import all required functions and mixins
@import "~igniteui-angular/lib/core/styles/themes/utilities";
@import "~igniteui-angular/lib/core/styles/components/date-picker/date-picker-theme";
@import "~igniteui-angular/lib/core/styles/components/date-picker/date-picker-component";

$my-data-picker-theme: igx-date-picker-theme( $color: blue);

:host ::ng-deep {
@include igx-date-picker($my-data-picker-theme);
This approach worked for a checkbox:

@import "~igniteui-angular/lib/core/styles/themes/utilities";
@import "~igniteui-angular/lib/core/styles/components/checkbox/checkbox-theme";
@import "~igniteui-angular/lib/core/styles/components/checkbox/checkbox-component";

$my-checkbox-theme: igx-checkbox-theme($fill-color: #337AB7);

:host ::ng-deep {
@include igx-checkbox($my-checkbox-theme);
Thanks in advance.
  • 1740
    Verified Answer
    Offline posted

    Hello JK,

    I have made a sample for you which is showing how you could change the header and content background of the datepicker calendar. You can intuitively continue modifing the theme.

    I would like to point out the igx-date-picker is a composition of igx-dialog and igx-calendar components so that you have to use the themes that are connected to those two components in order to achieve some style changes on the date-picker.

    Also please make sure that you have referred to the sass documentation before start using any of the theme configurations.

    Here you can find the documentation about the igx-calendar-theme.

    If you have further questions, please contact us again.

Reply Children
No Data