fix(calendar): fix material and indigo theme styles to match webC

angular.json

@@ -307,8 +307,8 @@
                 {
                   "type": "bundle",
                   "name": "styles",
-                  "maximumWarning": "500kb",
-                  "maximumError": "550kb"
+                  "maximumWarning": "600kb",
+                  "maximumError": "600kb"
                 },
                 {
                   "type": "anyComponentStyle",

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

@@ -12,15 +12,15 @@ import {
     booleanAttribute,
     ElementRef,
     ChangeDetectorRef,
-    ChangeDetectionStrategy,
+    ChangeDetectionStrategy, inject, DestroyRef, AfterContentChecked,
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TitleCasePipe } from '@angular/common';
 import { CalendarSelection, ScrollDirection } from '../../calendar/calendar';
 import { IgxDayItemComponent } from './day-item.component';
 import { DateRangeType } from '../../core/dates';
 import { IgxCalendarBaseDirective } from '../calendar-base';
-import { PlatformUtil, intoChunks } from '../../core/utils';
+import {PlatformUtil, intoChunks, getComponentTheme} from '../../core/utils';
 import { IViewChangingEventArgs } from './days-view.interface';
 import {
     areSameMonth,
@@ -31,6 +31,7 @@ import {
     isDateInRanges,
 } from "../common/helpers";
 import { CalendarDay } from '../common/model';
+import {IgxTheme, THEME_TOKEN, ThemeToken} from "../../services/theme/theme.token";
 
 let NEXT_ID = 0;
 
@@ -47,7 +48,7 @@ let NEXT_ID = 0;
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [IgxDayItemComponent, TitleCasePipe]
 })
-export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
+export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements AfterContentChecked {
     #standalone = true;
 
     /**
@@ -197,6 +198,42 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
     private _hideTrailingDays: boolean;
     private _showActiveDay: boolean;
 
+    private _destroyRef = inject(DestroyRef);
+    private _theme: IgxTheme;
+
+    @HostBinding('class.igx-days-view')
+    public defaultClass = true;
+
+    // Theme-specific classes
+    @HostBinding('class.igx-days-view--material')
+    public get isMaterial(): boolean {
+        return this._theme === 'material';
+    }
+
+    @HostBinding('class.igx-days-view--fluent')
+    public get isFluent(): boolean {
+        return this._theme === 'fluent';
+    }
+
+    @HostBinding('class.igx-days-view--bootstrap')
+    public get isBootstrap(): boolean {
+        return this._theme === 'bootstrap';
+    }
+
+    @HostBinding('class.igx-days-view--indigo')
+    public get isIndigo(): boolean {
+        return this._theme === 'indigo';
+    }
+
+    @Input()
+    public set theme(value: IgxTheme) {
+        this._theme = value;
+    }
+
+    public get theme(): IgxTheme {
+        return this._theme;
+    }
+
     /**
      * @hidden
      */
@@ -205,8 +242,37 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
         @Inject(LOCALE_ID) _localeId: string,
         protected el: ElementRef,
         public override cdr: ChangeDetectorRef,
+        @Inject(THEME_TOKEN) private themeToken: ThemeToken
+
     ) {
         super(platform, _localeId, null, cdr);
+
+        this._theme = this.themeToken.theme;
+
+        const themeChange = this.themeToken.onChange((theme) => {
+            if (this._theme !== theme) {
+                this._theme = theme;
+                this.cdr.detectChanges();
+            }
+        });
+
+        this._destroyRef.onDestroy(() => themeChange.unsubscribe());
+    }
+
+    private setComponentTheme() {
+        // allow DOM theme override (same pattern as input-group)
+        if (!this.themeToken.preferToken) {
+            const theme = getComponentTheme(this.el.nativeElement);
+
+            if (theme && theme !== this._theme) {
+                this.theme = theme;
+                this.cdr.markForCheck();
+            }
+        }
+    }
+
+    public ngAfterContentChecked() {
+        this.setComponentTheme();
     }
 
     /**