DatetimePicker not picking up theme text color in dark mode

[opticSquid]

I am using datetime picker with material UI 3.
When I'm using the component the output looks like this:

With very much difficulty you can see the calendar.

The HTML code looks like this:

In the root stylesheet (styles.scss) I have:

I'm asking here with lot of hope to help me fix this. Please help me out I have a release on this Friday.

[opticSquid]

I am using datetime picker with material UI 3.
When I'm using the component the output looks like this:

With very much difficulty you can see the calendar.

The HTML code looks like this:

In the root stylesheet (styles.scss) I have:

I'm asking here with lot of hope to help me fix this. Please help me out I have a release on this Friday.

@nzbin please help if you can

[opticSquid]

If you need more details please let me know.

[nzbin]

👇 Very important

$light-theme: mat.private-deep-merge-all( 
  mat.define-theme($light-config), 
  mtx.define-theme($light-config) 
); 

extensions/projects/docs/src/styles.scss

Lines 10 to 27 in 43fae8e

	$light-config: (
	color: (
	theme-type: 'light',
	primary: mat.$azure-palette,
	tertiary: mat.$blue-palette,
	),
	);
	// Define the default (light) theme.
	$light-theme: mat.private-deep-merge-all(
	mat.define-theme($light-config),
	mtx.define-theme($light-config)
	);
	:root {
	@include mat.all-component-themes($light-theme);
	@include mtx.all-component-themes($light-theme);
	}

[opticSquid]

ok let me try this once

[opticSquid]

yes this works many thanks @nzbin. 😊

[liemwellys]

Hi, I think I'm facing the same problem like as mentioned above. The datetime picker becomes transparent.

Currently I'm implementing datetime picker on angular 14 project & using angular material 14. I have imported MtxDatetimepickerModule & MtxNativeDatetimeModule into needed module. My current code for implementing this feature is as follows:

<mat-form-field
  class="form"
  appearance="outline"
  *ngIf="selectedTimeFilter(i) !== 'between'"
>
  <mat-label>{{ t('filterMenu.selectDateTime') }}</mat-label>
  <input
    matInput
    [mtxDatetimepicker]="picker_i"
    placeholder="{{ t('filterMenu.selectDateTime') }}"
    [formControlName]="'dateTime'"
  />
  <mtx-datetimepicker
    #picker_i
    [type]="'datetime'"
    [mode]="'auto'"
    [multiYearSelector]="false"
    [startView]="'month'"
    [twelvehour]="false"
    [touchUi]="false"
    [timeInput]="true"
  ></mtx-datetimepicker>
  <mtx-datetimepicker-toggle
    [for]="$any(picker_i)"
    matSuffix
  ></mtx-datetimepicker-toggle>
</mat-form-field>

Is there any solution for this issue? Thanks in advance.

[liemwellys]

Based on the previous answer by @nzbin, I finally found the solution by add the following config into styles.scss file and now it works perfectly.

@use "@angular/material" as mat;
@use "@ng-matero/extensions" as mtx;

// Define custom color palettes
$primary-palette: mat.define-palette(mat.$indigo-palette);
$accent-palette: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$warn-palette: mat.define-palette(mat.$red-palette);

// Define the default (light) theme using the custom palettes
$light-theme: mat.define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $accent-palette,
    warn: $warn-palette,
  )
));

// Include the default theme styles for Angular Material components and extensions
:root {
  @include mat.all-component-themes($light-theme);
  @include mtx.all-component-themes($light-theme);
}

result: