xref: /MusicFree/src/pages/setting/settingTypes/themeSetting/background.tsx (revision 41ddce918e1138d8f16e522cc7c19ac86ceca698) 
1import React from "react";
2import { StyleSheet, View } from "react-native";
3import rpx from "@/utils/rpx";
4import ThemeText from "@/components/base/themeText";
5// import pathConst from '@/constants/pathConst';
6import Config from "@/core/config.ts";
7import ThemeCard from "./themeCard";
8import { ROUTE_PATH, useNavigate } from "@/core/router";
9import Theme from "@/core/theme";
10
11export default function Background() {
12
13  const themeBackground = Config.useConfigValue('theme.background');
14  const themeSelectedTheme = Config.useConfigValue('theme.selectedTheme');
15
16    const navigate = useNavigate();
17
18    // const onCustomBgPress = async () => {
19    //     try {
20    //         const result = await launchImageLibrary({
21    //             mediaType: 'photo',
22    //         });
23    //         const uri = result.assets?.[0].uri;
24    //         if (!uri) {
25    //             return;
26    //         }
27
28    //         const bgPath = `${pathConst.dataPath}background${uri.substring(
29    //             uri.lastIndexOf('.'),
30    //         )}`;
31    //         await copyFile(uri, bgPath);
32    //         Config.set(
33    //             'setting.theme.background',
34    //             `file://${bgPath}#${Date.now()}`,
35    //         );
36
37    //         const colorsResult = await ImageColors.getColors(uri, {
38    //             fallback: '#ffffff',
39    //         });
40    //         const colors = {
41    //             primary:
42    //                 colorsResult.platform === 'android'
43    //                     ? colorsResult.dominant
44    //                     : colorsResult.platform === 'ios'
45    //                     ? colorsResult.primary
46    //                     : colorsResult.vibrant,
47    //             average:
48    //                 colorsResult.platform === 'android'
49    //                     ? colorsResult.average
50    //                     : colorsResult.platform === 'ios'
51    //                     ? colorsResult.detail
52    //                     : colorsResult.dominant,
53    //             vibrant:
54    //                 colorsResult.platform === 'android'
55    //                     ? colorsResult.vibrant
56    //                     : colorsResult.platform === 'ios'
57    //                     ? colorsResult.secondary
58    //                     : colorsResult.vibrant,
59    //         };
60    //         const primaryColor = Color(colors.primary).darken(0.3).toString();
61    //         // const secondaryColor = Color(colors.average)
62    //         //   .darken(0.3)
63    //         //   .toString();
64    //         const textHighlight = Color(
65    //             0xffffff - Color(primaryColor).rgbNumber(),
66    //             'rgb',
67    //         )
68    //             .saturate(0.5)
69    //             .toString();
70    //         Config.set('setting.theme.mode', 'custom-dark');
71    //         Config.set('setting.theme.colors', {
72    //             primary: primaryColor,
73    //             textHighlight: textHighlight,
74    //             accent: textHighlight,
75    //         });
76    //     } catch (e) {
77    //         console.log(e);
78    //     }
79    // };
80
81    return (
82        <View>
83            <ThemeText
84                fontSize="subTitle"
85                fontWeight="bold"
86                style={style.header}>
87                主题设置
88            </ThemeText>
89            <View style={style.sectionWrapper}>
90                <ThemeCard
91                    preview="#fff"
92                    title="浅色模式"
93                    selected={themeSelectedTheme === 'p-light'}
94                    onPress={() => {
95                        if (themeSelectedTheme !== 'p-light') {
96                            Theme.setTheme('p-light');
97                            Config.setConfig('theme.followSystem', false);
98                        }
99                    }}
100                />
101                <ThemeCard
102                    preview="#131313"
103                    title="深色模式"
104                    selected={themeSelectedTheme === 'p-dark'}
105                    onPress={() => {
106                        if (themeSelectedTheme !== 'p-dark') {
107                            Theme.setTheme('p-dark');
108                            Config.setConfig('theme.followSystem', false);
109                        }
110                    }}
111                />
112
113                <ThemeCard
114                    title="自定义背景"
115                    selected={themeSelectedTheme === 'custom'}
116                    preview={themeBackground}
117                    onPress={() => {
118                        if (themeSelectedTheme !== 'custom') {
119                            Config.setConfig('theme.followSystem', false);
120                            Theme.setTheme('custom', {
121                                colors: Config.getConfig(
122                                    'theme.customColors',
123                                ),
124                            });
125                        }
126                        navigate(ROUTE_PATH.SET_CUSTOM_THEME);
127                        // showPanel('ColorPicker');
128                    }}
129                />
130
131                {/* <ImageCard
132                    emptySrc={ImgAsset.backgroundDefault}
133                    onPress={() => {
134                        Config.set('setting.theme.background', undefined);
135                        Config.set('setting.theme.colors', undefined);
136                    }}
137                />
138                <ImageCard
139                    uri={theme?.background}
140                    emptySrc={ImgAsset.addBackground}
141                    onPress={onCustomBgPress}
142                /> */}
143            </View>
144        </View>
145    );
146}
147
148const style = StyleSheet.create({
149    header: {
150        marginTop: rpx(36),
151        paddingLeft: rpx(24),
152    },
153    sectionWrapper: {
154        marginTop: rpx(28),
155        flexDirection: 'row',
156        flexWrap: 'wrap',
157        paddingHorizontal: rpx(24),
158    },
159});
160