Skip to content

Commit 5d8c911

Browse files
ntachevadimodi
ntacheva
and
dimodi
authored
Theme Swatches docs (#532)
* docs(swatches): article for the swatches of the buil-in themes * Update styling-and-themes/theme-swatches.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update styling-and-themes/theme-swatches.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update styling-and-themes/theme-swatches.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update styling-and-themes/theme-swatches.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update styling-and-themes/theme-swatches.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(themes):swatches article improvements Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent d2c0ae7 commit 5d8c911

File tree

2 files changed

+90
-0
lines changed

2 files changed

+90
-0
lines changed

‎installation/zip.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ The `ZIP` archive provides the following:
1919
* The [necessary `.nupkg` files]({%slug getting-started/what-you-need%}) so you can setup a [local feed in Visual Studio](#set-up-a-local-nuget-feed-in-visual-studio). You can find them in the `packages` folder in the archive.
2020
* An offline version of our [demos](https://demos.telerik.com/blazor-ui) that you can run and inspect in your IDE. You can find them in the `demos` folder in the archive.
2121
* The [document processing]({%slug common-features-dpl%}) `.nupkg` files (in the `dpl` folder).
22+
* The [built-in themes]({%slug general-information/themes%}) and some of their most commonly used [swatches]({%slug themes-swatches%}). You can find them in the `styles` folder in the archive.
2223

2324

2425
## How to Download the ZIP Archive

‎styling-and-themes/theme-swatches.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: Theme Swatches
3+
page_title: Theme Swatches
4+
description: The UI for Blazor suite comes with a set of built-in themes and themes swatches that you can choose from.
5+
slug: themes-swatches
6+
tags: telerik,blazor,theme,swatch
7+
published: True
8+
position: 1
9+
---
10+
11+
# Theme Swatches
12+
13+
Telerik UI for Blazor comes with three [built-in (base) themes]({%slug general-information/themes%}). Each of them provides a set of color swatches that you can choose from to match your application appearance and styling.
14+
15+
#### In this article:
16+
* [Basics](#basics)
17+
* [Buit-in themes and swatches list](#buit-in-themes-and-swatches-list)
18+
19+
20+
## Basics
21+
22+
The theme swatches are different color variations of the base themes. While they use the same variables as the built-in theme they accompany, they have different color values to deliver a variety of shades for the Telerik components. Any of the base themes and their swatches can be easily customized as desired - read more about that in the [Custom Themes article]({%slug themes-custom%}).
23+
24+
You can find the built-in themes and their swatches in the following resources:
25+
26+
* [Sass Themebuilder](https://themebuilder.telerik.com/blazor-ui) - it is a web application that enables you to [create new or customize existing themes]({%slug themes-custom%}). You can use it to explore how certain theme/swatch will affect the appearance of the Telerik UI for Blazor components.
27+
28+
* [kendo-themes repository](https://github.com/telerik/kendo-themes) - the repository for all themes and swatches that are used across Telerik and Kendo web components.
29+
30+
* ZIP archive for Telerik UI for Blazor - the `styles` folder contains the base themes and a some of their most commonly used swatches. The [ZIP Archive]({%slug installation/zip%}) article provides more details on how to get the archive.
31+
32+
33+
## Buit-in themes and swatches list
34+
35+
Here is a complete list of the base themes, all available swatches and their CDN URLs.
36+
37+
* [Default](#default) - These are the mostly ported swatches from our [Sass Themebuilder](https://themebuilder.telerik.com/blazor-ui). Main swatch is the current "Default" theme.
38+
39+
* [Bootstrap](#bootstrap) - Main swatch is the current "[Bootstrap]({%slug general-information/themes%}#bootstrap-notes)" theme, which is built on Bootstrap 5. As the other names suggest, Bootstrap 3 and Bootstrap 4 swatches are color swatches adapted to look like the respective versions.
40+
41+
* [Material](#material) - Based on Material Design. Main is our "[Material]({%slug general-information/themes%}#material-notes)" theme, which itself is built around the initial theme of <a href = "https://material.angular.io/" target = "_blank">material.angular.io</a>.
42+
43+
>important Make sure that the theme version in the CDN URL is compatible with the UI for Blazor version. Our [release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history) provide information about the correct theme version for each UI for Blazor version.
44+
45+
46+
### Default
47+
48+
* Default Main - https://cdn.kendostatic.com/themes/4.41.2/default/default-main.css
49+
* Default Main Dark - https://cdn.kendostatic.com/themes/4.41.2/default/default-main-dark.css
50+
* Default Blue - https://cdn.kendostatic.com/themes/4.41.2/default/default-blue.css
51+
* Default Green - https://cdn.kendostatic.com/themes/4.41.2/default/default-green.css
52+
* Default Nordic - https://cdn.kendostatic.com/themes/4.41.2/default/default-nordic.css
53+
* Default Orange - https://cdn.kendostatic.com/themes/4.41.2/default/default-orange.css
54+
* Default Purple - https://cdn.kendostatic.com/themes/4.41.2/default/default-purple.css
55+
* Default Turquoise - https://cdn.kendostatic.com/themes/4.41.2/default/default-turquoise.css
56+
* Default Urban - https://cdn.kendostatic.com/themes/4.41.2/default/default-urban.css
57+
58+
59+
### Bootstrap
60+
61+
* Bootstrap Main - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-main.css
62+
* Bootstrap Main Dark - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-main-dark.css
63+
* Bootstrap 3 - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-3.css
64+
* Bootstrap 3 Dark - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-3-dark.css
65+
* Bootstrap 4 - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-4.css
66+
* Bootstrap 4 Dark - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-4-dark.css
67+
* Bootstrap Nordic - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-nordic.css
68+
* Bootstrap Turquoise - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-turquoise.css
69+
* Bootstrap Turquoise Dark - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-turquoise-dark.css
70+
* Bootstrap Urban - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-urban.css
71+
* Bootstrap Vintage - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-vintage.css
72+
73+
74+
### Material
75+
76+
* Material Main - https://cdn.kendostatic.com/themes/4.41.2/material/material-main.css
77+
* Material Main Dark - https://cdn.kendostatic.com/themes/4.41.2/material/material-main-dark.css
78+
* Material Aqua Dark - https://cdn.kendostatic.com/themes/4.41.2/material/material-aqua-dark.css
79+
* Material Arctic - https://cdn.kendostatic.com/themes/4.41.2/material/material-arctic.css
80+
* Material Burnt Teal - https://cdn.kendostatic.com/themes/4.41.2/material/material-burnt-teal.css
81+
* Material Eggplant - https://cdn.kendostatic.com/themes/4.41.2/material/material-eggplant.css
82+
* Material Lime - https://cdn.kendostatic.com/themes/4.41.2/material/material-lime.css
83+
* Material Lime Dark - https://cdn.kendostatic.com/themes/4.41.2/material/material-lime-dark.css
84+
* Material Nova - https://cdn.kendostatic.com/themes/4.41.2/material/material-nova.css
85+
* Material Pacific - https://cdn.kendostatic.com/themes/4.41.2/material/material-pacific.css
86+
* Material Pacific Dark - https://cdn.kendostatic.com/themes/4.41.2/material/material-pacific-dark.css
87+
* Material Sky - https://cdn.kendostatic.com/themes/4.41.2/material/material-sky.css
88+
* Material Sky Dark - https://cdn.kendostatic.com/themes/4.41.2/material/material-sky-dark.css
89+
* Material Smoke - https://cdn.kendostatic.com/themes/4.41.2/material/material-smoke.css

0 commit comments

Comments
 (0)