Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 30x 30x 30x 30x 30x 30x 30x 13x 13x 13x 2x 11x 13x 13x 5x 8x 13x 13x 13x 13x 5x 8x 13x 13x 30x 807x 807x 793x 14x | /// <reference types="nativewind/types" />
import React, { createContext, useContext, useMemo } from "react";
import { useColorScheme, View } from "react-native";
import { lightAssets, lightV2Assets } from "./assets";
import { darkColors, darkV2Colors, lightColors, lightV2Colors } from "./colors";
import { metrics } from "./metrics";
import { Theme, ThemeMode } from "./types";
import { textStyles } from "./typography";
import { createThemeVars } from "./utils";
export const themeVars = {
light: createThemeVars(lightColors),
dark: createThemeVars(darkColors),
lightV2: createThemeVars(lightV2Colors),
darkV2: createThemeVars(darkV2Colors),
};
export const lightTheme: Theme = {
colors: lightColors,
metrics,
typography: textStyles,
assets: lightAssets,
isDark: false,
isNewTheme: false,
};
export const darkTheme: Theme = {
colors: darkColors,
metrics,
typography: textStyles,
assets: lightAssets,
isDark: true,
isNewTheme: false,
};
export const lightV2Theme: Theme = {
colors: lightV2Colors,
metrics,
typography: textStyles,
assets: lightV2Assets,
isDark: false,
isNewTheme: true,
};
export const darkV2Theme: Theme = {
colors: darkV2Colors,
metrics,
typography: textStyles,
assets: lightV2Assets,
isDark: true,
isNewTheme: true,
};
interface ThemeContextValue {
theme: Theme;
mode: ThemeMode;
resolvedMode: "light" | "dark";
isDark: boolean;
isNewTheme: boolean;
}
export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
export const ThemeProvider: React.FC<{
children: React.ReactNode;
mode?: ThemeMode;
isNewTheme?: boolean;
}> = ({ children, mode: overrideMode = "system", isNewTheme = false }) => {
const systemScheme = useColorScheme();
const resolvedMode = useMemo((): "light" | "dark" => {
if (overrideMode === "system") {
return systemScheme === "dark" ? "dark" : "light";
}
return overrideMode === "dark" ? "dark" : "light";
}, [overrideMode, systemScheme]);
const theme = useMemo(() => {
if (isNewTheme) {
return resolvedMode === "dark" ? darkV2Theme : lightV2Theme;
}
return resolvedMode === "dark" ? darkTheme : lightTheme;
}, [resolvedMode, isNewTheme]);
const value = useMemo(
() => ({
theme,
mode: overrideMode,
resolvedMode,
isDark: resolvedMode === "dark",
isNewTheme,
}),
[theme, overrideMode, resolvedMode, isNewTheme],
);
const activeVarsKey = useMemo((): keyof typeof themeVars => {
if (isNewTheme) {
return resolvedMode === "dark" ? "darkV2" : "lightV2";
}
return resolvedMode;
}, [resolvedMode, isNewTheme]);
const activeVars = themeVars[activeVarsKey] ?? themeVars.light;
return (
<ThemeContext.Provider value={value}>
<View style={activeVars} className="flex-1">
{children}
</View>
</ThemeContext.Provider>
);
};
export const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) {
return {
theme: lightTheme,
mode: "light" as ThemeMode,
resolvedMode: "light" as const,
isDark: false,
isNewTheme: false,
};
}
return context;
};
|