Change theme

1 Answer 56 Views
General Discussions
Ursus
Top achievements
Rank 1
Iron
Ursus asked on 26 May 2022, 05:17 PM

Hi

another question regarding the angular coffee example. I have made my own theme. I then added it to the drop-down in the header component link this (I also tried to change the default theme to ocean blue):

public themes: { href: string; text: string }[] = [
      {
         href: 'assets/kendo-theme-default/dist/default-ocean-blue.css',
         text: 'Kendo default (ocean blue)',
      },
      {
         href: 'assets/kendo-theme-bootstrap/dist/all.css',
         text: 'Bootstrap',
      },
      {
         href: 'assets/kendo-theme-material/dist/all.css',
         text: 'Material',
      },
      {
         href: 'assets/light-theme/dist/theme-light.css',
         text: 'My light theme',
      },
      {
         href: 'assets/dark-theme/dist/theme-dark.css',
         text: 'My dark theme',
      },
   ]

and I also updated my angular.json file to include copying the new assets:

 "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/@progress/kendo-theme-default/dist",
                "output": "/assets/kendo-theme-default/dist"
              },
              {
                "glob": "**/*",
                "input": "node_modules/@progress/kendo-theme-bootstrap/dist",
                "output": "/assets/kendo-theme-bootstrap/dist"
              },
              {
                "glob": "**/*",
                "input": "node_modules/@progress/kendo-theme-material/dist",
                "output": "/assets/kendo-theme-material/dist"
              },
              {
                "glob": "**/*",
                "input": "src/assets/theme/dark",
                "output": "/assets/dark-theme/dist"
              },
              {
                "glob": "**/*",
                "input": "src/assets/theme/light",
                "output": "/assets/light-theme/dist"
              }
            ],

I thought this was pretty straightforward... I have double checked that the new files are in the assets folder but I am getting two errors:

1.  a **404 error** that the themes are not found...this is with my theme

2. a **The resource from ... was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).** with the default-blue-theme.

Any idea what I am missing?


Thank you for any help given

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Ivo
Telerik team
answered on 31 May 2022, 08:19 AM

Hi Ursus,

According to the errors it does seem that the CSS files are not present in the given location.

The Ocean Blue CSS file (default-ocean-blue.css) does not come with the Default Theme package (node_modules/@progress/kendo-theme-default/dist). There is a default-ocean-blue.scss file that contains the SCSS variables but there is no default-ocean-blue.css file. You can download the Ocean Blue CSS file from our ThemeBuilder and copy it into your application manually.

Also, instead of relying on the angular.json file to copy the assets, would you please copy them manually and try again?

If the issue is not resolved, please send us a sample application where we can see the problem and investigate it further. Thank you.

Regards,
Ivo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Ursus
Top achievements
Rank 1
Iron
commented on 31 May 2022, 11:06 AM

thank you very much for your explanation - that fixed my problem !
Tags
General Discussions
Asked by
Ursus
Top achievements
Rank 1
Iron
Answers by
Ivo
Telerik team
Share this question
or