|
| 1 | +--- |
| 2 | +title: Customizing Palette |
| 3 | +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." |
| 4 | +slug: variables_kendothemeclassic_palette |
| 5 | +position: 9 |
| 6 | +--- |
| 7 | + |
| 8 | +# Customizing Palette |
| 9 | + |
| 10 | +## Variables |
| 11 | + |
| 12 | +The following table lists the available variables for customization. |
| 13 | + |
| 14 | +<table class="theme-variables"> |
| 15 | + <colgroup> |
| 16 | + <col style="width: 200px; white-space:nowrap;" /> |
| 17 | + <col /> |
| 18 | + <col /> |
| 19 | + <col /> |
| 20 | +</colgroup> |
| 21 | +<thead> |
| 22 | + <tr> |
| 23 | + <th>Name</th> |
| 24 | + <th>Type</th> |
| 25 | + <th>Default value</th> |
| 26 | + <th>Computed value</th> |
| 27 | + </tr> |
| 28 | +</thead> |
| 29 | +<tbody> |
| 30 | + <tr> |
| 31 | + <td>$kendo-palette-ash-gray</td> |
| 32 | + <td>Map</td> |
| 33 | + <td><code>$_default-palette-ash-gray</code></td> |
| 34 | + <td><code>(white: #ffffff, 1: #fafafa, 2: #f0f0f0, 3: #ebebeb, 4: #dddddd, 5: #d6d6d6, 6: #cacaca, 7: #b6b6b6, 8: #a3a3a3, 9: #8f8f8f, 10: #7a7a7a, 11: #666666, 12: #525252, 13: #404040, 14: #333333, 15: #272727, black: #000000)</code></td> |
| 35 | +</tr> |
| 36 | +<tr> |
| 37 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Ash Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.</div></div> |
| 38 | + </td> |
| 39 | +</tr> |
| 40 | +<tr> |
| 41 | + <td>$kendo-palette-tangerine-orange</td> |
| 42 | + <td>Map</td> |
| 43 | + <td><code>$_default-palette-tangerine-orange</code></td> |
| 44 | + <td><code>(1: #fff2eb, 2: #ffe5d6, 3: #ffd8c2, 4: #ffcbad, 5: #ffbe99, 6: #ffa570, 7: #ff8b47, 8: #ff711f, 9: #f35800, 10: #e05100, 11: #cc4a00, 12: #b94300, 13: #a53c00, 14: #7a2d00, 15: #3d1600)</code></td> |
| 45 | +</tr> |
| 46 | +<tr> |
| 47 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Tangerine Orange Palette provides colors to the Primary variable group.</div></div> |
| 48 | + </td> |
| 49 | +</tr> |
| 50 | +<tr> |
| 51 | + <td>$kendo-palette-dodger-blue</td> |
| 52 | + <td>Map</td> |
| 53 | + <td><code>$_default-palette-dodger-blue</code></td> |
| 54 | + <td><code>(1: #ebf8ff, 2: #d7f2ff, 3: #b8e8fe, 4: #9cdffe, 5: #72d1fe, 6: #49c4fd, 7: #2cbbfd, 8: #0db1fd, 9: #03a9f4, 10: #039be0, 11: #038ecd, 12: #0280b9, 13: #0273a6, 14: #014c6f, 15: #01364e)</code></td> |
| 55 | +</tr> |
| 56 | +<tr> |
| 57 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Dodger Blue Palette provides colors to the Tertiary variable group.</div></div> |
| 58 | + </td> |
| 59 | +</tr> |
| 60 | +<tr> |
| 61 | + <td>$kendo-palette-grass-green</td> |
| 62 | + <td>Map</td> |
| 63 | + <td><code>$_default-palette-grass-green</code></td> |
| 64 | + <td><code>(1: #f1f8f2, 2: #e3f2e6, 3: #d8eddc, 4: #bbdfc1, 5: #9ed1a6, 6: #82c48c, 7: #6ebb7a, 8: #4db25c, 9: #3ea44e, 10: #399748, 11: #348a42, 12: #2f7d3b, 13: #2a7035, 14: #1f5126, 15: #16391b)</code></td> |
| 65 | +</tr> |
| 66 | +<tr> |
| 67 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Grass Green Palette provides colors to the Success variable group.</div></div> |
| 68 | + </td> |
| 69 | +</tr> |
| 70 | +<tr> |
| 71 | + <td>$kendo-palette-lake-blue</td> |
| 72 | + <td>Map</td> |
| 73 | + <td><code>$_default-palette-lake-blue</code></td> |
| 74 | + <td><code>(1: #eef6fb, 2: #deeef7, 3: #cce5f3, 4: #a6d1ea, 5: #8bc3e4, 6: #6ab2dc, 7: #409cd2, 8: #208ccb, 9: #007bc3, 10: #0071b3, 11: #0067a4, 12: #005d94, 13: #005485, 14: #004166, 15: #002b44)</code></td> |
| 75 | +</tr> |
| 76 | +<tr> |
| 77 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Lake Blue Palette provides colors to the Info variable group.</div></div> |
| 78 | + </td> |
| 79 | +</tr> |
| 80 | +<tr> |
| 81 | + <td>$kendo-palette-honey-yellow</td> |
| 82 | + <td>Map</td> |
| 83 | + <td><code>$_default-palette-honey-yellow</code></td> |
| 84 | + <td><code>(1: #fff7eb, 2: #ffefd6, 3: #ffe7c2, 4: #ffdead, 5: #ffd699, 6: #ffc670, 7: #ffb240, 8: #ffa41f, 9: #ff9800, 10: #eb8c00, 11: #d68000, 12: #c27400, 13: #ad6700, 14: #854f00, 15: #593500)</code></td> |
| 85 | +</tr> |
| 86 | +<tr> |
| 87 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Honey Yellow Palette provides colors to the Warning variable group.</div></div> |
| 88 | + </td> |
| 89 | +</tr> |
| 90 | +<tr> |
| 91 | + <td>$kendo-palette-brick-red</td> |
| 92 | + <td>Map</td> |
| 93 | + <td><code>$_default-palette-brick-red</code></td> |
| 94 | + <td><code>(1: #fcf0ed, 2: #f9e1dc, 3: #f7d4cc, 4: #f4c3b8, 5: #f2b4a6, 6: #ec8e79, 7: #e35e40, 8: #de4320, 9: #d92800, 10: #c82500, 11: #b62200, 12: #a51e00, 13: #941b00, 14: #701500, 15: #4c0e00)</code></td> |
| 95 | +</tr> |
| 96 | +<tr> |
| 97 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Brick Red Palette provides colors to the Error variable group.</div></div> |
| 98 | + </td> |
| 99 | +</tr> |
| 100 | +<tr> |
| 101 | + <td>$kendo-palette-coral</td> |
| 102 | + <td>Map</td> |
| 103 | + <td><code>$_default-palette-coral</code></td> |
| 104 | + <td><code>(1: #fff6f5, 2: #ffeceb, 3: #ffdedb, 4: #ffc8c4, 5: #ffb1ac, 6: #ff9d97, 7: #ff8a82, 8: #ff766d, 9: #ff6358, 10: #ea5a51, 11: #d45349, 12: #bf4a42, 13: #a33f38, 14: #80322c, 15: #5c201c)</code></td> |
| 105 | +</tr> |
| 106 | +<tr> |
| 107 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Coral Palette provides colors to the Series A variable group.</div></div> |
| 108 | + </td> |
| 109 | +</tr> |
| 110 | +<tr> |
| 111 | + <td>$kendo-palette-pineapple-yellow</td> |
| 112 | + <td>Map</td> |
| 113 | + <td><code>$_default-palette-pineapple-yellow</code></td> |
| 114 | + <td><code>(1: #fffaeb, 2: #fff7db, 3: #fff3cc, 4: #ffeeb8, 5: #ffe9a2, 6: #ffe38b, 7: #ffdd74, 8: #ffd85d, 9: #ffd246, 10: #eac040, 11: #d4af3b, 12: #bf9d35, 13: #a0832c, 14: #806923, 15: #403412)</code></td> |
| 115 | +</tr> |
| 116 | +<tr> |
| 117 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Pineapple Yellow provides colors to the Series B variable group.</div></div> |
| 118 | + </td> |
| 119 | +</tr> |
| 120 | +<tr> |
| 121 | + <td>$kendo-palette-apple-green</td> |
| 122 | + <td>Map</td> |
| 123 | + <td><code>$_default-palette-apple-green</code></td> |
| 124 | + <td><code>(1: #f3fbee, 2: #e9f8de, 3: #def4ce, 4: #d2f0bd, 5: #bbe99b, 6: #aae382, 7: #9add69, 8: #89d750, 9: #78d237, 10: #6ec032, 11: #64AF2E, 12: #5a9d29, 13: #4a8221, 14: #3c691c, 15: #1c300d)</code></td> |
| 125 | +</tr> |
| 126 | +<tr> |
| 127 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Apple Green provides colors to the Series C variable group.</div></div> |
| 128 | + </td> |
| 129 | +</tr> |
| 130 | +<tr> |
| 131 | + <td>$kendo-palette-pacific-blue</td> |
| 132 | + <td>Map</td> |
| 133 | + <td><code>$_default-palette-pacific-blue</code></td> |
| 134 | + <td><code>(1: #ebf8fa, 2: #d6f1f5, 3: #c2e9ef, 4: #aee2ea, 5: #93d9e3, 6: #75d0db, 7: #5ec7d6, 8: #43becf, 9: #28b4c8, 10: #24a6b7, 11: #2197a6, 12: #1e8796, 13: #197480, 14: #145a64, 15: #0a2e33)</code></td> |
| 135 | +</tr> |
| 136 | +<tr> |
| 137 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Pacific Blue provides colors to the Series D variable group.</div></div> |
| 138 | + </td> |
| 139 | +</tr> |
| 140 | +<tr> |
| 141 | + <td>$kendo-palette-bright-blue</td> |
| 142 | + <td>Map</td> |
| 143 | + <td><code>$_default-palette-bright-blue</code></td> |
| 144 | + <td><code>(1: #ecf2fe, 2: #d8e5fd, 3: #c5d8fc, 4: #b1cbfb, 5: #96b9fa, 6: #7ba7f9, 7: #6296f7, 8: #4684f6, 9: #2d73f5, 10: #2969e1, 11: #2660cc, 12: #2256b8, 13: #1d499a, 14: #173a7b, 15: #0c1e40)</code></td> |
| 145 | +</tr> |
| 146 | +<tr> |
| 147 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Bright Blue provides colors to the Series E variable group.</div></div> |
| 148 | + </td> |
| 149 | +</tr> |
| 150 | +<tr> |
| 151 | + <td>$kendo-palette-orchid-purple</td> |
| 152 | + <td>Map</td> |
| 153 | + <td><code>$_default-palette-orchid-purple</code></td> |
| 154 | + <td><code>(1: #f8f0fa, 2: #f1e1f5, 3: #e7caed, 4: #ddb3e5, 5: #d5a2df, 6: #c98ad6, 7: #bf74ce, 8: #b45dc6, 9: #9d40b0, 10: #9c40ae, 11: #8e3b9e, 12: #80358e, 13: #672b73, 14: #55235f, 15: #28112d)</code></td> |
| 155 | +</tr> |
| 156 | +<tr> |
| 157 | + <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The Orchid Purple provides colors to the Series F variable group.</div></div> |
| 158 | + </td> |
| 159 | +</tr> |
| 160 | +</tbody> |
| 161 | +</table> |
| 162 | + |
| 163 | +## Suggested Links |
| 164 | + |
| 165 | +* [Styling Overview]({% slug themesandstyles %}) |
| 166 | +* [Web Font Icons]({% slug icons %}) |
| 167 | +* [Preview of the Themed Components](../) |
| 168 | + |
0 commit comments