Add theme switching and set fluent theme as default

packages/devextreme-cli/src/applications/application.react.js

@@ -100,7 +100,9 @@ const addTemplate = (appPath, appName, templateOptions) => {
 
     const styles = [
         './themes/generated/theme.additional.css',
+        './themes/generated/theme.additional.dark.css',
         './themes/generated/theme.base.css',
+        './themes/generated/theme.base.dark.css',
         'devextreme/dist/css/dx.common.css'
     ];
 

packages/devextreme-cli/src/applications/application.vue.js

@@ -77,7 +77,9 @@ const addTemplate = (appPath, appName, templateOptions) => {
     const applicationTemplatePath = path.join(templateCreator.getTempaltePath('vue-v3'), 'application');
     const styles = [
         './themes/generated/theme.additional.css',
+        './themes/generated/theme.additional.dark.css',
         './themes/generated/theme.base.css',
+        './themes/generated/theme.base.dark.css',
         'devextreme/dist/css/dx.common.css'
     ];
 

packages/devextreme-cli/src/templates/react/application/devextreme.json

@@ -9,27 +9,55 @@
                   "outputFile": "src/themes/generated/theme.base.css"
               }
           },
+        {
+          "command": "build-theme",
+          "options": {
+            "inputFile": "src/themes/metadata.base.dark.json",
+            "outputFile": "src/themes/generated/theme.base.dark.css"
+          }
+        },
           {
               "command": "build-theme",
               "options": {
                   "inputFile": "src/themes/metadata.additional.json",
                   "outputFile": "src/themes/generated/theme.additional.css"
               }
           },
+        {
+          "command": "build-theme",
+          "options": {
+            "inputFile": "src/themes/metadata.additional.dark.json",
+            "outputFile": "src/themes/generated/theme.additional.dark.css"
+          }
+        },
           {
               "command": "export-theme-vars",
               "options": {
                   "inputFile": "src/themes/metadata.base.json",
                   "outputFile": "src/themes/generated/variables.base.scss"
               }
           },
+        {
+          "command": "export-theme-vars",
+          "options": {
+            "inputFile": "src/themes/metadata.base.dark.json",
+            "outputFile": "src/themes/generated/variables.base.dark.scss"
+          }
+        },
           {
               "command": "export-theme-vars",
               "options": {
                   "inputFile": "src/themes/metadata.additional.json",
                   "outputFile": "src/themes/generated/variables.additional.scss"
               }
+          },
+        {
+          "command": "export-theme-vars",
+          "options": {
+            "inputFile": "src/themes/metadata.additional.dark.json",
+            "outputFile": "src/themes/generated/variables.additional.dark.scss"
           }
+        }
       ]
   }
 }

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

@@ -7,6 +7,7 @@ import { AuthProvider, useAuth } from './contexts/auth';
 import { useScreenSizeClass } from './utils/media-query';
 import Content from './Content';
 import UnauthenticatedContent from './UnauthenticatedContent';
+import { ThemeContext, useThemeContext} from "./theme";
 
 function App() {
   const { user, loading } = useAuth();
@@ -24,16 +25,19 @@ function App() {
 
 export default function Root() {
   const screenSizeClass = useScreenSizeClass();
+  const themeContext = useThemeContext();
 
   return (
     <Router>
-      <AuthProvider>
-        <NavigationProvider>
-          <div className={`app ${screenSizeClass}`}>
-            <App />
-          </div>
-        </NavigationProvider>
-      </AuthProvider>
+      <ThemeContext.Provider value={themeContext}>
+        <AuthProvider>
+          <NavigationProvider>
+            <div className={`app ${screenSizeClass}`}>
+              <App />
+            </div>
+          </NavigationProvider>
+        </AuthProvider>
+      </ThemeContext.Provider>
     </Router>
   );
 }

packages/devextreme-cli/src/templates/react/application/src/components/create-account-form/CreateAccountForm.scss

@@ -3,17 +3,17 @@
 .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;
   }

packages/devextreme-cli/src/templates/react/application/src/components/footer/Footer.scss

@@ -1,9 +1,7 @@
-@import "../../themes/generated/variables.base.scss";
-
 .footer {
   display: block;
-  color: rgba($base-text-color, alpha($base-text-color) * 0.7);
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  color: var(--base-text-color-alpha-7);
+  border-top: 1px solid var(--footer-border-color);
   padding-top: 20px;
   padding-bottom: 24px;
   margin: 0 40px;

packages/devextreme-cli/src/templates/react/application/src/components/header/Header.scss

@@ -1,14 +1,13 @@
-@import "../../themes/generated/variables.base.scss";
 @import "../../dx-styles.scss";
 
+header {
+  background-color: var(--base-bg);
+}
+
 .header-component {
   flex: 0 0 auto;
   z-index: 1;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-
-  .dx-toolbar .dx-toolbar-item.menu-button>.dx-toolbar-item-content .dx-icon {
-    color: $base-accent;
-  }
 }
 
 .dx-toolbar.header-toolbar .dx-toolbar-items-container .dx-toolbar-after {

packages/devextreme-cli/src/templates/react/application/src/components/header/Header.tsx

@@ -4,6 +4,7 @@ import Button from 'devextreme-react/button';
 import UserPanel from '../user-panel/UserPanel';
 import './Header.scss';
 import { Template } from 'devextreme-react/core/template';
+import { ThemeSwitcher } from '../theme-switcher/ThemeSwitcher';
 <%=#isTypeScript%>import type { HeaderProps } from '../../types';<%=/isTypeScript%>
 
 export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTypeScript%>: HeaderProps<%=/isTypeScript%>) {
@@ -26,21 +27,16 @@ export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTyp
         />
         <Item
           location={'after'}
-          locateInMenu={'auto'}
-          menuItemTemplate={'userPanelTemplate'}
         >
-          <Button
-            className={'user-button authorization'}
-            width={210}
-            height={'100%'}
-            stylingMode={'text'}
-          >
-            <UserPanel menuMode={'context'} />
-          </Button>
+          <ThemeSwitcher />
         </Item>
-        <Template name={'userPanelTemplate'}>
-          <UserPanel menuMode={'list'} />
+        <Item location='after' locateInMenu='auto' menuItemTemplate='userPanelTemplate'>
+          <UserPanel menuMode='context' />
+        </Item>
+        <Template name='userPanelTemplate'>
+          <UserPanel menuMode='list' />
         </Template>
+
       </Toolbar>
     </header>
 )}

packages/devextreme-cli/src/templates/react/application/src/components/login-form/LoginForm.scss

@@ -13,6 +13,6 @@
 
   .form-text {
     margin: 10px 0;
-    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+    color: var(--base-text-color-alpha-7);
   }
 }

packages/devextreme-cli/src/templates/react/application/src/components/reset-password-form/ResetPasswordForm.scss

@@ -6,7 +6,7 @@
   }
 
   .login-link {
-    color: $base-accent;
+    color: var(--base-accent);
     font-size: 16px;
     text-align: center;
   }

packages/devextreme-cli/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.scss

@@ -1,91 +1,72 @@
 @import "../../dx-styles.scss";
-@import "../../themes/generated/variables.additional.scss";
 
-.side-navigation-menu {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  height: 100%;
-  width: 250px !important;
-
-  .menu-container {
-    min-height: 100%;
+.dx-swatch-additional, .dx-swatch-additional-dark {
+  &.side-navigation-menu {
     display: flex;
-    flex: 1;
+    flex-direction: column;
+    min-height: 100%;
+    height: 100%;
+    width: 250px !important;
+    background-color: var(--base-bg);
 
-    .dx-treeview {
-      // ## Long text positioning
-      white-space: nowrap;
-      // ##
+    .menu-container {
+      min-height: 100%;
+      display: flex;
+      flex: 1;
 
-      // ## Icon width customization
-      .dx-treeview-item {
-        padding-left: 0;
-        flex-direction: row-reverse;
+      .dx-treeview {
+        // ## Long text positioning
+        white-space: nowrap;
+        // ##
 
-        .dx-icon {
-          width: $side-panel-min-width !important;
-          margin: 0 !important;
+        .dx-treeview-node-container:empty {
+          display: none;
         }
-      }
-      // ##
-
-      // ## Arrow customization
-      .dx-treeview-node {
-        padding: 0 0 !important;
-      }
 
-      .dx-treeview-toggle-item-visibility {
-        right: 10px;
-        left: auto;
-      }
+        // ## Icon width customization
+        .dx-treeview-item {
+          padding-left: 0;
+          border-radius: 0;
+          flex-direction: row-reverse;
 
-      .dx-rtl .dx-treeview-toggle-item-visibility {
-        left: 10px;
-        right: auto;
-      }
-      // ##
+          .dx-icon {
+            width: $side-panel-min-width !important;
+            margin: 0 !important;
+          }
+        }
 
-      // ## Item levels customization
-      .dx-treeview-node {
-        &[aria-level='1'] {
-          font-weight: bold;
-          border-bottom: 1px solid $base-border-color;
+        // ##
+
+        // ## Arrow customization
+        .dx-treeview-node {
+          padding: 0 0 !important;
         }
-  
-        &[aria-level='2'] .dx-treeview-item-content {
-          font-weight: normal;
-          padding: 0 $side-panel-min-width;
+
+        .dx-treeview-toggle-item-visibility {
+          right: 10px;
+          left: auto;
         }
-      }
-      // ##
-    }
 
-    // ## Selected & Focuced items customization
-    .dx-treeview {
-      .dx-treeview-node-container {
-        .dx-treeview-node {
-          &.dx-state-selected:not(.dx-state-focused)> .dx-treeview-item {
-            background: transparent;
-          }
+        .dx-rtl .dx-treeview-toggle-item-visibility {
+          left: 10px;
+          right: auto;
+        }
+        // ##
 
-          &.dx-state-selected > .dx-treeview-item * {
-            color: $base-accent;
+        // ## Item levels customization
+        .dx-treeview-node {
+          &[aria-level="1"] {
+            font-weight: bold;
           }
 
-          &:not(.dx-state-focused)>.dx-treeview-item.dx-state-hover {
-            background-color: lighten($base-bg, 4.00);
+          &[aria-level="2"] .dx-treeview-item-content {
+            font-weight: normal;
+            padding: 0 $side-panel-min-width;
           }
         }
+        // ##
       }
     }
-
-    .dx-theme-generic .dx-treeview {
-      .dx-treeview-node-container .dx-treeview-node.dx-state-selected.dx-state-focused > .dx-treeview-item * {
-        color: inherit;
-      }
-    }
-    // ##
   }
 }
 

packages/devextreme-cli/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useEffect, useRef, useCallback, useMemo, useContext } from 'react';
 import { TreeView<%=#isTypeScript%>, TreeViewRef<%=/isTypeScript%> } from 'devextreme-react/tree-view';
+import * as events from 'devextreme/events';
 import { navigation } from '../../app-navigation';
 import { useNavigation } from '../../contexts/navigation';
 import { useScreenSize } from '../../utils/media-query';
 import './SideNavigationMenu.scss';
 <%=#isTypeScript%>import type { SideNavigationMenuProps } from '../../types';<%=/isTypeScript%>
 
-import * as events from 'devextreme/events';
+import { ThemeContext } from '../../theme';
 
 export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsWithChildren<SideNavigationMenuProps><%=/isTypeScript%>) {
   const {
@@ -17,6 +18,7 @@ export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsW
     onMenuReady
   } = props;
 
+  const theme = useContext(ThemeContext);
   const { isLarge } = useScreenSize();
   function normalizePath () {
     return navigation.map((item) => (
@@ -64,7 +66,7 @@ export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsW
 
   return (
     <div
-      className={'dx-swatch-additional side-navigation-menu'}
+      className={`dx-swatch-additional${theme?.isDark() ? '-dark' : ''} side-navigation-menu`}
       ref={getWrapperRef}
     >
       {children}