Value 'transparent' does not exist in theme['colors']

[Prabhakar Bhat]

The code:

const defaultTheme = createTheme({
  colors: {
    bg: '#f1f5f9',
    onBg: '#94a3b8',
    onBgBorder: '#e2e8f0',
    card: '#f8fafc',
    onCard: '#475569',
    onCardBorder: '#f1f5f9',
    accent: '#f97316',
    onAccent: '#fff7ed',
    error: '#ef4444',
    onError: '#fef2f2',
    success: '#4ade80',
    onSuccess: '#f0fdf4',
    alert: '#facc15',
    onAlert: '#fefce8',
  },
  spacing: {
    smallGap: 4,
    listItems: 12,
    container: 16,
  },
  breakpoints: {
    phone: 0,
    tablet: 768,
  },
  textVariants: {
    largeTitle: isAndroid ? material.display1Object : human.largeTitleObject,
    title: isAndroid ? material.titleObject : human.title3Object,
    body: isAndroid ? material.body1Object : human.bodyObject,
    strongBody: isAndroid ? material.body2Object : human.headlineObject,
    caption: isAndroid ? material.captionObject : human.caption1Object,
  },
});

const darkTheme = createTheme({
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    bg: '#0f172a',
    onBg: '#cbd5e1',
    onBgBorder: '#64748b',
    card: '#334155',
    onCard: '#e2e8f0',
    onCardBorder: '#64748b',
  },
});

export type Theme = typeof defaultTheme;
export const Box = createBox<Theme>();
export const Text = createText<Theme>();

const AppTheme: React.FC = ({ children }) => {
  const colorScheme = useColorScheme();
  const theme = colorScheme === 'dark' ? darkTheme : defaultTheme;
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

// In a component
<Text variant="title" color="onAccent">
    Content here
</Text>

This throws:

Value 'transparent' does not exist in theme['colors']

[Prabhakar Bhat]

It was happening because I was using https://github.com/hectahertz/react-native-typography which adds backgroundColor: transparent, color: #000000 property to all of its text styles. Omitting those while adding text variants removed the error.