Angular:

add fluent as default theme
add theme switching

Author: GoodDayForSurf

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

@@ -13,7 +13,7 @@ export const ThemeSwitcher = () => {
     <Button
       className='theme-button'
       stylingMode='text'
-      icon={`${themeContext?.theme !== 'dark' ? 'sun' : 'moon'}`}
+      icon={`${themeContext?.theme === 'dark' ? 'sun' : 'moon'}`}
       onClick={onButtonClick} />
   </div>;
 };

packages/devextreme-cli/src/templates/vue-v3/application/src/dx-styles.scss

@@ -68,7 +68,7 @@ $side-panel-min-width: 60px;
 }
 
 .dx-theme-fluent {
-  .dx-drawer-panel-content {
+  .dx-drawer-panel-content  .dx-overlay-content {
     box-shadow: 0 4px 4px 0 var(--shadow-color-first), 0 1px 2px 0 var(--shadow-color-second);
   }
 }

packages/devextreme-schematics/src/add-app-template/schema.json

@@ -39,7 +39,7 @@
     "dxversion": {
       "type": "string",
       "description": "The DevExtreme version",
-      "default": "24.1.4"
+      "default": "~24.1.7"
     },
     "globalNgCliVersion": {
       "type":"string",

packages/devextreme-schematics/src/add-layout/files/devextreme.json

@@ -8,26 +8,55 @@
           "inputFile": "<%= sourcePath %>/themes/metadata.base.json",
           "outputFile": "<%= sourcePath %>/themes/generated/theme.base.css"
         }
-      },      {
+      },
+      {
+        "command": "build-theme",
+        "options": {
+          "inputFile": "<%= sourcePath %>/themes/metadata.base.dark.json",
+          "outputFile": "<%= sourcePath %>/themes/generated/theme.base.dark.css"
+        }
+      },
+      {
         "command": "build-theme",
         "options": {
           "inputFile": "<%= sourcePath %>/themes/metadata.additional.json",
           "outputFile": "<%= sourcePath %>/themes/generated/theme.additional.css"
         }
       },
+      {
+        "command": "build-theme",
+        "options": {
+          "inputFile": "<%= sourcePath %>/themes/metadata.additional.dark.json",
+          "outputFile": "<%= sourcePath %>/themes/generated/theme.additional.dark.css"
+        }
+      },
       {
         "command": "export-theme-vars",
         "options": {
           "inputFile": "<%= sourcePath %>/themes/metadata.base.json",
           "outputFile": "<%= sourcePath %>/themes/generated/variables.base.scss"
         }
       },
+      {
+        "command": "export-theme-vars",
+        "options": {
+          "inputFile": "<%= sourcePath %>/themes/metadata.base.dark.json",
+          "outputFile": "<%= sourcePath %>/themes/generated/variables.base.dark.scss"
+        }
+      },
       {
         "command": "export-theme-vars",
         "options": {
           "inputFile": "<%= sourcePath %>/themes/metadata.additional.json",
           "outputFile": "<%= sourcePath %>/themes/generated/variables.additional.scss"
         }
+      },
+      {
+        "command": "export-theme-vars",
+        "options": {
+          "inputFile": "<%= sourcePath %>/themes/metadata.additional.dark.json",
+          "outputFile": "<%= sourcePath %>/themes/generated/variables.additional.dark.scss"
+        }
       }
     ]
   }

packages/devextreme-schematics/src/add-layout/files/src/app/__name__.component.scss

@@ -1,6 +1,5 @@
 :host {
-  @import "../themes/generated/variables.base.scss";
-  background-color: darken($base-bg, 5);
+  background-color: var(--base-bg-darken-5);
   display: flex;
   height: 100%;
   width: 100%;

packages/devextreme-schematics/src/add-layout/files/src/app/__name__.component.ts

@@ -8,7 +8,8 @@ import { AuthService, ScreenService, AppInfoService } from './shared/services';
 })
 export class <%= strings.classify(name) %>Component  {
   @HostBinding('class') get getClass() {
-    return Object.keys(this.screen.sizes).filter(cl => this.screen.sizes[cl]).join(' ');
+    const sizeClassName = Object.keys(this.screen.sizes).filter(cl => this.screen.sizes[cl]).join(' ');
+    return `${sizeClassName} app` ;
   }
 
   constructor(private authService: AuthService, private screen: ScreenService, public appInfo: AppInfoService) { }

packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.scss

@@ -3,7 +3,6 @@
 }
 
 #navigation-header {
-  @import "../../../themes/generated/variables.additional.scss";
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 
   :host-context(.screen-x-small) & {

packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.component.scss

@@ -6,5 +6,5 @@
 }
 
 .layout-header {
-  z-index: 1501;
+  z-index: 1505;
 }

packages/devextreme-schematics/src/add-layout/files/src/app/layouts/single-card/single-card.component.scss

@@ -1,5 +1,3 @@
-@import "../../../themes/generated/variables.base.scss";
-
 :host {
   width: 100%;
   height: 100%;
@@ -26,14 +24,14 @@
       margin-bottom: 30px;
 
       .title {
-        color: $base-text-color;
+        color: var(--base-text-color);
         line-height: 28px;
         font-weight: 500;
         font-size: 24px;
       }
 
       .description {
-        color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+        color: var(--base-text-color-alpha-7);
         line-height: 18px;
       }
     }

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.scss

@@ -1,19 +1,17 @@
-@import "../../../../themes/generated/variables.base.scss";
-
 .create-account-form {
   .policy-info {
     margin: 10px 0;
-    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+    color: var(--base-text-color-alpha-7);
     font-size: 14px;
     font-style: normal;
 
     a {
-      color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+      color: var(--base-text-color-alpha-7);
     }
   }
 
   .login-link {
-    color: $base-accent;
+    color: var(--base-accent);
     font-size: 16px;
     text-align: center;
   }