From 25ed779d0d181ea4293555ecc57ca78910ee7f11 Mon Sep 17 00:00:00 2001
From: Arman Boyakhchyan <arman.boyakhchyan@devexpress.com>
Date: Wed, 7 Jan 2026 10:07:10 +0400
Subject: [PATCH] Update Components List Styles (#8254)

---
 applications/ComponentList/index.css          | 21 +++++++++++++++++++
 applications/ComponentList/index.js           |  1 +
 .../00 DevExtreme Angular Components.md       |  2 +-
 .../00 DevExtreme React Components.md         |  2 +-
 .../00 DevExtreme Vue Components.md           |  2 +-
 .../00 DevExtreme jQuery Components.md        |  2 +-
 6 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 applications/ComponentList/index.js

diff --git a/applications/ComponentList/index.css b/applications/ComponentList/index.css
index 63df48a4e3..9bff7048a0 100644
--- a/applications/ComponentList/index.css
+++ b/applications/ComponentList/index.css
@@ -1,3 +1,24 @@
+body {
+  background-color: light-dark(#ffffff, #2a2a2a) !important;
+  font-family: 'Roboto', sans-serif;
+}
+
+body.jQuery a {
+  color: #0E8BC1;
+}
+
+body.Angular a {
+  color: light-dark(#2190F7, #158BFF);
+}
+
+body.Vue a {
+  color: #42B883;
+}
+
+body.React a {
+  color: #09B5E1;
+}
+
 .components .components-title,
 .components .components-subtitle {
   margin: 0;
diff --git a/applications/ComponentList/index.js b/applications/ComponentList/index.js
new file mode 100644
index 0000000000..cf3c3d8b5a
--- /dev/null
+++ b/applications/ComponentList/index.js
@@ -0,0 +1 @@
+document.body.classList.add(localStorage.getItem('dx-devextreme-site-framework'));
diff --git a/concepts/40 Angular Components/00 DevExtreme Angular Components.md b/concepts/40 Angular Components/00 DevExtreme Angular Components.md
index 6185b29d65..5c53e6bbb7 100644
--- a/concepts/40 Angular Components/00 DevExtreme Angular Components.md	
+++ b/concepts/40 Angular Components/00 DevExtreme Angular Components.md	
@@ -2,7 +2,7 @@ The DevExtreme Angular UI Component Suite offers 80+ responsive, touch-enabled U
 
 ## Explore All 80+ Angular Components
 
-<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css" style="border-radius: 16px"></div>
+<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css, /Content/Applications/26_1/ComponentList/index.js" style="border-radius: 16px; border: none !important;"></div>
 
 ## Try DevExtreme Components in Your Project
 
diff --git a/concepts/50 React Components/00 DevExtreme React Components.md b/concepts/50 React Components/00 DevExtreme React Components.md
index 38df1c6b3d..066d8ce8a0 100644
--- a/concepts/50 React Components/00 DevExtreme React Components.md	
+++ b/concepts/50 React Components/00 DevExtreme React Components.md	
@@ -2,7 +2,7 @@ The DevExtreme React UI Component Suite offers 80+ responsive, touch-enabled UI
 
 ## Explore All 80+ React Components
 
-<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css" style="border-radius: 16px"></div>
+<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css, /Content/Applications/26_1/ComponentList/index.js" style="border-radius: 16px; border: none !important;"></div>
 
 ## Try DevExtreme Components in Your Project
 
diff --git a/concepts/55 Vue Components/00 DevExtreme Vue Components.md b/concepts/55 Vue Components/00 DevExtreme Vue Components.md
index 9258f61792..b431bd102d 100644
--- a/concepts/55 Vue Components/00 DevExtreme Vue Components.md	
+++ b/concepts/55 Vue Components/00 DevExtreme Vue Components.md	
@@ -2,7 +2,7 @@ The DevExtreme Vue UI Component Suite offers 80+ responsive, touch-enabled UI co
 
 ## Explore All 80+ Vue Components
 
-<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css" style="border-radius: 16px"></div>
+<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css, /Content/Applications/26_1/ComponentList/index.js" style="border-radius: 16px; border: none !important;"></div>
 
 ## Try DevExtreme Components in Your Project
 
diff --git a/concepts/58 jQuery Components/00 DevExtreme jQuery Components.md b/concepts/58 jQuery Components/00 DevExtreme jQuery Components.md
index 791f4e6768..6fc8d913a2 100644
--- a/concepts/58 jQuery Components/00 DevExtreme jQuery Components.md	
+++ b/concepts/58 jQuery Components/00 DevExtreme jQuery Components.md	
@@ -2,7 +2,7 @@ The DevExtreme jQuery UI Component Suite offers 80+ responsive, touch-enabled UI
 
 ## Explore All 80+ jQuery Components
 
-<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css" style="border-radius: 16px"></div>
+<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css, /Content/Applications/26_1/ComponentList/index.js" style="border-radius: 16px; border: none !important;"></div>
 
 ## Try DevExtreme Components in Your Project