Theme dark issue (Angular, Material, SCSS)

[Olivier]

Hi,

I just started a news project (angular). I want to apply a custom material dark theme using SCSS. I :

- Created a base dark indigo
- Installed base theme by `yarn add @progress/kendo-theme-material`
- Copied and renamed variables.scss as dark.scss in my themes folder
- Added Google fonts to index.html
- Edited my styles.scss file :

`

/* You can add global styles to this file, and also import other style files */

@import "~@progress/kendo-theme-material/dist/all.scss";
@import 'themes/dark.scss';

body {
  font-family: Roboto, sans-serif;
}

`

Fonts are ok. I can see styles applied on controls according to material design. But dark theme is not applied. Background is white. Any idea ?

Thanks,

[Olivier]

Changed order of import, this is better. Cards appear dark as expected, body still white.

[Olivier]

Finally found that settings $base-gradient: #555555; and then apply background variable to body solves issue. Is this the correct way to achieve it ?

[Martin]

Hi Olivier,

I can confirm that the approach that has been taken is valid, and also described as one possible way of customizing the themes in this article. The following page lists the available variables for customizing the Material theme.

https://www.telerik.com/kendo-angular-ui/components/styling/theme-material/customization/

Here are all variables of the Material theme:

https://github.com/telerik/kendo-themes/blob/develop/packages/material/scss/_variables.scss

I hope this helps.

Regards,
Martin
Progress Telerik