Skip to content

Commit 4ee3c88

Browse files
GoodDayForSurfdxvladislavvolkov
GoodDayForSurf
and
dxvladislavvolkov
authored
Add theme switching and set fluent theme as default (#901)
* Change theme to blue.light (#898) * Add vadiables and get rid of side menu customizations * Set light theme by default * Revert "Set light theme by default" This reverts commit 0f3f418. * Add variables module to angular jsson * Change theme to blue.light * Chamge theme for vue and react apps * Remove unused class * Update theme on CI * Fix color of inner layout * Update etalons * Use fluent theme by default * Add tests for fluent * Revert "Add tests for fluent" This reverts commit 8ec9500. * Revert "Use fluent theme by default" This reverts commit c4c4fd6. * Vue: add fluent as default theme add theme switching * React: add fluent as default theme add theme switching * Angular: add fluent as default theme add theme switching * changes for fix test * changes for fix test * changes for fix angular test * changes for fix angular test * fix style after designer review * remake user panel menu fix left side menu theme mode while change window width * update etalons * fix formatting * update screenshots * fix test * update screenshots * add fluent theme to testing * add fluent screenshots * update fluent screenshots + some changes for tests * some changes for tests * some changes for tests * fix ts in react * update screenshots * fix react ts * fix react ts * fix react ts * fix screenshots * fix header z-index in react * fix header z-index in react * fix layout in react * fix z-index header in angular * fix style menu tree item in vue * update screenshots * fix style menu tree item in react * refactor header style in react * add test for dark mode * add screenshot for dark mode add checking back theme switching in test * fix test * fix test * fix test * remove back theme switching check * fix test * add screenshots * add screenshots * add screenshots * update screenshots * update test * update screenshots add theme switching check * clean code * clean code * clean code * clean code * clean code in angular home page styles * fix versions * fix versions * fix versions * fix angular version * fix angular version * fix angular version * fix angular version * fix angular version * Revert "fix angular version" This reverts commit 9f593c0. * fix registry * fix angular version * fix angular version * fix angular version * fix angular version * revert update versions * revert devextreme version * fix review notes --------- Co-authored-by: volvl <[email protected]> Co-authored-by: dxvladslavvolkov <[email protected]>
1 parent 90501ad commit 4ee3c88

File tree

247 files changed

+1237
-813
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

247 files changed

+1237
-813
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,9 @@ const addTemplate = (appPath, appName, templateOptions) => {
100100

101101
const styles = [
102102
'./themes/generated/theme.additional.css',
103+
'./themes/generated/theme.additional.dark.css',
103104
'./themes/generated/theme.base.css',
105+
'./themes/generated/theme.base.dark.css',
104106
'devextreme/dist/css/dx.common.css'
105107
];
106108

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,9 @@ const addTemplate = (appPath, appName, templateOptions) => {
7777
const applicationTemplatePath = path.join(templateCreator.getTempaltePath('vue-v3'), 'application');
7878
const styles = [
7979
'./themes/generated/theme.additional.css',
80+
'./themes/generated/theme.additional.dark.css',
8081
'./themes/generated/theme.base.css',
82+
'./themes/generated/theme.base.dark.css',
8183
'devextreme/dist/css/dx.common.css'
8284
];
8385

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,54 @@
99
"outputFile": "src/themes/generated/theme.base.css"
1010
}
1111
},
12+
{
13+
"command": "build-theme",
14+
"options": {
15+
"inputFile": "src/themes/metadata.base.dark.json",
16+
"outputFile": "src/themes/generated/theme.base.dark.css"
17+
}
18+
},
1219
{
1320
"command": "build-theme",
1421
"options": {
1522
"inputFile": "src/themes/metadata.additional.json",
1623
"outputFile": "src/themes/generated/theme.additional.css"
1724
}
1825
},
26+
{
27+
"command": "build-theme",
28+
"options": {
29+
"inputFile": "src/themes/metadata.additional.dark.json",
30+
"outputFile": "src/themes/generated/theme.additional.dark.css"
31+
}
32+
},
1933
{
2034
"command": "export-theme-vars",
2135
"options": {
2236
"inputFile": "src/themes/metadata.base.json",
2337
"outputFile": "src/themes/generated/variables.base.scss"
2438
}
2539
},
40+
{
41+
"command": "export-theme-vars",
42+
"options": {
43+
"inputFile": "src/themes/metadata.base.dark.json",
44+
"outputFile": "src/themes/generated/variables.base.dark.scss"
45+
}
46+
},
2647
{
2748
"command": "export-theme-vars",
2849
"options": {
2950
"inputFile": "src/themes/metadata.additional.json",
3051
"outputFile": "src/themes/generated/variables.additional.scss"
3152
}
53+
},
54+
{
55+
"command": "export-theme-vars",
56+
"options": {
57+
"inputFile": "src/themes/metadata.additional.dark.json",
58+
"outputFile": "src/themes/generated/variables.additional.dark.scss"
59+
}
3260
}
3361
]
3462
}

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { AuthProvider, useAuth } from './contexts/auth';
77
import { useScreenSizeClass } from './utils/media-query';
88
import Content from './Content';
99
import UnauthenticatedContent from './UnauthenticatedContent';
10+
import { ThemeContext, useThemeContext} from "./theme";
1011

1112
function App() {
1213
const { user, loading } = useAuth();
@@ -24,16 +25,19 @@ function App() {
2425

2526
export default function Root() {
2627
const screenSizeClass = useScreenSizeClass();
28+
const themeContext = useThemeContext();
2729

2830
return (
2931
<Router>
30-
<AuthProvider>
31-
<NavigationProvider>
32-
<div className={`app ${screenSizeClass}`}>
33-
<App />
34-
</div>
35-
</NavigationProvider>
36-
</AuthProvider>
32+
<ThemeContext.Provider value={themeContext}>
33+
<AuthProvider>
34+
<NavigationProvider>
35+
<div className={`app ${screenSizeClass}`}>
36+
<App />
37+
</div>
38+
</NavigationProvider>
39+
</AuthProvider>
40+
</ThemeContext.Provider>
3741
</Router>
3842
);
3943
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
.create-account-form {
44
.policy-info {
55
margin: 10px 0;
6-
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
6+
color: var(--base-text-color-alpha-7);
77
font-size: 14px;
88
font-style: normal;
99

1010
a {
11-
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
11+
color: var(--base-text-color-alpha-7);
1212
}
1313
}
1414

1515
.login-link {
16-
color: $base-accent;
16+
color: var(--base-accent);
1717
font-size: 16px;
1818
text-align: center;
1919
}

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
@import "../../themes/generated/variables.base.scss";
2-
31
.footer {
42
display: block;
5-
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
6-
border-top: 1px solid rgba(0, 0, 0, 0.1);
3+
color: var(--base-text-color-alpha-7);
4+
border-top: 1px solid var(--footer-border-color);
75
padding-top: 20px;
86
padding-bottom: 24px;
97
margin: 0 40px;

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
@import "../../themes/generated/variables.base.scss";
21
@import "../../dx-styles.scss";
32

3+
header {
4+
background-color: var(--base-bg);
5+
}
6+
47
.header-component {
58
flex: 0 0 auto;
69
z-index: 1;
710
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
8-
9-
.dx-toolbar .dx-toolbar-item.menu-button>.dx-toolbar-item-content .dx-icon {
10-
color: $base-accent;
11-
}
1211
}
1312

1413
.dx-toolbar.header-toolbar .dx-toolbar-items-container .dx-toolbar-after {

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

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Button from 'devextreme-react/button';
44
import UserPanel from '../user-panel/UserPanel';
55
import './Header.scss';
66
import { Template } from 'devextreme-react/core/template';
7+
import { ThemeSwitcher } from '../theme-switcher/ThemeSwitcher';
78
<%=#isTypeScript%>import type { HeaderProps } from '../../types';<%=/isTypeScript%>
89

910
export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTypeScript%>: HeaderProps<%=/isTypeScript%>) {
@@ -26,21 +27,16 @@ export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTyp
2627
/>
2728
<Item
2829
location={'after'}
29-
locateInMenu={'auto'}
30-
menuItemTemplate={'userPanelTemplate'}
3130
>
32-
<Button
33-
className={'user-button authorization'}
34-
width={210}
35-
height={'100%'}
36-
stylingMode={'text'}
37-
>
38-
<UserPanel menuMode={'context'} />
39-
</Button>
31+
<ThemeSwitcher />
4032
</Item>
41-
<Template name={'userPanelTemplate'}>
42-
<UserPanel menuMode={'list'} />
33+
<Item location='after' locateInMenu='auto' menuItemTemplate='userPanelTemplate'>
34+
<UserPanel menuMode='context' />
35+
</Item>
36+
<Template name='userPanelTemplate'>
37+
<UserPanel menuMode='list' />
4338
</Template>
39+
4440
</Toolbar>
4541
</header>
4642
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313

1414
.form-text {
1515
margin: 10px 0;
16-
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
16+
color: var(--base-text-color-alpha-7);
1717
}
1818
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77

88
.login-link {
9-
color: $base-accent;
9+
color: var(--base-accent);
1010
font-size: 16px;
1111
text-align: center;
1212
}

0 commit comments

Comments
 (0)