@@ -34,7 +34,7 @@ const ThemeComp = (props: props) => {
3434 setColorHex ( "#a855f7" ) ;
3535 } ;
3636
37- const { themeMode, isDark } = useSelector ( state => state . global ) ;
37+ const { themeMode, isDark, themeColor } = useSelector ( state => state . global ) ;
3838 const changeTheme = ( checked : boolean , mode : "" | "gray" | "week" ) => {
3939 checked ? dispatch ( setThemeMode ( mode ) ) : dispatch ( setThemeMode ( "" ) ) ;
4040 } ;
@@ -44,11 +44,54 @@ const ThemeComp = (props: props) => {
4444 < Drawer className = "theme" title = "主题配置🎨" placement = "right" onClose = { onClose } open = { open } >
4545 < div className = "flx-justify-between" >
4646 < p className = "theme-color" > 主题颜色:</ p >
47- < ColorPicker format = { formatHex } showText value = { themeVal } onFormatChange = { setFormatHex } onChange = { setColorHex } />
47+ < ColorPicker
48+ format = { formatHex }
49+ presets = { [
50+ {
51+ label : "推荐" ,
52+ colors : [
53+ "#000000" ,
54+ "#000000E0" ,
55+ "#000000A6" ,
56+ "#00000073" ,
57+ "#00000040" ,
58+ "#00000026" ,
59+ "#0000001A" ,
60+ "#00000012" ,
61+ "#0000000A" ,
62+ "#00000005" ,
63+ "#F5222D" ,
64+ "#FA8C16" ,
65+ "#FADB14" ,
66+ "#8BBB11" ,
67+ "#52C41A" ,
68+ "#13A8A8" ,
69+ "#1677FF" ,
70+ "#2F54EB" ,
71+ "#722ED1" ,
72+ "#EB2F96" ,
73+ "#F5222D4D" ,
74+ "#FA8C164D" ,
75+ "#FADB144D" ,
76+ "#8BBB114D" ,
77+ "#52C41A4D" ,
78+ "#13A8A84D" ,
79+ "#1677FF4D" ,
80+ "#2F54EB4D" ,
81+ "#722ED14D" ,
82+ "#EB2F964D"
83+ ]
84+ }
85+ ] }
86+ showText
87+ value = { themeVal }
88+ onFormatChange = { setFormatHex }
89+ onChange = { setColorHex }
90+ />
4891 </ div >
4992 < div className = "flx-justify-between" style = { { marginTop : "20px" } } >
5093 < p className = "theme-color" > 重置主题:</ p >
51- < Button type = "primary" style = { { backgroundColor : "#a855f7" } } onClick = { resetTheme } >
94+ < Button type = "primary" style = { { backgroundColor : themeColor } } onClick = { resetTheme } >
5295 重置
5396 </ Button >
5497 </ div >
0 commit comments