1function ThemeProvider({ children }) {
2  const [theme, setTheme] = useState({
3    mode: 'light',
4    primary: '#007AFF',
5    secondary: '#5856D6'
6  });
7
8  const toggleTheme = () => {
9    setTheme(prevTheme => ({
10      ...prevTheme,
11      mode: prevTheme.mode === 'light' ? 'dark' : 'light',
12      primary: prevTheme.mode === 'light' ? '#0A84FF' : '#007AFF',
13      secondary: prevTheme.mode === 'light' ? '#5E5CE6' : '#5856D6'
14    }));
15  };
16
17  const value = {
18    theme,
19    toggleTheme,
20  };
21
22  return (
23    <ThemeContext.Provider value={value}>
24      {children}
25    </ThemeContext.Provider>
26  );
27}
28
29function Button({ children }) {
30  const { theme } = useContext(ThemeContext);
31  
32  return (
33    <button style={{ backgroundColor: theme.primary }}>
34      {children}
35    </button>
36  );
37}