Merge pull request #179 from DevExpress/22.2-material-theme

update themes

Author: pollyndos

dashboard-for-web/articles/web-dashboard-designer-mode/appearance-customization/themes.md

@@ -1,24 +1,36 @@
 ---
-title: Providing Data
+title: Themes
 author: Natalia Kazakova
 ---
 # Themes
 
-The Web Dashboard control supports the following themes (and their compact counterparts): 
+The Web Dashboard control supports the *Generic*, *Generic Compact*, and *Material Design Compact* [DevExtreme themes](https://js.devexpress.com/DevExtreme/Guide/Themes_and_Styles/Predefined_Themes).
+
+
+## Generic and Generic Compact Themes 
 
 | Theme  | Image |
 |---|---|
-|Light | ![Light Theme](../../../images/lighttheme24998.png) |
-|Dark | ![Dark Theme](../../../images/darktheme24999.png) |
+|Light | ![Light Theme](../../../images/light-theme.png) |
+|Dark | ![Dark Theme](../../../images/dark-theme.png) |
 |Carmine | ![Carmine Theme](../../../images/carmine-theme.png) |
 |Soft Blue | ![Soft Blue Theme](../../../images/soft-blue-theme.png) |
 |Green Mist | ![Green Mist Theme](../../../images/green-mist-theme.png) |
 |Dark Moon | ![Dark Moon Theme](../../../images/dark-moon-theme.png) |
 |Dark Violet | ![Dark Violet Theme](../../../images/dark-violet-theme.png) |
 
-> [!Note]
-> A compact theme allows you to fit more elements within a web page. Note that compact themes affect only specific dashboard items such as:
->
-> * [Grid](../../web-dashboard-viewer-mode/dashboard-items/grid.md)
-> * [Pivot](../../web-dashboard-viewer-mode\dashboard-items\pivot.md)
-> * [Filter Elements](../../\web-dashboard-viewer-mode\dashboard-items\filter-elements.md)
+
+## Material Design Themes
+
+| Theme  | Image |
+|---|---|
+|Blue Light |![Material Blue Light Compact](../../../images/material-blue-light-compact.png)|
+|Lime Light |![Material Lime Light Compact](../../../images/material-lime-light-compact.png)|
+|Orange Light |![Material Orange Light Compact](../../../images/material-orange-light-compact.png)|
+|Purple Light |![Material Purple Light Compact](../../../images/material-purple-light-compact.png)|
+|Teal Light |![Material Teal Light Compact](../../../images/material-teal-light-compact.png)|
+|Blue Dark |![Material Blue Dark Compact](../../../images/material-blue-dark-compact.png)|
+|Lime Dark |![Material Lime Dark Compact](../../../images/material-lime-dark-compact.png)|
+|Orange Dark |![Material Orange Dark Compact](../../../images/material-orange-dark-compact.png)|
+|Purple Dark |![Material Purple Dark Compact](../../../images/material-purple-dark-compact.png)|
+|Teal Dark|![Material Teal Dark Compact](../../../images/material-teal-dark-compact.png)|