running-elephant · scottsut · Mar 5, 2022 · Mar 4, 2022 · Mar 4, 2022
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -36,3 +36,4 @@ yarn-error.log*
 /types
 
 /public/task
+/public/antd/theme.less
diff --git a/frontend/craco.config.js b/frontend/craco.config.js
@@ -38,17 +38,6 @@ module.exports = {
       options: {
         lessLoaderOptions: {
           lessOptions: {
-            modifyVars: {
-              '@primary-color': '#1B9AEE',
-              '@success-color': '#15AD31',
-              '@processing-color': '#1B9AEE',
-              '@error-color': '#E62412',
-              '@highlight-color': '#E62412',
-              '@warning-color': '#FA8C15',
-              '@text-color': '#212529',
-              '@text-color-secondary': '#495057',
-              '@heading-color': '#212529',
-            },
             javascriptEnabled: true,
           },
         },

diff --git a/frontend/package.json b/frontend/package.json
@@ -31,7 +31,10 @@
     "prepare": "cd .. && husky install frontend/.husky",
     "eject": "react-scripts eject",
     "doc:types": "tsc --project tsconfig.dHelper.json",
-    "doc:html": "jsdoc -c jsdoc.config.json"
+    "doc:html": "jsdoc -c jsdoc.config.json",
+    "prestart": "npm run extractAntdTheme",
+    "prebuild": "npm run extractAntdTheme",
+    "extractAntdTheme": "node scripts/extractAntdTheme"
   },
   "eslintConfig": {
     "extends": [
@@ -94,7 +97,8 @@
     "@dinero.js/currencies": "^2.0.0-alpha.8",
     "@reduxjs/toolkit": "^1.7.1",
     "@types/react-color": "^3.0.5",
-    "antd": "4.16.13",
+    "antd": "^4.16.13",
+    "antd-theme-generator": "^1.2.11",
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "debounce-promise": "3.1.2",

diff --git a/frontend/public/antd/less.min.js b/frontend/public/antd/less.min.js
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,18 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Data Art" />
-    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Data Art" />
+  <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -21,12 +22,22 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Datart</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>Datart</title>
+</head>
+
+<body>
+  <link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/antd/theme.less" />
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script>
+    window.less = {
+      async: false,
+      env: 'production'
+    };
+
+  </script>
+  <script type="text/javascript" src="%PUBLIC_URL%/antd/less.min.js"></script>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -36,5 +47,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
+</body>
+
 </html>
diff --git a/frontend/scripts/extractAntdTheme.js b/frontend/scripts/extractAntdTheme.js
@@ -0,0 +1,24 @@
+const path = require('path');
+const {darkThemeSingle} = require(path.join(__dirname, '../node_modules/antd/dist/theme.js'));
+const { generateTheme } = require('antd-theme-generator');
+
+const themeVariables = [];
+
+for (let key in darkThemeSingle) {
+  themeVariables.push('@' + key);
+}
+
+generateTheme({
+  antDir: path.join(__dirname, '../node_modules/antd'), //node_modules中antd的路径
+  stylesDir: path.join(__dirname, '../public/antd'), //styles对应的目录路径
+  varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/index.less'), //less变量的入口文件
+  themeVariables: themeVariables, //您要动态更改的变量列表
+  outputFilePath: path.join(__dirname, '../public/antd/theme.less'), //生成的color.less文件的位置
+  customColorRegexArray: [/^color\(.*\)$/],
+})
+  .then(res => {
+    console.log('配置主题成功');
+  })
+  .catch(res => {
+    console.log('配置主题失败');
+  });
diff --git a/frontend/src/app/components/ColorPicker/SingleColorSelection.tsx b/frontend/src/app/components/ColorPicker/SingleColorSelection.tsx
@@ -25,9 +25,7 @@ import {
   BORDER_RADIUS,
   FONT_SIZE_BODY,
   G40,
-  G80,
   SPACE_TIMES,
-  WHITE,
 } from 'styles/StyleConstants';
 import ChromeColorPicker from './ChromeColorPicker';
 import { colorSelectionPropTypes } from './slice/types';
@@ -109,7 +107,7 @@ function SingleColorSelection({ color, onChange }: colorSelectionPropTypes) {
 export default SingleColorSelection;
 
 const ColorWrap = styled.div`
-  background-color: ${WHITE};
+  background-color: ${p => p.theme.bodyBackground};
   width: 426px;
   min-width: 426px;
   // max-width: 426px;
@@ -155,7 +153,7 @@ const MoreColor = styled.div`
   cursor: pointer;
   margin-top: ${SPACE_TIMES(2.5)};
   font-size: ${FONT_SIZE_BODY};
-  color: ${G80};
+  color: ${p => p.theme.textColor};
   &:hover {
     color: ${p => p.theme.primary};
   }

diff --git a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartHeaderPanel/ChartHeaderPanel.tsx b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartHeaderPanel/ChartHeaderPanel.tsx
@@ -149,6 +149,7 @@ const Wrapper = styled.div`
   align-items: center;
   padding: ${SPACE_SM} ${SPACE_MD} ${SPACE_SM} ${SPACE_SM};
   border-bottom: 1px solid ${p => p.theme.borderColorSplit};
+  background-color: ${p => p.theme.componentBackground};
 
   h1 {
     flex: 1;

diff --git a/...hPage/components/ChartOperationPanel/components/ChartDataViewPanel/ChartDataViewPanel.tsx b/...hPage/components/ChartOperationPanel/components/ChartDataViewPanel/ChartDataViewPanel.tsx
@@ -325,6 +325,7 @@ const StyledChartDataViewPanel = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+  background-color: ${p => p.theme.componentBackground};
 `;
 
 const Header = styled.div`

diff --git a/...chPage/components/ChartOperationPanel/components/ChartDraggable/ChartDraggableElement.tsx b/...chPage/components/ChartOperationPanel/components/ChartDraggable/ChartDraggableElement.tsx
@@ -220,6 +220,7 @@ const Content = styled.div`
 
   .title {
     flex: 1;
+    color: ${p => p.theme.white};
   }
 
   .action {

diff --git a/...ChartWorkbenchPage/components/ChartOperationPanel/components/ChartToolbar/Aggregation.tsx b/...ChartWorkbenchPage/components/ChartOperationPanel/components/ChartToolbar/Aggregation.tsx
@@ -54,4 +54,6 @@ const AggregationOperationMenu: FC<{
 
 export default AggregationOperationMenu;
 
-const Aggregation = styled.div``;
+const Aggregation = styled.div`
+  color: ${p => p.theme.textColor};
+`;
diff --git a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartWorkbench/ChartWorkbench.tsx b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartWorkbench/ChartWorkbench.tsx
@@ -141,10 +141,11 @@ const StyledChartWorkbench = styled.div`
   flex: 1;
   flex-flow: column;
   overflow: hidden;
-  background-color: ${p => p.theme.componentBackground};
+  background-color: ${p => p.theme.bodyBackground};
 
   .flexlayout__tab {
     overflow: hidden;
+    background-color: ${p => p.theme.bodyBackground};
   }
 
   .flexlayout__splitter {

diff --git a/frontend/src/app/pages/MainPage/Navbar/index.tsx b/frontend/src/app/pages/MainPage/Navbar/index.tsx
@@ -18,6 +18,7 @@
 
 import {
   BankFilled,
+  BgColorsOutlined,
   ExportOutlined,
   FormOutlined,
   FunctionOutlined,
@@ -29,6 +30,8 @@ import {
   UserOutlined,
 } from '@ant-design/icons';
 import { List, Menu, Tooltip } from 'antd';
+import lightTheme from 'antd/dist/default-theme';
+import { darkThemeSingle } from 'antd/dist/theme';
 import logo from 'app/assets/images/logo.svg';
 import { Avatar, MenuListItem, Popup } from 'app/components';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
@@ -59,6 +62,8 @@ import {
   SPACE_TIMES,
   SPACE_XS,
 } from 'styles/StyleConstants';
+import themeSlice from 'styles/theme/slice';
+import { ThemeKeyType } from 'styles/theme/slice/types';
 import { Access } from '../Access';
 import {
   PermissionLevels,
@@ -190,6 +195,21 @@ export function Navbar() {
     [matchModules?.params.moduleName, subNavs],
   );
 
+  const handleChangeThemeFn = useCallback(
+    (theme: ThemeKeyType) => {
+      dispatch(themeSlice.actions.changeTheme(theme));
+      (window as any).less
+        .modifyVars(theme === 'dark' ? darkThemeSingle : lightTheme)
+        .then((res: any) => {
+          console.log('切换主题成功');
+        })
+        .catch((res: any) => {
+          console.log('切换主题错误');
+        });
+    },
+    [dispatch],
+  );
+
   const userMenuSelect = useCallback(
     ({ key }) => {
       switch (key) {
@@ -210,11 +230,15 @@ export function Navbar() {
         case 'en':
           changeLang(key);
           break;
+        case 'dark':
+        case 'light':
+          handleChangeThemeFn(key);
+          break;
         default:
           break;
       }
     },
-    [dispatch, history],
+    [dispatch, history, handleChangeThemeFn],
   );
 
   const onSetPolling = useCallback(
@@ -299,6 +323,19 @@ export function Navbar() {
                   <MenuListItem key="zh">中文</MenuListItem>
                   <MenuListItem key="en">English</MenuListItem>
                 </MenuListItem>
+                <MenuListItem
+                  key="theme"
+                  prefix={<BgColorsOutlined className="icon" />}
+                  title={<p>{t('nav.account.switchTheme.title')}</p>}
+                  sub
+                >
+                  <MenuListItem key="light">
+                    {t('nav.account.switchTheme.light')}
+                  </MenuListItem>
+                  <MenuListItem key="dark">
+                    {t('nav.account.switchTheme.dark')}
+                  </MenuListItem>
+                </MenuListItem>
                 <Menu.Divider />
                 <MenuListItem
                   key="profile"

diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json
@@ -164,6 +164,11 @@
         "switchLanguage": {
           "title": "language"
         },
+        "switchTheme": {
+          "title": "Switch themes",
+          "light": "Light",
+          "dark": "Dark"
+        },
         "logout": {
           "title": "Logout"
         }

diff --git a/frontend/src/locales/i18n.ts b/frontend/src/locales/i18n.ts
@@ -29,6 +29,7 @@ export const changeLang = lang => {
     lang === 'zh' ? 'zh-CN' : 'en-US'; // FIXME locale
   localStorage.setItem(StorageKeys.Locale, lang);
   moment.locale(lang === 'zh' ? 'zh-cn' : 'en-us'); // FIXME locale
+  window.location && window.location.reload();
 };
 
 const initialLocale = getInitialLocale();

diff --git a/frontend/src/locales/zh/translation.json b/frontend/src/locales/zh/translation.json
@@ -164,6 +164,11 @@
         "switchLanguage": {
           "title": "切换语言"
         },
+        "switchTheme": {
+          "title": "切换主题",
+          "light": "浅色",
+          "dark": "深色"
+        },
         "logout": {
           "title": "退出登录"
         }

diff --git a/frontend/src/styles/theme/ThemeProvider.tsx b/frontend/src/styles/theme/ThemeProvider.tsx
@@ -1,13 +1,29 @@
-import React from 'react';
+import { darkThemeSingle } from 'antd/dist/theme';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { ThemeProvider as OriginalThemeProvider } from 'styled-components';
 import { useThemeSlice } from './slice';
-import { selectTheme } from './slice/selectors';
+import { selectTheme, selectThemeKey } from './slice/selectors';
 
 export const ThemeProvider = (props: { children: React.ReactChild }) => {
   useThemeSlice();
 
   const theme = useSelector(selectTheme);
+  const themeKey = useSelector(selectThemeKey);
+
+  useEffect(() => {
+    if (themeKey === 'dark') {
+      (window as any).less
+        .modifyVars(darkThemeSingle)
+        .then((res: any) => {
+          console.log('切换主题成功');
+        })
+        .catch((res: any) => {
+          console.log('切换主题错误');
+        });
+    }
+  }, [themeKey]);
+
   return (
     <OriginalThemeProvider theme={theme}>
       {React.Children.only(props.children)}

diff --git a/frontend/src/styles/theme/slice/index.ts b/frontend/src/styles/theme/slice/index.ts
@@ -1,18 +1,19 @@
 import { PayloadAction } from '@reduxjs/toolkit';
 import { useInjectReducer } from 'utils/@reduxjs/injectReducer';
 import { createSlice } from 'utils/@reduxjs/toolkit';
-import { getThemeFromStorage } from '../utils';
+import { getThemeFromStorage, saveTheme } from '../utils';
 import { ThemeKeyType, ThemeState } from './types';
 
 export const initialState: ThemeState = {
-  selected: getThemeFromStorage() || 'light',
+  selected: getThemeFromStorage(),
 };
 
 const themeSlice = createSlice({
   name: 'theme',
   initialState,
   reducers: {
     changeTheme(state, action: PayloadAction<ThemeKeyType>) {
+      saveTheme(action.payload);
       state.selected = action.payload;
     },
   },
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,3 +36,4 @@ yarn-error.log*
		/types

		/public/task
		/public/antd/theme.less