Skip to content

Commit 9e3f3f9

Browse files
scottsutscottsut
committed
fix: change theme logic improvement
1 parent 0e6bba9 commit 9e3f3f9

File tree

15 files changed

+137
-107
lines changed

15 files changed

+137
-107
lines changed

‎frontend/package.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
"license": "Apache-2.0",
1616
"scripts": {
1717
"bootstrap": "npm install --legacy-peer-deps",
18+
"prestart": "npm run extractAntdTheme",
1819
"start": "craco start",
20+
"prebuild": "npm run extractAntdTheme",
1921
"build": "cross-env GENERATE_SOURCEMAP=false craco build",
2022
"build:task": "rollup -c",
2123
"build:all": "npm run build:task && npm run build",
@@ -32,8 +34,6 @@
3234
"eject": "react-scripts eject",
3335
"doc:types": "tsc --project tsconfig.dHelper.json",
3436
"doc:html": "jsdoc -c jsdoc.config.json",
35-
"prestart": "npm run extractAntdTheme",
36-
"prebuild": "npm run extractAntdTheme",
3737
"extractAntdTheme": "node scripts/extractAntdTheme"
3838
},
3939
"eslintConfig": {
@@ -97,8 +97,8 @@
9797
"@dinero.js/currencies": "^2.0.0-alpha.8",
9898
"@reduxjs/toolkit": "^1.7.1",
9999
"@types/react-color": "^3.0.5",
100-
"antd": "^4.16.13",
101-
"antd-theme-generator": "^1.2.11",
100+
"antd": "4.16.13",
101+
"antd-theme-generator": "1.2.11",
102102
"axios": "^0.21.1",
103103
"classnames": "^2.3.1",
104104
"debounce-promise": "3.1.2",
@@ -175,7 +175,6 @@
175175
"@types/webpack-env": "1.15.2",
176176
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
177177
"babel-plugin-styled-components": "2.0.2",
178-
"craco-less": "^1.17.1",
179178
"cross-env": "^7.0.3",
180179
"cz-conventional-changelog": "^3.3.0",
181180
"docdash": "^1.2.0",

‎frontend/public/index.html‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8" />
6-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<meta name="theme-color" content="#000000" />
9-
<meta name="description" content="Data Art" />
10-
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
11-
<!--
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta name="description" content="Data Art" />
9+
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
10+
<!--
1211
manifest.json provides metadata used when your web app is installed on a
1312
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1413
-->
15-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16-
<!--
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
<!--
1716
Notice the use of %PUBLIC_URL% in the tags above.
1817
It will be replaced with the URL of the `public` folder during the build.
1918
Only files inside the `public` folder can be referenced from the HTML.
@@ -22,22 +21,25 @@
2221
work correctly both with client-side routing and a non-root public URL.
2322
Learn how to configure a non-root public URL by running `npm run build`.
2423
-->
25-
<title>Datart</title>
26-
</head>
27-
28-
<body>
29-
<link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/antd/theme.less" />
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<script>
33-
window.less = {
34-
async: false,
35-
env: 'production'
36-
};
24+
<title>Datart</title>
25+
</head>
3726

38-
</script>
39-
<script type="text/javascript" src="%PUBLIC_URL%/antd/less.min.js"></script>
40-
<!--
27+
<body>
28+
<link
29+
rel="stylesheet/less"
30+
type="text/css"
31+
href="%PUBLIC_URL%/antd/theme.less"
32+
/>
33+
<noscript>You need to enable JavaScript to run this app.</noscript>
34+
<div id="root"></div>
35+
<script>
36+
window.less = {
37+
async: false,
38+
env: 'production',
39+
};
40+
</script>
41+
<script type="text/javascript" src="%PUBLIC_URL%/antd/less.min.js"></script>
42+
<!--
4143
This HTML file is a template.
4244
If you open it directly in the browser, you will see an empty page.
4345
@@ -47,6 +49,5 @@
4749
To begin the development, run `npm start` or `yarn start`.
4850
To create a production bundle, use `npm run build` or `yarn build`.
4951
-->
50-
</body>
51-
52+
</body>
5253
</html>

‎frontend/scripts/extractAntdTheme.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
const path = require('path');
2-
const {darkThemeSingle} = require(path.join(__dirname, '../node_modules/antd/dist/theme.js'));
2+
const defaultTheme = require(path.join(
3+
__dirname,
4+
'../node_modules/antd/dist/default-theme.js',
5+
));
36
const { generateTheme } = require('antd-theme-generator');
47

58
const themeVariables = [];
69

7-
for (let key in darkThemeSingle) {
10+
for (let key in defaultTheme) {
811
themeVariables.push('@' + key);
912
}
1013

14+
console.log('\r\nStart generating ant design theme.less file\r\n');
15+
1116
generateTheme({
1217
antDir: path.join(__dirname, '../node_modules/antd'), //node_modules中antd的路径
13-
stylesDir: path.join(__dirname, '../public/antd'), //styles对应的目录路径
14-
varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/index.less'), //less变量的入口文件
18+
stylesDir: path.join(__dirname, '../src/styles/antd'), //styles对应的目录路径
19+
varFile: path.join(__dirname, '../src/styles/antd/variables.less'), //less变量的入口文件
1520
themeVariables: themeVariables, //您要动态更改的变量列表
1621
outputFilePath: path.join(__dirname, '../public/antd/theme.less'), //生成的color.less文件的位置
1722
customColorRegexArray: [/^color\(.*\)$/],
18-
})
19-
.then(res => {
20-
console.log('配置主题成功');
21-
})
22-
.catch(res => {
23-
console.log('配置主题失败');
24-
});
23+
});

‎frontend/src/app/pages/MainPage/Navbar/index.tsx‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818

1919
import {
2020
BankFilled,
21-
BgColorsOutlined,
2221
ExportOutlined,
2322
FormOutlined,
2423
FunctionOutlined,
@@ -27,11 +26,10 @@ import {
2726
SafetyCertificateFilled,
2827
SettingFilled,
2928
SettingOutlined,
29+
SkinOutlined,
3030
UserOutlined,
3131
} from '@ant-design/icons';
3232
import { List, Menu, Tooltip } from 'antd';
33-
import lightTheme from 'antd/dist/default-theme';
34-
import { darkThemeSingle } from 'antd/dist/theme';
3533
import logo from 'app/assets/images/logo.svg';
3634
import { Avatar, MenuListItem, Popup } from 'app/components';
3735
import useI18NPrefix from 'app/hooks/useI18NPrefix';
@@ -53,6 +51,7 @@ import { useDispatch, useSelector } from 'react-redux';
5351
import { NavLink, useHistory, useRouteMatch } from 'react-router-dom';
5452
import styled from 'styled-components/macro';
5553
import {
54+
BLACK,
5655
BORDER_RADIUS,
5756
FONT_SIZE_ICON_SM,
5857
FONT_WEIGHT_MEDIUM,
@@ -61,9 +60,11 @@ import {
6160
SPACE_MD,
6261
SPACE_TIMES,
6362
SPACE_XS,
63+
WHITE,
6464
} from 'styles/StyleConstants';
6565
import themeSlice from 'styles/theme/slice';
6666
import { ThemeKeyType } from 'styles/theme/slice/types';
67+
import { changeAntdTheme, saveTheme } from 'styles/theme/utils';
6768
import { Access } from '../Access';
6869
import {
6970
PermissionLevels,
@@ -198,14 +199,8 @@ export function Navbar() {
198199
const handleChangeThemeFn = useCallback(
199200
(theme: ThemeKeyType) => {
200201
dispatch(themeSlice.actions.changeTheme(theme));
201-
(window as any).less
202-
.modifyVars(theme === 'dark' ? darkThemeSingle : lightTheme)
203-
.then((res: any) => {
204-
console.log('切换主题成功');
205-
})
206-
.catch((res: any) => {
207-
console.log('切换主题错误');
208-
});
202+
changeAntdTheme(theme);
203+
saveTheme(theme);
209204
},
210205
[dispatch],
211206
);
@@ -325,14 +320,17 @@ export function Navbar() {
325320
</MenuListItem>
326321
<MenuListItem
327322
key="theme"
328-
prefix={<BgColorsOutlined className="icon" />}
323+
prefix={<SkinOutlined className="icon" />}
329324
title={<p>{t('nav.account.switchTheme.title')}</p>}
330325
sub
331326
>
332-
<MenuListItem key="light">
327+
<MenuListItem key="light" prefix={<ThemeBadge />}>
333328
{t('nav.account.switchTheme.light')}
334329
</MenuListItem>
335-
<MenuListItem key="dark">
330+
<MenuListItem
331+
key="dark"
332+
prefix={<ThemeBadge background={BLACK} />}
333+
>
336334
{t('nav.account.switchTheme.dark')}
337335
</MenuListItem>
338336
</MenuListItem>
@@ -511,3 +509,11 @@ const SubNavTitle = styled(NavLink)`
511509
}
512510
}
513511
`;
512+
513+
const ThemeBadge = styled.span<{ background?: string }>`
514+
width: ${SPACE_TIMES(4)};
515+
height: ${SPACE_TIMES(4)};
516+
background-color: ${p => p.background || WHITE};
517+
border-radius: 50%;
518+
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
519+
`;

‎frontend/src/globalConstants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export enum StorageKeys {
2727
LoggedInUser = 'LOGGED_IN_USER',
2828
ShareClientId = 'SHARE_CLIENT_ID',
2929
Locale = 'LOCALE',
30+
Theme = 'THEME',
3031
}
3132
export const BASE_API_URL = '/api/v1';
3233
export const BASE_RESOURCE_URL = '/';

‎frontend/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* limitations under the License.
1717
*/
1818

19-
import 'antd/dist/antd.less';
19+
import 'antd/dist/antd.min.css';
2020
import { App } from 'app';
2121
import 'app/assets/fonts/iconfont.css';
2222
import 'core-js/features/string/replace-all';

‎frontend/src/locales/en/translation.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,10 +162,10 @@
162162
"confirmPassword": "Confirm password"
163163
},
164164
"switchLanguage": {
165-
"title": "language"
165+
"title": "Language"
166166
},
167167
"switchTheme": {
168-
"title": "Switch themes",
168+
"title": "Theme",
169169
"light": "Light",
170170
"dark": "Dark"
171171
},

‎frontend/src/locales/zh/translation.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -162,12 +162,12 @@
162162
"confirmPassword": "确定新密码"
163163
},
164164
"switchLanguage": {
165-
"title": "切换语言"
165+
"title": "语言"
166166
},
167167
"switchTheme": {
168-
"title": "切换主题",
169-
"light": "浅色",
170-
"dark": "深色"
168+
"title": "主题",
169+
"light": "明亮",
170+
"dark": "黑暗"
171171
},
172172
"logout": {
173173
"title": "退出登录"

‎frontend/src/share.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* limitations under the License.
1717
*/
1818

19-
import 'antd/dist/antd.less';
19+
import 'antd/dist/antd.min.css';
2020
import 'app/assets/fonts/iconfont.css';
2121
import { Share } from 'app/share';
2222
import 'core-js/features/string/replace-all';

‎frontend/src/styles/StyleConstants.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ export const MODAL_LEVEL = 1000;
1919

2020
// base color
2121
export const BLUE = '#1B9AEE';
22-
export const BLUERGB = '27, 154, 238';
2322
export const GREEN = '#15AD31';
2423
export const ORANGE = '#FA8C15';
2524
export const YELLOW = '#FAD414';
@@ -51,7 +50,6 @@ export const BLACK = '#000000';
5150

5251
// theme color
5352
export const PRIMARY = BLUE;
54-
export const PRIMARYRGB = BLUERGB;
5553
export const INFO = PRIMARY;
5654
export const SUCCESS = GREEN;
5755
export const PROCESSING = BLUE;

0 commit comments

Comments
 (0)