fix: basic-layouts 页面适应dark light配色

antdpro · Jun 8, 2023 · 15c9c02 · 15c9c02
1 parent 6802210
commit 15c9c02
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/packages/antdp-ui/src/ButtonGroupPro/index.css b/packages/antdp-ui/src/ButtonGroupPro/index.css
@@ -1,5 +1,5 @@
 .antdp-ButtonGroup{
-  background: #fff;
+  /* background: #fff; */
 }
 .antdp-ButtonGroup .ant-btn{
   margin: 0px 12px 0px 0px;

diff --git a/packages/basic-layouts/src/Sider/index.tsx b/packages/basic-layouts/src/Sider/index.tsx
@@ -64,7 +64,7 @@ const Sider = (props: SiderProps) => {
         defaultSelectedKeys={[location.pathname]}
         defaultOpenKeys={[location.pathname]}
         mode="inline"
-        theme={theme}
+        // theme={theme}
         items={items}
         style={{ width: '100%' }}
       />

diff --git a/packages/basic-layouts/src/index.css b/packages/basic-layouts/src/index.css
@@ -15,12 +15,12 @@ body {
   --primary-content-bg: #f5f5f5;
 }
 .antdp-basic-layouts-dark{
-  --primary-slider-bg: #001529;
-  --primary-header-bg: #001529;
+  --primary-slider-bg: #1d1d1d;
+  --primary-header-bg: #1d1d1d;
   --primary-shadow: #001529;
   --primary-slider-trigger-border:#fff;
   --primary-text-color:#fff;
-  --primary-content-bg: #f5f5f5;
+  --primary-content-bg: #1d1d1d;
 }
 .antdp-basic-layouts {
   width: 100%;
@@ -43,6 +43,10 @@ body {
       float: left;
     }
   }
+  .ant-menu-dark {
+    color: rgba(255, 255, 255, 0.65);
+    background: var(--primary-slider-bg);
+  }
   .antdp-basic-layouts-header {
     padding: 0 !important;
     margin: 0;

diff --git a/packages/basic-layouts/src/index.tsx b/packages/basic-layouts/src/index.tsx
@@ -1,5 +1,5 @@
 import { AuthorizedConfigProvider } from '@antdp/authorized';
-import { App, ConfigProvider, Layout } from 'antd';
+import { App, ConfigProvider, Layout, theme as th } from 'antd';
 import React, { useMemo } from 'react';
 import WarpContent from './Content';
 import Header from './Header';
@@ -107,8 +107,15 @@ const BasicLayouts = (props: BasicLayoutsProps) => {
   return (
     <AuthorizedConfigProvider {...newData}>
       <LayoutsProvider {...props}>
-        <ConfigProvider {...props.configProviderProps}>
-          <Layout className={`antdp-basic-layouts ${props.className}  antdp-basic-layouts-${theme}`}>
+        <ConfigProvider
+          theme={{
+            algorithm:theme === 'dark' ? th.darkAlgorithm : th.defaultAlgorithm,
+          }}
+          {...props.configProviderProps}
+        >
+          <Layout
+            className={`antdp-basic-layouts ${props.className}  antdp-basic-layouts-${theme}`}
+          >
             {render}
           </Layout>
         </ConfigProvider>