feat(layout): fix dark style no work error

ant-design · Nov 23, 2022 · 3e06527 · 3e06527
1 parent ec72110
commit 3e06527
Show file tree

Hide file tree

Showing 49 changed files with 3,949 additions and 4,297 deletions.
diff --git a/package.json b/package.json
@@ -84,6 +84,7 @@
     "@umijs/fabric": "^3.0.0",
     "@umijs/plugin-analytics": "^0.2.2",
     "@umijs/plugin-esbuild": "^1.1.0",
+    "@umijs/ssr-darkreader": "^4.9.44",
     "@umijs/test": "^3.2.10",
     "@umijs/test-utils": "^3.2.10",
     "@umijs/utils": "^3.2.11",

diff --git a/packages/card/src/components/Operation/style.ts b/packages/card/src/components/Operation/style.ts
@@ -13,7 +13,7 @@ const genProStyle: GenerateStyle<ProToken> = (token) => {
       justifyContent: 'flex-end',
       marginBlock: token.marginLG,
       marginInline: 0,
-      color: 'rgba(0, 0, 0, 0.85)',
+      color: token.colorText,
       fontWeight: '500',
       fontSize: '20px',
       lineHeight: '38px',

diff --git a/packages/form/src/BaseForm/BaseForm.tsx b/packages/form/src/BaseForm/BaseForm.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ConfigProviderWrap } from '@ant-design/pro-provider';
+import { ProConfigProvider } from '@ant-design/pro-provider';
 import type {
   ProFieldValueType,
   ProFormInstanceType,
@@ -677,7 +677,7 @@ function BaseForm<T = Record<string, any>>(props: BaseFormProps<T>) {
         mode: props.readonly ? 'read' : 'edit',
       }}
     >
-      <ConfigProviderWrap needDeps>
+      <ProConfigProvider needDeps>
         {/* // 增加国际化的能力，与 table 组件可以统一 */}
         <FieldContext.Provider
           value={{
@@ -739,7 +739,7 @@ function BaseForm<T = Record<string, any>>(props: BaseFormProps<T>) {
             </Form>
           </FormListContext.Provider>
         </FieldContext.Provider>
-      </ConfigProviderWrap>
+      </ProConfigProvider>
     </EditOrReadOnlyContext.Provider>,
   );
 }

diff --git a/packages/form/src/demos/base-test.tsx b/packages/form/src/demos/base-test.tsx
@@ -12,7 +12,7 @@ import {
   ProFormTreeSelect,
 } from '@ant-design/pro-components';
 import { TreeSelect } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useRef } from 'react';
 
 const treeData = [
@@ -209,7 +209,7 @@ export default () => {
         name="date"
         transform={(value) => {
           return {
-            date: moment(value).unix(),
+            date: dayjs(value).unix(),
           };
         }}
       />
@@ -220,7 +220,7 @@ export default () => {
               name="date"
               transform={(value) => {
                 return {
-                  date: moment(value).unix(),
+                  date: dayjs(value).unix(),
                 };
               }}
             />

diff --git a/packages/form/src/demos/base.tsx b/packages/form/src/demos/base.tsx
@@ -12,7 +12,7 @@ import {
   ProFormTreeSelect,
 } from '@ant-design/pro-components';
 import { message, TreeSelect } from 'antd';
-import moment from 'moment';
+import moment from 'dayjs';
 import { useRef } from 'react';
 
 const waitTime = (time: number = 100) => {

diff --git a/packages/form/src/layouts/LightFilter/style.ts b/packages/form/src/layouts/LightFilter/style.ts
@@ -37,7 +37,7 @@ const genLightFilterStyle: GenerateStyle<LightFilterToken> = (token) => {
       },
       '&-effective': {
         [`${token.componentCls}-collapse-icon`]: {
-          backgroundColor: 'rgba(0,0,0,0.04)',
+          backgroundColor: token.colorBgTextHover,
         },
       },
     },

diff --git a/packages/form/src/layouts/StepsForm/index.tsx b/packages/form/src/layouts/StepsForm/index.tsx
@@ -1,4 +1,4 @@
-import { ConfigProviderWrap, useIntl } from '@ant-design/pro-provider';
+import { ProConfigProvider, useIntl } from '@ant-design/pro-provider';
 import { merge, useRefFunction } from '@ant-design/pro-utils';
 import type { FormInstance, StepsProps } from 'antd';
 import { Button, Col, ConfigProvider, Form, Row, Space, Steps } from 'antd';
@@ -451,9 +451,9 @@ function StepsFormWarp<T = Record<string, any>>(
   },
 ) {
   return (
-    <ConfigProviderWrap needDeps>
+    <ProConfigProvider needDeps>
       <StepsForm<T> {...props} />
-    </ConfigProviderWrap>
+    </ProConfigProvider>
   );
 }
 

diff --git a/packages/layout/package.json b/packages/layout/package.json
@@ -35,7 +35,6 @@
     "@ant-design/pro-utils": "2.3.5",
     "@babel/runtime": "^7.18.0",
     "@umijs/route-utils": "^2.1.0",
-    "@umijs/ssr-darkreader": "^4.9.44",
     "@umijs/use-params": "^1.0.9",
     "classnames": "^2.2.6",
     "lodash.merge": "^4.6.2",

diff --git a/packages/layout/src/ProLayout.tsx b/packages/layout/src/ProLayout.tsx
@@ -1,6 +1,6 @@
-import type { ProTokenType } from '@ant-design/pro-provider';
+import { darkAlgorithm, defaultAlgorithm, ProTokenType } from '@ant-design/pro-provider';
 import { ProProvider } from '@ant-design/pro-provider';
-import { ConfigProviderWrap } from '@ant-design/pro-provider';
+import { ProConfigProvider } from '@ant-design/pro-provider';
 import { isBrowser, merge, useDocumentTitle, useMountMergeState } from '@ant-design/pro-utils';
 import { getMatchMenu } from '@umijs/route-utils';
 import type { BreadcrumbProps as AntdBreadcrumbProps } from 'antd';
@@ -255,7 +255,7 @@ const footerRender = (props: ProLayoutProps): React.ReactNode => {
 };
 
 const renderSiderMenu = (props: ProLayoutProps, matchMenuKeys: string[]): React.ReactNode => {
-  const { layout, navTheme, isMobile, selectedKeys, openKeys, splitMenus, menuRender } = props;
+  const { layout, isMobile, selectedKeys, openKeys, splitMenus, menuRender } = props;
   if (props.menuRender === false || props.pure) {
     return null;
   }
@@ -284,13 +284,6 @@ const renderSiderMenu = (props: ProLayoutProps, matchMenuKeys: string[]): React.
     <SiderMenu
       matchMenuKeys={matchMenuKeys}
       {...props}
-      style={
-        navTheme === 'realDark'
-          ? {
-              boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 65%)',
-            }
-          : {}
-      }
       // 这里走了可以少一次循环
       menuData={clearMenuData}
     />
@@ -730,15 +723,18 @@ const ProLayout: React.FC<ProLayoutProps> = (props) => {
       // @ts-ignore
       theme={{
         hashed: process.env.NODE_ENV?.toLowerCase() !== 'test',
+        components: {
+          Button: {
+            colorBgContainer: props.navTheme?.includes('Dark') ? 'transparent' : '#FFF',
+          },
+        },
         token: {
-          borderRadius: 4,
           colorPrimary: colorPrimary || '#1677FF',
-          colorError: '#ff4d4f',
-          colorInfo: '#1677FF',
         },
+        algorithm: props.navTheme?.includes('Dark') ? darkAlgorithm : defaultAlgorithm,
       }}
     >
-      <ConfigProviderWrap
+      <ProConfigProvider
         autoClearCache
         token={
           props.token
@@ -749,7 +745,7 @@ const ProLayout: React.FC<ProLayoutProps> = (props) => {
         }
       >
         <BaseProLayout {...props} />
-      </ConfigProviderWrap>
+      </ProConfigProvider>
     </ConfigProvider>
   );
 };

diff --git a/packages/layout/src/components/AppsLogoComponents/style/default.ts b/packages/layout/src/components/AppsLogoComponents/style/default.ts
@@ -1,4 +1,4 @@
-import type { GenerateStyle } from '@ant-design/pro-utils';
+import { GenerateStyle } from '@ant-design/pro-utils';
 import { resetComponent } from '@ant-design/pro-utils';
 import type { AppsLogoComponentsToken } from './index';
 const genAppsLogoComponentsDefaultListStyle: GenerateStyle<AppsLogoComponentsToken> = (token) => {
@@ -25,7 +25,7 @@ const genAppsLogoComponentsDefaultListStyle: GenerateStyle<AppsLogoComponentsTok
           transition: 'transform 0.2s cubic-bezier(0.333, 0, 0, 1)',
           borderRadius: token.borderRadius,
           '&:hover': {
-            backgroundColor: 'rgba(0, 0, 0, 0.03)',
+            backgroundColor: token.colorBgTextHover,
           },
           '*': { boxSizing: 'border-box', fontFamily: token.fontFamily },
           '* div': resetComponent?.(token),

diff --git a/packages/layout/src/components/AppsLogoComponents/style/simple.ts b/packages/layout/src/components/AppsLogoComponents/style/simple.ts
@@ -27,7 +27,7 @@ const genAppsLogoComponentsSimpleListStyle: GenerateStyle<AppsLogoComponentsToke
           transition: 'transform 0.2s cubic-bezier(0.333, 0, 0, 1)',
           borderRadius: token.borderRadius,
           '&:hover': {
-            backgroundColor: 'rgba(0, 0, 0, 0.03)',
+            backgroundColor: token.colorBgTextHover,
           },
           a: {
             display: 'flex',

diff --git a/packages/layout/src/components/FooterToolbar/style.ts b/packages/layout/src/components/FooterToolbar/style.ts
@@ -1,5 +1,5 @@
 import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-utils';
-import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
+import { setAlpha, useStyle as useAntdStyle } from '@ant-design/pro-provider';
 
 export interface AppsLogoComponentsToken extends ProAliasToken {
   componentCls: string;
@@ -20,7 +20,7 @@ const genFooterToolBarStyle: GenerateStyle<AppsLogoComponentsToken> = (token) =>
       boxSizing: 'border-box',
       lineHeight: '64px',
       /* A way to reset the style of the component. */
-      backgroundColor: 'rgba(255, 255, 255, 0.58)',
+      backgroundColor: setAlpha(token.colorBgElevated, 0.6),
       borderBlockStart: `1px solid ${token.colorSplit}`,
       '-webkit-backdrop-filter': 'blur(8px)',
       backdropFilter: 'blur(8px)',

diff --git a/packages/layout/src/components/PageContainer/index.tsx b/packages/layout/src/components/PageContainer/index.tsx
@@ -1,4 +1,4 @@
-import { ConfigProviderWrap, ProProvider } from '@ant-design/pro-provider';
+import { ProConfigProvider, ProProvider } from '@ant-design/pro-provider';
 import type { AffixProps, BreadcrumbProps, SpinProps, TabPaneProps, TabsProps } from 'antd';
 import { Affix, Breadcrumb, ConfigProvider, Tabs } from 'antd';
 import classNames from 'classnames';
@@ -401,9 +401,9 @@ const PageContainerBase: React.FC<PageContainerProps> = (props) => {
 
 const PageContainer: React.FC<PageContainerProps> = (props) => {
   return (
-    <ConfigProviderWrap needDeps>
+    <ProConfigProvider needDeps>
       <PageContainerBase {...props} />
-    </ConfigProviderWrap>
+    </ProConfigProvider>
   );
 };
 

diff --git a/packages/layout/src/components/SettingDrawer/index.tsx b/packages/layout/src/components/SettingDrawer/index.tsx
@@ -5,11 +5,6 @@ import {
   SettingOutlined,
 } from '@ant-design/icons';
 import { compareVersions, isBrowser, merge, openVisibleCompatible } from '@ant-design/pro-utils';
-import {
-  disable as darkreaderDisable,
-  enable as darkreaderEnable,
-  setFetchMethod as setFetch,
-} from '@umijs/ssr-darkreader';
 import { useUrlSearchParams } from '@umijs/use-params';
 import {
   Alert,
@@ -108,33 +103,6 @@ export const getFormatMessage = (): ((data: { id: string; defaultMessage?: strin
   return formatMessage;
 };
 
-const updateTheme = async (dark: boolean) => {
-  if (typeof window === 'undefined') return;
-  if (typeof window.MutationObserver === 'undefined') return;
-
-  if (dark) {
-    const defaultTheme = {
-      brightness: 100,
-      contrast: 90,
-      sepia: 10,
-    };
-
-    const defaultFixes = {
-      invert: [],
-      css: '',
-      ignoreInlineStyle: ['.react-switch-handle'],
-      ignoreImageAnalysis: [],
-      disableStyleSheetsProxy: true,
-    };
-    if (window.MutationObserver && window.fetch) {
-      setFetch(window.fetch);
-      darkreaderEnable(defaultTheme, defaultFixes);
-    }
-  } else {
-    if (window.MutationObserver) darkreaderDisable();
-  }
-};
-
 /**
  * 初始化的时候需要做的工作
  *
@@ -164,11 +132,6 @@ const initState = (
 
   // 同步数据到外部
   onSettingChange?.(newSettings);
-
-  // 如果 url 中设置主题，进行一次加载。
-  if (defaultSettings.navTheme !== urlParams.navTheme && urlParams.navTheme) {
-    updateTheme(settings.navTheme === 'realDark');
-  }
 };
 
 const getParamsFromUrl = (
@@ -272,7 +235,6 @@ export const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
   }, []);
 
   useEffect(() => {
-    updateTheme(settingState.navTheme === 'realDark');
     if (compareVersions(version, '5.0.0') < 0) {
       AntConfigProvider.config({
         theme: {
@@ -533,6 +495,7 @@ export const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
               >
                 <List
                   split={false}
+                  size="small"
                   renderItem={renderLayoutSettingItem}
                   dataSource={[
                     {

diff --git a/packages/layout/src/components/SettingDrawer/style/index.ts b/packages/layout/src/components/SettingDrawer/style/index.ts
@@ -67,19 +67,19 @@ const genSettingDrawerStyle: GenerateStyle<SettingDrawerToken> = (token) => {
           },
           '&-realDark': {
             backgroundColor: 'rgba(0, 21, 41, 0.85)',
-            '&::before': { backgroundColor: token.colorTextSecondary },
-            '&::after': { backgroundColor: token.colorText },
+            '&::before': { backgroundColor: 'rgba(0, 0, 0, 0.65)' },
+            '&::after': { backgroundColor: 'rgba(0, 0, 0, 0.85)' },
           },
           '&-light': {
-            backgroundColor: token.colorBgContainer,
-            '&::before': { backgroundColor: token.colorBgContainer },
-            '&::after': { backgroundColor: token.colorBgContainer },
+            backgroundColor: '#fff',
+            '&::before': { backgroundColor: '#fff' },
+            '&::after': { backgroundColor: '#fff' },
           },
 
           '&-dark,&-side': {
             backgroundColor: '#f7f8fa',
             '&::before': { zIndex: '1', backgroundColor: '#001529' },
-            '&::after': { backgroundColor: token.colorBgContainer },
+            '&::after': { backgroundColor: '#fff' },
           },
           '&-top': {
             backgroundColor: '#f7f8fa',
@@ -88,7 +88,7 @@ const genSettingDrawerStyle: GenerateStyle<SettingDrawerToken> = (token) => {
           },
           '&-mix': {
             backgroundColor: '#f7f8fa',
-            '&::before': { backgroundColor: token.colorBgContainer },
+            '&::before': { backgroundColor: '#fff' },
             '&::after': { backgroundColor: '#001529' },
           },
         },

diff --git a/packages/layout/src/components/SiderMenu/style/index.ts b/packages/layout/src/components/SiderMenu/style/index.ts
@@ -129,7 +129,7 @@ const genSiderMenuStyle: GenerateStyle<SiderMenuToken> = (token) => {
                 cursor: 'pointer',
                 borderRadius: token.borderRadius,
                 '&:hover': {
-                  background: 'rgba(0, 0, 0, 0.018)',
+                  background: token.colorBgTextHover,
                 },
               },
             },
@@ -142,7 +142,7 @@ const genSiderMenuStyle: GenerateStyle<SiderMenuToken> = (token) => {
                 cursor: 'pointer',
               },
               '&:hover': {
-                background: 'rgba(0, 0, 0, 0.018)',
+                background: token.colorBgTextHover,
               },
             },
           },

diff --git a/packages/layout/src/components/TopNavHeader/index.tsx b/packages/layout/src/components/TopNavHeader/index.tsx
@@ -45,19 +45,18 @@ const TopNavHeader: React.FC<TopNavHeaderProps> = (props) => {
               colorSubItemBg: token?.layout?.header?.colorBgHeader || 'transparent',
               radiusItem: 4,
               colorItemBgSelected:
-                token?.layout?.header?.colorBgMenuItemSelected || 'rgba(0, 0, 0, 0.04)',
+                token?.layout?.header?.colorBgMenuItemSelected || token?.colorBgTextHover,
               colorItemBgActive:
-                token?.layout?.header?.colorBgMenuItemHover || 'rgba(0, 0, 0, 0.04)',
+                token?.layout?.header?.colorBgMenuItemHover || token?.colorBgTextHover,
               colorItemBgSelectedHorizontal:
-                token?.layout?.header?.colorBgMenuItemSelected || 'rgba(0, 0, 0, 0.04)',
+                token?.layout?.header?.colorBgMenuItemSelected || token?.colorBgTextHover,
               colorActiveBarWidth: 0,
               colorActiveBarHeight: 0,
               colorActiveBarBorderSize: 0,
-              colorItemText: token?.layout?.header?.colorTextMenu || 'rgba(0, 0, 0, 0.65)',
-              colorItemTextHover:
-                token?.layout?.header?.colorTextMenuActive || 'rgba(0, 0, 0, 0.85)',
+              colorItemText: token?.layout?.header?.colorTextMenu || token?.colorTextSecondary,
+              colorItemTextHover: token?.layout?.header?.colorTextMenuActive || token?.colorText,
               colorItemTextSelected:
-                token?.layout?.header?.colorTextMenuSelected || 'rgba(0, 0, 0, 1)',
+                token?.layout?.header?.colorTextMenuSelected || token?.colorTextBase,
             },
           },
         }}