How to install a custom material theme

[Nathan]

Hello our company is considering using Telerik Angular UI and we have questions regarding creating and installing a custom theme.

Here are the steps we took so far: 

1) progress theme builder for angular material created a project named test-custom-theme. 

2) changed primary color and secondary to our company colors and background to a dark gray just to see that the theme is working. These are extremely simple changes our artists will do much more once we prove out the concept. 

3) exported test-custom-theme from theme builder into a zip. 

4) created a new angular project called telerik-test-app using the angular cli, installed the telerik license and activated.

5) started to follow the readme with the custom theme zip this is where things started to not work.

After generating the theme builder zip I preformed the following steps.

1) The readme says extract the custom theme folder to your application and use it as a standard npm package.

2) Changed dir to telerik-custom-theme and ran npm install

3) added the dependencies to my project's root package.json "telerik-custom-theme": "file:./telerik-custom-theme"

4) navigated to the root of my project and ran npm install. Received the following errors:

PS D:\src\Development\angular\telerik-test-app> npm install
npm ERR! code EISDIR
npm ERR! syscall symlink
npm ERR! path D:\src\Development\angular\telerik-test-app\telerik-custom-theme
npm ERR! dest D:\src\Development\angular\telerik-test-app\node_modules\telerik-custom-theme
npm ERR! errno -4068
npm ERR! EISDIR: illegal operation on a directory, symlink 'D:\src\Development\angular\telerik-test-app\telerik-custom-theme' -> 'D:\src\Development\angular\telerik-test-app\node_modules\telerik-custom-theme'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nfisher\AppData\Local\npm-cache\_logs\2023-03-25T15_37_51_187Z-debug.log

These instructions seem simple but for some reason we are missing something can anyone help? 

[Ventsi]

Hello Nathan,

Thank you for sharing the detailed steps you have performed.

It seems that npm tries to execute an operation on a file but it received a directory instead. To further investigate this, could you please share the project your are trying to setup so we can check the directory structure and configuration? In addition, could you also share what versions of Node.js and npm you have installed on your machine? You can check them by executing these lines in the console:

node -v
npm -v

I am looking forward to hearing from you so we can resolve this and you can continue exploring Kendo UI for Angular and ThemeBuilder Pro.

Regards,
Ventsi
Progress Telerik

[Nathan]

Hi thanks for your response and willingness to help. 

Node Version: 16.19.0 

NPM Version: 8.19.3

I attached a zip of my test project without npm install being run on the app because it would have inflated the size of the attachment.

The reason I put the directory file reference as follows is because the generated readme from the theme builder specifically said to do it that way. To me it didn't look correct but I don't know what it should be.

Add the ThemeBuilder package in your application's <code>package.json</code> file:

    ```js

      "dependencies": {

        ...

        "test-custom-theme": "file:./test-custom-theme"

      },

    ```

[Ventsi]

Hi Nathan,

Thank you for sharing the project.

I have checked it and everything seems to work as expected - the installation of node modules passed successfully for both the Angular application and the ThemeBuilder Pro styles package. Could you please run the following steps again for the project you provided and confirm that this does not work on your side?

cd test-custom-theme && npm i
cd .. && npm i

As for the theme styles reference, this is the official way to install local packages to your application. The left side of "test-custom-theme": "file:./test-custom-theme" denotes the name of the package and how it could be imported in modules and the right side - the folder that contains the package.json file of the local package (test-custom-theme in this case).

As by the official npm install documentation, you can run npm install --save ./test-custom-theme in your root directory and it will install the local package and result in the same record in the root package.json file "test-custom-theme": "file:test-custom-theme"

Please run the above mentioned command in your root application directory and let me know of the result.

[Nathan]

Here are the generated readme instructions from the theme builder. There is no mention of npm install --save ./test-custom-theme in these generated instructions. I did apply this statement and now I have a local npm package so thank you for that. Then I continued to follow the directions to include the @import statements which are broken and the generated syntax seems to be incorrect. For example its not @import then import it should always be @import. Regardless it doesn't work and gives me the following errors. The first two options throw compile errors the third option is the only one that compiles but then when I add a simple kendo button

<button kendoButton themeColor="primary">Test</button>

to the html with a color of primary I don't see any styles applied. I also set the background color and do not see it applied.  FYI I a developer not a web designer so I am not as versed in this area of expertise so your patience is greatly appreciated. I was hoping my artist could just design a theme then I install it in our app and it just work after its wired up properly. I want to never have to worry about the theme again just it work so I can get on to using the kendo components and developing in angular and typescript. 

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @import '~test-custom-theme/dist/scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 2:9  root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @import '~test-custom-theme/dist/scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 2:9  root stylesheet

Failed to compile

1. Extract the zip archive.

 

 

 

 

1. Navigate to the folder named after your ThemeBuilder project, and then install the npm modules:

    ```shell

    cd Pace-Test

    npm install

    ```

1. Add the ThemeBuilder package in your application's <code>package.json</code> file:

    ```js

      "dependencies": {

        ...

        "Pace-Test": "file:./Pace-Test"

      },

    ```

    >The <code>file:./Pace-Test</code> value is the relative path to the <code>Pace-Test</code> folder. For example, if you put it next to your application folder, the value will be <code>file:../themebuilder-project-name</code>.

1. Install the ThemeBuilder package in your project:

    ```shell

    cd ..

    npm install

    ```

1. Use either of the following approaches to import the theme package styles into your application:

    - Import SASS in your <code>index.scss</code> file:

      ```js

      @import '~test-custom-theme/dist/scss';

      ```

    - Import SASS in your application root JS (e.g. <code>app.js</code>) file:

      ```js

      import 'test-custom-theme/dist/scss/index.scss';

      ```

    - Import CSS in your application root JS (e.g. <code>app.js</code>) file:

      ```js

      import 'test-custom-theme/dist/css/test-custom-theme.css';

      ```

  > Make sure the theme package styles are imported before all your application-specific styles.

  > Since generated package already contains a reference to the Kendo theme, you do not need to manually add it to your project.

[Nathan]

Basically here is what I want. 

1) One of our company artists has used themebuilder to create one light theme and one dark theme, they have selected our company colors and other colors for contrast that will make our application look good for our company. 

2) We want to buy Kendo UI for Angular and these themes be applied to our app.

3) We want to provide a light/dark theme switch so that users can pick their preference.

4) We want to set this up and then every time we use a Kendo UI Component the theme just apply without us having to think about it or do anything else past the setup because our team does not have a web designer. We know how to build angular web apps and do everything else but we aren't web designers. 

Is something like this possible? 

[Ventsi]

Hey Nathan,

I am glad that the theme package is now installed and we can proceed with the setup. I will go through all the points you have stated so please stay tuned.

Local Package Installation

The generated instructions and the npm install --save ./test-custom-theme command would produce the same result adding a record in your application package.json and installing the theme local package. We will consider updating the instructions in case the single command is easier to follow.

Theme Sass Import

The generated instructions offer several ways of importing the theme SASS file so the developer can choose the one that fits best to their application setup. The @import statement is used when the developer prefers to include the file in their main .scss file.

Angular CLI uses webpack for bundling the application. The ~ operator in the import statement -  @import '~test-custom-theme/dist/scss' is used by webpack as alias to look for the specific imported file in the node_modules folder. However, I have reviewed the Angular CLI webpack configuration and it turns out that the ~ is no longer supported in this setup. Please update the import statement to the following - @import 'test-custom-theme/dist/scss'; and the styles would be loaded.

We will review the generated theme installation & usage instructions and improve them where required.

Kendo Angular Button Demo

I have changed the demo application you have sent in one of your previous comments to demonstrate the Kendo Angular primary button with your custom theme applied. You can find it attached to this comment. I have commented the default app component content to demonstrate the button. Please review the modules in the app folder to check the setup. 

What you need to do to run it is:

1. Run npm install in the test-custom-theme directory to install theme dependencies
2. Run npm install in the root application directory to install application dependencies
3. Run npm start to run the application

Once this is done, you should see the button demo as in the screenshot I have attached.

Your Goals and Needs

The goals and needs you describe in your latest comment are quickly and easily achievable with Kendo UI for Angular and ThemeBuilder Pro. Once you have covered the specifics of the setup and theme installation everything would be applied automatically. When the artist updates the themes you would just need to update the local theme packages with the new ones and install their dependencies.

I hope you would find this information helpful. Please let me know when you run the application successfully and do not hesitate to reach out in case any further questions arise.

[Nathan]

This has been very helpful and yes it does appear that my basic proof of concept example is now working. We are certainty looking to buy theme builder pro so I think we may proceed with purchasing it either this week or next week when we buy our developer licenses. 

I do have one more final question, looking at the theme builder output page how do I know what classes to apply to my components currently I am trying to determine them by hitting inspect and loading chrome dev tools then taking the classes from there but was wondering if there is any documentation that outlines things like if you want the button that is this color then add class blah blah and blah. 

[Ventsi]

I am glad to hear the project is now running and you can proceed with exploring Kendo components and ThemeBuilder Pro.

The Kendo UI for Angular components apply the required classes based on the specific component configuration. For example, if you set themeColor="primary" on a Kendo Angular button, the k-button-solid-primary class and its corresponding theme styles would be applied. ThemeBuilder Pro takes into consideration the specific classes, based on component configuration, and generates the appropriate selectors and styles so there is no need for you to do it manually.

In case you need to further style the components in your application, the best option is to explore the component and its elements classes with the browser's developer tools. In addition, you can follow some good practices:

• Add your custom styling in your application, not in the exported ThemeBuilder Pro package. Thus, when the artist updates the ThemeBuilder theme your custom styles would be persisted.
• Use the predefined and custom variables from ThemeBuilder - each Kendo theme comes with predefined variables for colours, metrics etc. In addition, you can add more in ThemeBuilder depending on your scenario. Once the exported package is installed and referenced in your application, you can reuse these variables in your custom styles. For example, if the artist adds $custom-color variable in ThemeBuilder, you can later use it in your application styles.

You can review the ThemeBuilder Pro and Kendo themes documentation (Material theme in your specific case) to gain better knowledge how styling works and build your application styling strategy accordingly.