Fix Demos: Use public API to detect the current theme

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';
   }
 }
 

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 }) => {

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);

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 {

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}`;
 

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';
@@ -30,10 +31,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}`;
 

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,7 @@ 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 = () => {

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}`;
 

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';
   }
 });