import AsyncStorage from "@react-native-async-storage/async-storage"; import React, { createContext, useEffect, useMemo, useState } from "react"; import { StatusBar, useColorScheme } from "react-native"; import { vscodeThemes } from "./themes"; const defaultDarkThemeName = "Solarized (dark)"; const defaultLightThemeName = "Solarized (dark)"; const defaultThemeLight = vscodeThemes.find( (t) => t.name === defaultLightThemeName )!.colors!; const defaultThemeDark = vscodeThemes.find( (t) => t.name === defaultDarkThemeName )!.colors!; type Theme = typeof defaultThemeLight; export const ThemeContext = createContext<[Theme, (t: string) => void]>([ defaultThemeLight, () => {}, ] as any); interface ThemeProviderProps {} const themeKey = "@vsinder/theme-key"; export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => { const _colorScheme = useColorScheme(); const colorScheme = _colorScheme || "light"; const [themePref, setThemePref] = useState({}); const [colors, setColors] = useState( colorScheme === "dark" ? defaultThemeDark : defaultThemeLight ); useEffect(() => { AsyncStorage.getItem(themeKey).then((x) => { if (x) { const themeOfChoice = JSON.parse(x); setThemePref(x); const name = themeOfChoice[colorScheme] || (colorScheme === "dark" ? defaultDarkThemeName : defaultLightThemeName); const c = vscodeThemes.find((t) => t.name === name)?.colors; if (c) { setColors(c); } } }); }, []); return ( <ThemeContext.Provider value={useMemo( () => [ colors, (name) => { const c = vscodeThemes.find((t) => t.name === name)?.colors; if (c) { setColors(c); const newThemePref = { ...themePref, [colorScheme]: name, }; setThemePref(newThemePref); AsyncStorage.setItem(themeKey, JSON.stringify(newThemePref)); } }, ], [colors, colorScheme, themePref] )} > <StatusBar barStyle={ colors.editorBackground === "#002B36" ? "light-content" : colorScheme === "dark" ? "light-content" : "dark-content" } /> {children} </ThemeContext.Provider> ); };