Forums Ignite UI for Angular
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
Close
Jeff Kelso
610
Change title color in igx-datePicker from pink to blue
posted

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.
JK
Parents
No Data
Reply
  • 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.

Children