From 1ed48c1286224e118cb6bf8139df67fed3063efa Mon Sep 17 00:00:00 2001
From: Diana Gromova <72144169+16adianay@users.noreply.github.com>
Date: Fri, 2 Oct 2026 13:13:12 +0400
Subject: [PATCH 1/6] Fix Demos: Use public API to detect the current theme

---
 .../Angular/app/app.component.ts                          | 4 ++--
 .../DataGrid/MultipleRecordSelectionModes/React/App.tsx   | 4 ++--
 .../DataGrid/MultipleRecordSelectionModes/ReactJs/App.js  | 4 ++--
 .../DataGrid/MultipleRecordSelectionModes/Vue/App.vue     | 4 ++--
 .../Scheduler/Templates/Angular/app/app.component.ts      | 8 ++++----
 apps/demos/Demos/Scheduler/Templates/React/App.tsx        | 4 ++--
 apps/demos/Demos/Scheduler/Templates/ReactJs/App.js       | 8 ++++----
 apps/demos/Demos/Scheduler/Templates/Vue/App.vue          | 8 ++++----
 apps/demos/Demos/Scheduler/Templates/jQuery/index.js      | 2 +-
 9 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.ts b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.ts
index f422bb904307..9e9178ec71dc 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.ts
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.ts
@@ -1,7 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { DxDataGridModule, DxSelectBoxModule } from 'devextreme-angular';
-import themes, { isGeneric } from 'devextreme/ui/themes';
+import themes from 'devextreme/ui/themes';
 import { Service, Sale } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -29,7 +29,7 @@ export class AppComponent {
   constructor(service: Service) {
     this.sales = service.getSales();
     this.allMode = 'allPages';
-    this.checkBoxesMode = isGeneric(themes.current()) ? 'onClick' : 'always';
+    this.checkBoxesMode = themes.current().startsWith('generic') ? 'onClick' : 'always';
   }
 }
 
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx
index bf8d5d62cf94..84381b485c27 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx
@@ -8,7 +8,7 @@ import DataGrid, {
   Pager,
 } from 'devextreme-react/data-grid';
 import { SelectBox } from 'devextreme-react/select-box';
-import themes, { isGeneric } from 'devextreme/ui/themes';
+import themes from 'devextreme/ui/themes';
 import { sales } from './data.ts';
 
 const selectAllFieldLabel = { 'aria-label': 'Select All Mode' };
@@ -20,7 +20,7 @@ const selectAllModes = ['allPages', 'page'];
 const App = () => {
   const [allMode, setAllMode] = useState<DataGridTypes.SelectAllMode>('allPages');
   const [checkBoxesMode, setCheckBoxesMode] = useState<DataGridTypes.SelectionColumnDisplayMode>(
-    isGeneric(themes.current()) ? 'onClick' : 'always',
+    themes.current().startsWith('generic') ? 'onClick' : 'always',
   );
 
   const onCheckBoxesModeChanged = useCallback(({ value }) => {
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
index cc72e69d94da..d19f013ce2a5 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
@@ -3,7 +3,7 @@ import DataGrid, {
   Column, Selection, FilterRow, Paging, Pager,
 } from 'devextreme-react/data-grid';
 import { SelectBox } from 'devextreme-react/select-box';
-import themes, { isGeneric } from 'devextreme/ui/themes';
+import themes from 'devextreme/ui/themes';
 import { sales } from './data.js';
 
 const selectAllFieldLabel = { 'aria-label': 'Select All Mode' };
@@ -13,7 +13,7 @@ const selectAllModes = ['allPages', 'page'];
 const App = () => {
   const [allMode, setAllMode] = useState('allPages');
   const [checkBoxesMode, setCheckBoxesMode] = useState(
-    isGeneric(themes.current()) ? 'onClick' : 'always',
+    themes.current().startsWith('generic') ? 'onClick' : 'always',
   );
   const onCheckBoxesModeChanged = useCallback(({ value }) => {
     setCheckBoxesMode(value);
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue
index bacad8a5db85..00ce12ae728f 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue
@@ -72,13 +72,13 @@ import {
   DxPager,
   type DxDataGridTypes,
 } from 'devextreme-vue/data-grid';
-import themes, { isGeneric } from 'devextreme/ui/themes';
+import themes from 'devextreme/ui/themes';
 import { sales } from './data.ts';
 
 const selectAllModes: DxDataGridTypes.SelectAllMode[] = ['allPages', 'page'];
 const showCheckBoxesModes: DxDataGridTypes.SelectionColumnDisplayMode[] = ['none', 'onClick', 'onLongTap', 'always'];
 const allMode = ref(selectAllModes[0]);
-const checkBoxesMode = ref<DxDataGridTypes.SelectionColumnDisplayMode>(isGeneric(themes.current()) ? 'onClick' : 'always');
+const checkBoxesMode = ref<DxDataGridTypes.SelectionColumnDisplayMode>(themes.current().startsWith('generic') ? 'onClick' : 'always');
 </script>
 <style>
 .options {
diff --git a/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts b/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts
index 8acdc84042cd..36f6a2b57a5b 100644
--- a/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts
@@ -11,6 +11,7 @@ import {
 import { bootstrapApplication } from '@angular/platform-browser';
 import { formatDate } from 'devextreme-angular/common/core/localization';
 import { query } from 'devextreme-angular/common/data';
+import themes from 'devextreme/ui/themes';
 import { DxSchedulerModule, DxSchedulerComponent } from 'devextreme-angular/ui/scheduler';
 import { DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import { DxFormTypes } from 'devextreme-angular/ui/form';
@@ -92,10 +93,9 @@ export class AppComponent {
     ? query(this.moviesData).filter(['id', '=', id]).toArray()[0] ?? null
     : null;
 
-  getEditorStylingMode = (): 'filled' | 'outlined' => {
-    const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material');
-    return isMaterialOrFluent ? 'filled' : 'outlined';
-  };
+  getEditorStylingMode = (): 'filled' | 'outlined' => (
+    themes.current().startsWith('generic') ? 'outlined' : 'filled'
+  );
 
   priceDisplayExpr = (value: number): string => `$${value}`;
 
diff --git a/apps/demos/Demos/Scheduler/Templates/React/App.tsx b/apps/demos/Demos/Scheduler/Templates/React/App.tsx
index ee868d85ed1e..5b7a970fa6df 100644
--- a/apps/demos/Demos/Scheduler/Templates/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/Templates/React/App.tsx
@@ -7,6 +7,7 @@ import Scheduler, {
   Label,
 } from 'devextreme-react/scheduler';
 import { query } from 'devextreme-react/common/data';
+import themes from 'devextreme/ui/themes';
 import type { SchedulerTypes } from 'devextreme-react/scheduler';
 import type { SelectBoxTypes } from 'devextreme-react/select-box';
 import type { FormTypes } from 'devextreme-react/form';
@@ -31,8 +32,7 @@ const getMovieById = (id: number | undefined): MovieResource | null => id
   : null;
 
 const getEditorStylingMode = (): 'filled' | 'outlined' => {
-  const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material');
-  return isMaterialOrFluent ? 'filled' : 'outlined';
+  return themes.current().startsWith('generic') ? 'outlined' : 'filled';
 };
 
 const priceDisplayExpr = (value: number): string => `$${value}`;
diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js
index dc51a6b3ed60..2156d0985b32 100644
--- a/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js
@@ -7,6 +7,7 @@ import Scheduler, {
   Label,
 } from 'devextreme-react/scheduler';
 import { query } from 'devextreme-react/common/data';
+import themes from 'devextreme/ui/themes';
 import Appointment from './Appointment.js';
 import AppointmentTooltip from './AppointmentTooltip.js';
 import MovieInfoContainer from './MovieInfoContainer.js';
@@ -17,10 +18,9 @@ const views = ['day', 'week', 'timelineDay'];
 const groups = ['theatreId'];
 const getMovieById = (id) =>
   id ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null : null;
-const getEditorStylingMode = () => {
-  const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material');
-  return isMaterialOrFluent ? 'filled' : 'outlined';
-};
+const getEditorStylingMode = () => (
+  themes.current().startsWith('generic') ? 'outlined' : 'filled'
+);
 const priceDisplayExpr = (value) => `$${value}`;
 const colCountByScreen = { xs: 2 };
 const App = () => {
diff --git a/apps/demos/Demos/Scheduler/Templates/Vue/App.vue b/apps/demos/Demos/Scheduler/Templates/Vue/App.vue
index 403899953246..ab094646ce39 100644
--- a/apps/demos/Demos/Scheduler/Templates/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Templates/Vue/App.vue
@@ -105,6 +105,7 @@ import type { DxFormTypes } from 'devextreme-vue/form';
 import type { DxSelectBoxTypes } from 'devextreme-vue/select-box';
 import type { DxPopupTypes } from 'devextreme-vue/popup';
 import { query } from 'devextreme-vue/common/data';
+import themes from 'devextreme/ui/themes';
 import type { MovieResource } from './data.ts';
 import AppointmentTemplate from './AppointmentTemplate.vue';
 import AppointmentTooltipTemplate from './AppointmentTooltipTemplate.vue';
@@ -130,10 +131,9 @@ const getMovieById = (id: number | undefined): MovieResource | null => id
   ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null
   : null;
 
-const getEditorStylingMode = (): 'filled' | 'outlined' => {
-  const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material');
-  return isMaterialOrFluent ? 'filled' : 'outlined';
-};
+const getEditorStylingMode = (): 'filled' | 'outlined' => (
+  themes.current().startsWith('generic') ? 'outlined' : 'filled'
+);
 
 const priceDisplayExpr = (value: number): string => `$${value}`;
 
diff --git a/apps/demos/Demos/Scheduler/Templates/jQuery/index.js b/apps/demos/Demos/Scheduler/Templates/jQuery/index.js
index 71dd9225621c..82424db7293b 100644
--- a/apps/demos/Demos/Scheduler/Templates/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/Templates/jQuery/index.js
@@ -171,6 +171,6 @@ $(() => {
   }
 
   function getEditorStylingMode() {
-    return $('.dx-theme-fluent, .dx-theme-material').length > 0 ? 'filled' : 'outlined';
+    return DevExpress.ui.themes.current().startsWith('generic') ? 'outlined' : 'filled';
   }
 });

From b3ef1cce12ff132e79b687a7f95c8aeb8c7409c6 Mon Sep 17 00:00:00 2001
From: Diana Gromova <72144169+16adianay@users.noreply.github.com>
Date: Fri, 2 Oct 2026 13:59:30 +0400
Subject: [PATCH 2/6] Update App.tsx

---
 apps/demos/Demos/Scheduler/Templates/React/App.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/Templates/React/App.tsx b/apps/demos/Demos/Scheduler/Templates/React/App.tsx
index 5b7a970fa6df..ab6c6bd83d1c 100644
--- a/apps/demos/Demos/Scheduler/Templates/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/Templates/React/App.tsx
@@ -31,9 +31,9 @@ const getMovieById = (id: number | undefined): MovieResource | null => id
   ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null
   : null;
 
-const getEditorStylingMode = (): 'filled' | 'outlined' => {
-  return themes.current().startsWith('generic') ? 'outlined' : 'filled';
-};
+const getEditorStylingMode = (): 'filled' | 'outlined' => (
+  themes.current().startsWith('generic') ? 'outlined' : 'filled'
+);
 
 const priceDisplayExpr = (value: number): string => `$${value}`;
 

From 7b7764631f4634bc057194610c9f9484554a3248 Mon Sep 17 00:00:00 2001
From: Diana Gromova <72144169+16adianay@users.noreply.github.com>
Date: Fri, 2 Oct 2026 14:26:32 +0400
Subject: [PATCH 3/6] Update App.js

---
 apps/demos/Demos/Scheduler/Templates/ReactJs/App.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js
index 2156d0985b32..c201b6f0f67d 100644
--- a/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js
@@ -18,9 +18,7 @@ const views = ['day', 'week', 'timelineDay'];
 const groups = ['theatreId'];
 const getMovieById = (id) =>
   id ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null : null;
-const getEditorStylingMode = () => (
-  themes.current().startsWith('generic') ? 'outlined' : 'filled'
-);
+const getEditorStylingMode = () => (themes.current().startsWith('generic') ? 'outlined' : 'filled');
 const priceDisplayExpr = (value) => `$${value}`;
 const colCountByScreen = { xs: 2 };
 const App = () => {

From 7ac960f37d3eec9ebd8ca750a6419ab74249c2e1 Mon Sep 17 00:00:00 2001
From: Diana Gromova <72144169+16adianay@users.noreply.github.com>
Date: Fri, 2 Oct 2026 17:27:43 +0400
Subject: [PATCH 4/6] Add lazy initialization to React

---
 .../Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx   | 2 +-
 .../Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx
index 84381b485c27..39edd80dc816 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx
@@ -20,7 +20,7 @@ const selectAllModes = ['allPages', 'page'];
 const App = () => {
   const [allMode, setAllMode] = useState<DataGridTypes.SelectAllMode>('allPages');
   const [checkBoxesMode, setCheckBoxesMode] = useState<DataGridTypes.SelectionColumnDisplayMode>(
-    themes.current().startsWith('generic') ? 'onClick' : 'always',
+    () => themes.current().startsWith('generic') ? 'onClick' : 'always',
   );
 
   const onCheckBoxesModeChanged = useCallback(({ value }) => {
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
index d19f013ce2a5..b9a1e9a8be98 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
@@ -13,7 +13,7 @@ const selectAllModes = ['allPages', 'page'];
 const App = () => {
   const [allMode, setAllMode] = useState('allPages');
   const [checkBoxesMode, setCheckBoxesMode] = useState(
-    themes.current().startsWith('generic') ? 'onClick' : 'always',
+    () => themes.current().startsWith('generic') ? 'onClick' : 'always',
   );
   const onCheckBoxesModeChanged = useCallback(({ value }) => {
     setCheckBoxesMode(value);

From 9ca3bcaa095ff50aecd300e4428bea1f86c86750 Mon Sep 17 00:00:00 2001
From: Diana Gromova <72144169+16adianay@users.noreply.github.com>
Date: Fri, 2 Oct 2026 17:48:05 +0400
Subject: [PATCH 5/6] Update App.js

---
 .../DataGrid/MultipleRecordSelectionModes/ReactJs/App.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
index b9a1e9a8be98..ddcae1201fbb 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
@@ -12,8 +12,8 @@ const showCheckBoxesModes = ['none', 'onClick', 'onLongTap', 'always'];
 const selectAllModes = ['allPages', 'page'];
 const App = () => {
   const [allMode, setAllMode] = useState('allPages');
-  const [checkBoxesMode, setCheckBoxesMode] = useState(
-    () => themes.current().startsWith('generic') ? 'onClick' : 'always',
+  const [checkBoxesMode, setCheckBoxesMode] = useState(() => 
+    themes.current().startsWith('generic') ? 'onClick' : 'always',
   );
   const onCheckBoxesModeChanged = useCallback(({ value }) => {
     setCheckBoxesMode(value);

From 5127c3489320706269e577c5c98cf4760798365d Mon Sep 17 00:00:00 2001
From: Diana Gromova <72144169+16adianay@users.noreply.github.com>
Date: Fri, 2 Oct 2026 18:10:26 +0400
Subject: [PATCH 6/6] Update App.js

---
 .../Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
index ddcae1201fbb..549a5fda1357 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
@@ -12,7 +12,7 @@ const showCheckBoxesModes = ['none', 'onClick', 'onLongTap', 'always'];
 const selectAllModes = ['allPages', 'page'];
 const App = () => {
   const [allMode, setAllMode] = useState('allPages');
-  const [checkBoxesMode, setCheckBoxesMode] = useState(() => 
+  const [checkBoxesMode, setCheckBoxesMode] = useState(() =>
     themes.current().startsWith('generic') ? 'onClick' : 'always',
   );
   const onCheckBoxesModeChanged = useCallback(({ value }) => {