Fix swatch class location and other minor fixes (#990)

* add sass embedded to avoid ci problems in template

* Update swatch class location

Author: ajivanyandev

packages/devextreme-cli/src/templates/nextjs/application/src/theme.tsx

@@ -18,7 +18,7 @@ function toggleTheme(prevTheme<%=#isTypeScript%>: string<%=/isTypeScript%>) {
   const newTheme = getNextTheme(prevTheme);
 
   if (typeof window !== 'undefined') {
-    document.body.classList.replace(
+    document.querySelector('.app')?.classList.replace(
       themeClassNamePrefix + prevTheme,
       themeClassNamePrefix + newTheme
     );
@@ -27,8 +27,7 @@ function toggleTheme(prevTheme<%=#isTypeScript%>: string<%=/isTypeScript%>) {
     const additionalClassNamePostfix = isCurrentThemeDark ? '-' + prevTheme : '';
     const additionalClassName = `${additionalClassNamePrefix}${additionalClassNamePostfix}`
 
-    document.body
-      .querySelector(`.${additionalClassName}`)?.classList
+    document.querySelector('.app')?.querySelector(`.${additionalClassName}`)?.classList
       .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark'));
 
     currentTheme = newTheme;
@@ -45,8 +44,8 @@ export function useThemeContext() {
   }, []);
 
   useLayoutEffect(() => {
-    if (typeof window !== 'undefined' && !document.body.className.includes(themeClassNamePrefix)) {
-      document.body.classList.add(themeClassNamePrefix + theme);
+    if (typeof window !== 'undefined' && !document.querySelector('.app')?.className.includes(themeClassNamePrefix)) {
+      document.querySelector('.app')?.classList.add(themeClassNamePrefix + theme);
     }
   }, [theme]);
 

packages/devextreme-cli/src/templates/react/application/src/theme.tsx

@@ -16,7 +16,7 @@ function toggleTheme(prevTheme<%=#isTypeScript%>: string<%=/isTypeScript%>) {
   const isCurrentThemeDark = prevTheme === 'dark';
   const newTheme = getNextTheme(prevTheme);
 
-  document.body.classList.replace(
+  document.getElementById('root')?.classList.replace(
     themeClassNamePrefix + prevTheme,
     themeClassNamePrefix + newTheme
   );
@@ -25,8 +25,7 @@ function toggleTheme(prevTheme<%=#isTypeScript%>: string<%=/isTypeScript%>) {
   const additionalClassNamePostfix = isCurrentThemeDark ? '-' + prevTheme : '';
   const additionalClassName = `${additionalClassNamePrefix}${additionalClassNamePostfix}`
 
-  document.body
-    .querySelector(`.${additionalClassName}`)?.classList
+  document.getElementById('root')?.querySelector(`.${additionalClassName}`)?.classList
     .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark'));
 
   currentTheme = newTheme;
@@ -41,8 +40,8 @@ export function useThemeContext() {
     return currentTheme === 'dark';
   }, []);
 
-  if (!document.body.className.includes(themeClassNamePrefix)) {
-    document.body.classList.add(themeClassNamePrefix + theme);
+  if (!document.getElementById('root')?.className.includes(themeClassNamePrefix)) {
+    document.getElementById('root')?.classList.add(themeClassNamePrefix + theme);
   }
 
   return useMemo(()=> ({ theme, switchTheme, isDark }), [theme, switchTheme, isDark]);

packages/devextreme-cli/src/templates/vue-v3/application/src/theme-service.js

@@ -7,10 +7,10 @@ class ThemeService {
   isDark = ref(false);
 
   constructor() {
-    if (!document.body.className.includes(this.themeClassNamePrefix)) {
+    if (!document.getElementById('app').className.includes(this.themeClassNamePrefix)) {
       this.currentTheme.value = this.themes[0];
 
-      document.body.classList.add(this.themeClassNamePrefix + this.currentTheme.value);
+      document.getElementById('app').classList.add(this.themeClassNamePrefix + this.currentTheme.value);
     }
   }
 
@@ -20,7 +20,7 @@ class ThemeService {
 
     this.currentTheme.value =  this.themes[prevTheme === this.themes[0] ? 1 : 0];
 
-    document.body.classList.replace(
+    document.getElementById('app').classList.replace(
       this.themeClassNamePrefix + prevTheme,
       this.themeClassNamePrefix + this.currentTheme.value
     );
@@ -29,7 +29,7 @@ class ThemeService {
     const additionalClassNamePostfix = isCurrentThemeDark ? '-' + prevTheme : '';
     const additionalClassName = `${additionalClassNamePrefix}${additionalClassNamePostfix}`
 
-    document.body
+    document.getElementById('app')
       .querySelector(`.${additionalClassName}`)?.classList
       .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark'));
 

packages/devextreme-schematics/src/add-layout/files/src/app/shared/services/theme.service.ts

@@ -18,8 +18,8 @@ export class ThemeService {
   currentTheme: Theme = getNextTheme();
 
   constructor(@Inject(DOCUMENT) private document: Document) {
-    if (!this.document.body.className.includes(themeClassNamePrefix)) {
-      this.document.body.classList.add(themeClassNamePrefix + this.currentTheme);
+    if (!this.document.querySelector('.app')?.className.includes(themeClassNamePrefix)) {
+      this.document.querySelector('.app')?.classList.add(themeClassNamePrefix + this.currentTheme);
     }
   }
 
@@ -30,7 +30,7 @@ export class ThemeService {
     const newTheme = getNextTheme(this.currentTheme);
     const isCurrentThemeDark = currentTheme === 'dark';
 
-    this.document.body.classList.replace(
+    this.document.querySelector('.app')?.classList.replace(
       themeClassNamePrefix + currentTheme,
       themeClassNamePrefix + newTheme
     );
@@ -39,8 +39,7 @@ export class ThemeService {
     const additionalClassNamePostfix = isCurrentThemeDark ? '-' + currentTheme : '';
     const additionalClassName = `${additionalClassNamePrefix}${additionalClassNamePostfix}`
 
-    this.document.body
-      .querySelector(`.${additionalClassName}`)?.classList
+    this.document.querySelector('.app')?.querySelector(`.${additionalClassName}`)?.classList
       .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark'));
 
     this.currentTheme = newTheme;

packages/devextreme-schematics/src/install/index.ts

@@ -22,6 +22,7 @@ export default function(options: any): Rule {
 
   return chain([
     (host: Tree) => addDevExtremeDependency(host, { dxversion: options.dxversion }),
+    (host: Tree) => addSassEmbeddedDependency(host),
     (host: Tree) => addDevExtremeCSS(host, { project: options.project }),
     (host: Tree) => reqisterJSZip(host),
     (_, context: SchematicContext) => {
@@ -55,6 +56,15 @@ function addDevExtremeDependency(host: Tree, options: any) {
   return host;
 }
 
+function addSassEmbeddedDependency(host: Tree) {
+  addPackageJsonDependency(host, {
+    type: NodeDependencyType.Dev,
+    name: 'sass-embedded',
+    version: latestVersions['sass-embedded']
+  });
+  return host;
+}
+
 async function addDevExtremeCSS(host: Tree, options: any) {
   const projectName = await getProjectName(host, options.project);
   modifyJSONFile(host, './angular.json', config => {

packages/devextreme-schematics/src/utility/latest-versions.ts

@@ -2,5 +2,6 @@
 export const latestVersions = {
   'devextreme': '25.1.4',
   'devextreme-angular': '25.1.4',
-  'devextreme-cli': 'latest'
+  'devextreme-cli': 'latest',
+  'sass-embedded': '1.66.0'
 };