You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/styling/customizing.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,7 +35,7 @@ For a visual preview of the theme, use the [ThemeBuilder application](slug:theme
35
35
With this setup, you can customize theme variables directly in your application. For example, you can change the default primary color from orange to pink with the following lines:
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
72
72
1. Install the [node-gyp](https://github.com/nodejs/node-gyp#installation).
73
-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
73
+
1. Install the dependencies for all themes with `npm run setup`.
74
74
1. Switch the working directory to `packages/<THEME_NAME>`.
75
75
1. Create a `SWATCH_NAME.scss` swatch file in the `scss/swatches` folder.
76
76
1. To build the swatches for the theme, type `npm run sass:swatches` or `npm run dart:swatches`.
@@ -94,8 +94,8 @@ $theme-type: dark;
94
94
For the Default and Bootstrap themes, the swatch should look like:
95
95
```scss
96
96
// Variables.
97
-
$primary: blue;
98
-
$secondary: pink;
97
+
$kendo-color-primary: blue;
98
+
$kendo-color-secondary: pink;
99
99
100
100
// Import the theme file for the components you use.
101
101
@import"../panelbar/_index.scss";
@@ -110,7 +110,7 @@ $secondary: pink;
110
110
To create a custom theme by modifying the themes source code:
111
111
112
112
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
113
-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
113
+
1. Install the dependencies for all themes with `npm run setup`.
114
114
1. Customize the theme variables in the `packages/THEME_NAME/scss/_variables.scss` files.
115
115
1. Build the themes with the `npm run sass` or `npm run dart` command to create the customized version of the themes in the `packages/THEME_NAME/dist/all.css` file.
116
116
1. After the build completes, use the [compiled CSS](slug:themesandstyles#toc-using-precompiled-css).
@@ -120,7 +120,7 @@ To create a custom theme by modifying the themes source code:
120
120
You might want to omit the styles for some components in the CSS output. To include only the styles that you need:
121
121
122
122
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
123
-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
123
+
1. Install the dependencies for all themes with `npm run setup`.
124
124
1. Switch the working directory to `packages/<THEME_NAME>`.
125
125
1. Create a `CUSTOM_THEME.scss` file in the `scss` folder. For example, create `custom.scss` file with the following lines:
Copy file name to clipboardExpand all lines: docs/styling/index.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -76,7 +76,7 @@ For a visual preview of the theme for all components and versatile color swatche
76
76
With this setup, you can customize theme variables directly in your application. For example, you can change the default primary color from orange to pink with the following lines:
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
111
111
1. Install the [node-gyp](https://github.com/nodejs/node-gyp#installation).
112
-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
112
+
1. Install the dependencies for all themes with `npm run setup`.
113
113
1. Switch the working directory to `packages/<THEME_NAME>`.
114
114
1. Create a `SWATCH_NAME.scss` swatch file in the `scss/swatches` folder.
115
115
1. To build the swatches for the theme by running `npm run sass:swatches` or `npm run dart:swatches`.
@@ -133,8 +133,8 @@ $theme-type: dark;
133
133
For the rest of the themes, the swatch should look like:
134
134
```scss
135
135
// Variables.
136
-
$primary: blue;
137
-
$secondary: pink;
136
+
$kendo-color-primary: blue;
137
+
$kendo-color-secondary: pink;
138
138
139
139
// Import the theme file for the components you use.
140
140
@import "../grid/_index.scss";
@@ -148,7 +148,7 @@ $secondary: pink;
148
148
To create a custom theme by modifying the themes source code:
149
149
150
150
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
151
-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
151
+
1. Install the dependencies for all themes with `npm run setup`.
152
152
1. Customize the theme variables in the `packages/THEME_NAME/scss/_variables.scss` files.
153
153
1. Build the themes with the `npm run sass` or `npm run dart`command to create the customized version of the themes in the `packages/THEME_NAME/dist/all.css` file.
154
154
1. After the build completes, use the [compiled CSS](#toc-using-precompiled-css).
@@ -158,7 +158,7 @@ To create a custom theme by modifying the themes source code:
158
158
You might want to omit the styles forsome componentsin the CSS output. To include only the styles that you need:
159
159
160
160
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
161
-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
161
+
1. Install the dependencies for all themes with `npm run setup`.
162
162
1. Switch the working directory to `packages/<THEME_NAME>`.
163
163
1. Create a `CUSTOM_THEME.scss` file in the `scss` folder. For example, create `custom.scss` file with the following lines:
0 commit comments