import { ConfigProvider, GlobalToken, theme, ThemeConfig } from "antd" import { useMemo } from "react" /** * 全局色使用 * **/ const { darkAlgorithm, compactAlgorithm, useToken } = theme /** 常用配置字段 * colorTextBase 基础文字颜色 * colorBgBase 基础背景色 * colorPrimary 主题色 * fontSize 文字大小 * borderRadius 圆角 * colorInfo 信息色 * colorError 错误色 * colorWarning 警告色 * colorSuccess 成功色 * */ let themeConfig = { v: '1.0', type: 'light',//dark || acPrimary: 'default', "acTextColor": "rgba(74,74,74,1)", "acLayout": "rgba(12,37,61,1)", "acContainer": "rgba(247,247,247,1)", "dfcolorBorder": "rgba(134,140,148,0.5)", "dfcolorBorderSecondary": "rgb(228, 228, 228)", //"rgba(152,196,245,0)", "dfcolorTextQuaternary": "rgba(0, 0, 0, 0.25)", "dfContentBgColor": "rgba(255,255,255,1)", "dfcolorLink": "#1677ff", "cardColorBorder": "#d5d5d5", "cardColorBorderSecondary": "rgba(155,155,155,0.1)", "cardColorBgContainer": "rgba(247,247,247,1)", "tableColorBgContainer": "rgb(255, 255, 255)", "tablePaddingXS": 4, "colorBgElevated": "rgba(255,255,255,1)", "colorBgMask": "rgba(0,0,0,0.45)", "myBgUrl": "", "colorInfo": "rgba(22,119,255,1)", "colorInfoBg": "rgba(250,173,20,0)", "colorInfoBorder": "rgba(255,255,255,0)", "colorError": "#ff4d4f", "colorErrorBg": "#fff2f0", "colorErrorBorder": "#ffccc7", "colorSuccess": "#52c41a", "colorSuccessBg": "#f6ffed", "colorSuccessBorder": "#b7eb8f", "colorWarning": "rgba(250,173,20,1)", "colorWarningBg": "#fffbe6", "colorWarningBorder": "#ffe58f", "controlItemBgActive": "rgba(0,21,40,0)", "controlItemBgActiveTable": "#e6f4ff", "controlItemBgActiveHover": "rgba(186,224,255,1)", "colorFillAlter": "rgba(0, 0, 0, 0.02)", "colorPrimaryBgHover": "rgba(186,224,255,0.4)", "colorMenuText": "rgba(255,255,255,1)", // acTextColor: '#000',//基础文字颜色 // acLayout: 'rgba(247, 247, 247, 0.5)',//路由背景 // acContainer: 'rgba(247, 247, 247, 0.6)',//输入容器背景 // dfcolorBorder: 'rgba(175,175,175,1)',//外部边框颜色 // dfcolorBorderSecondary: '#f0f0f0',//内部边框色 // dfcolorTextQuaternary: 'rgba(0, 0, 0, 0.25)',//输入提示色 // dfContentBgColor: 'rgba(247, 247, 247, 0.6)',//背景色 // dfcolorLink: '#1677ff',//链接色 // cardColorBorder: '#d5d5d5',//卡片外部边框色 // cardColorBorderSecondary: '#d5d5d5',//卡片内部边框色 // cardColorBgContainer: 'rgba(247, 247, 247, 0)',//卡片背景色 // tableColorBgContainer: 'rgba(247, 247, 247, 0)',//表格背景色 // tablePaddingXS: 4,//表格内边距 // colorBgElevated: 'rgba(255,255,255,1)',//弹窗背景色 // colorBgMask: 'rgba(0, 0, 0, 0.45)',//弹窗遮罩层颜色 // myBgUrl: 'https://p9.qhimg.com/bdm/2560_1600_0/t01efb6b0204ffcaf78.jpg',//'https://p9.qhimg.com/bdm/2560_1600_0/t01efb6b0204ffcaf78.jpg' // colorInfo: '#1677ff',//用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress // colorInfoBg: '#e6f4ff',//信息背景色 // colorInfoBorder: '#91caff',//信息边框色 // colorError: '#ff4d4f',//失败背景色 // colorErrorBg: '#fff2f0',//失败色 // colorErrorBorder: '#ffccc7',//失败边框色 // colorSuccess: '#52c41a',//成功色 // colorSuccessBg: '#f6ffed',//成功背景色 // colorSuccessBorder: '#b7eb8f',//成功边框色 // colorWarning: '#faad14',//警戒色 // colorWarningBg: '#fffbe6',//警戒背景色 // colorWarningBorder: '#ffe58f',//警戒边框色 // controlItemBgActive: '#e6f4ff',//menu被选中的背景色 // controlItemBgActiveTable: '#e6f4ff',//table选中背景色 // controlItemBgActiveHover: '#bae0ff',//table在被选中时的背景色 // colorFillAlter: 'rgba(0, 0, 0, 0.02)',//Table控制区hover背景色 // colorPrimaryBgHover: '#bae0ff',//主题悬浮色, // colorMenuText:'#000',//菜单文字颜色 bgUrl: { green: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*XpGeRoZKGycAAAAAAAAAAAAAARQnAQ', yellow: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1yydQLzw5nYAAAAAAAAAAAAAARQnAQ', orange: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VWFOTbEyU9wAAAAAAAAAAAAAARQnAQ', red: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*w6xcR7MriwEAAAAAAAAAAAAAARQnAQ', pink: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DGZXS4YOGp0AAAAAAAAAAAAAARQnAQ', purple: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*FMluR4vJhaQAAAAAAAAAAAAAARQnAQ', }, colorPrimary: { default: '#1677FF', green: '#00B96B', yellow: '#F2BD27', orange: '#F4801A', red: '#E0282E', pink: '#ED4192', purple: '#9E339F' }, fontfamilystyle:false,//字体样式 default: { token: { 'colorTextWhite': '#FFFFFF', colorPrimary: '#1677FF', // colorBgContainer: 'rgba(247, 247, 247, 0.6)',//容器背景 colorBgContainer: '#FFFFFF',//容器背景 colorBgLayout: 'rgba(247, 247, 247, 0.5)',//路由背景 colorTextBase: '#000',//基础文字色 "wireframe": true, "fontSize": 14, "colortRansparency": 'rgba(247, 247, 247, 0)',//自定义透明色 colorBorder: '#d5d5d5',//边框色 colorBorderSecondary: "#f0f0f0",//内部边框色 colorTextQuaternary: 'rgba(0, 0, 0, 0.25)',//输入提示色 colorLink: "#1677ff",//链接色 }, components: { Table: { colorBgContainer: 'rgba(247, 247, 247, 0)', paddingXS: 4, }, Aside: { borderRadiusSM: 0, }, Layout: { borderRadiusSM: 0, }, Menu: { borderRadiusSM: 0, }, Card: { }, }, algorithm: [] }, dark: { token: { 'colorTextWhite': '#FFFFFF', colorPrimary: '#00B96B', "wireframe": true, "borderRadius": 6, "fontSize": 12, "colortRansparency": 'rgba(247, 247, 247, 0)',//自定义透明色 lineHeight: 2, }, components: { Card: { }, Table: { }, Button: { lineHeight: 1.4, } }, algorithm: [] }, algorithm: [compactAlgorithm] } /**扩展自定义字段*/ export interface NewGlobalToken extends GlobalToken { /**透明色*/ colortRansparency?: string, colorTextWhite?: string } type Props = { theme: ThemeConfig | undefined, children: JSX.Element } export default function useNewToken() { const { token }: { token: NewGlobalToken } = useToken() const MyConfigProvider = (props: Props) => useMemo(() => { return {props.children} }, []) return { token, themeConfig, darkAlgorithm, MyConfigProvider } }