xtablo-source/xtablo-expo/constants/Colors.ts
2025-07-18 23:10:09 +02:00

52 lines
1.3 KiB
TypeScript

/**
* Below are the colors that are used in the app. The colors are defined in the light and dark mode.
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
*/
const tintColorLight = "#0a7ea4";
const tintColorDark = "#fff";
export const Colors = {
light: {
text: "#11181C",
background: "#fff",
tint: tintColorLight,
icon: "#687076",
tabIconDefault: "#687076",
tabIconSelected: tintColorLight,
},
dark: {
text: "#ECEDEE",
background: "#151718",
tint: tintColorDark,
icon: "#9BA1A6",
tabIconDefault: "#9BA1A6",
tabIconSelected: tintColorDark,
},
};
export const AVAILABLE_COLORS = [
"bg-blue-500",
"bg-green-500",
"bg-purple-500",
"bg-red-500",
"bg-yellow-500",
"bg-indigo-500",
"bg-pink-500",
"bg-teal-500",
"bg-orange-500",
"bg-cyan-500",
];
export const ColorMap: Record<(typeof AVAILABLE_COLORS)[number], string> = {
"bg-blue-500": "#3b82f6",
"bg-green-500": "#10b981",
"bg-red-500": "#ef4444",
"bg-yellow-500": "#f59e0b",
"bg-purple-500": "#8b5cf6",
"bg-pink-500": "#ec4899",
"bg-orange-500": "#f97316",
"bg-teal-500": "#0d9488",
"bg-indigo-500": "#6366f1",
"bg-cyan-500": "#06b6d4",
};