React Native Mantine › Theming

Theme Customization

Customize colors, typography, and spacing

Import: import { Theme Customization } from 'react-native-mantine';

Usage

import { ThemeProvider, createTheme } from 'react-native-mantine';

const customTheme = createTheme({
  // Set primary color
  primaryColor: 'teal',

  // Configure shade for light/dark modes
  primaryShade: {
    light: 6,  // Teal[6] in light mode
    dark: 8,   // Teal[8] in dark mode
  },

  // Customize typography
  fontFamily: 'Inter',
  fontSizes: {
    xs: 12,
    sm: 14,
    md: 16,
    lg: 18,
    xl: 20,
  },

  // Adjust spacing
  spacing: {
    xs: 8,
    sm: 12,
    md: 16,
    lg: 24,
    xl: 32,
  },

  // Customize border radius
  radius: {
    xs: 4,
    sm: 8,
    md: 12,
    lg: 16,
    xl: 24,
  },
});

export default function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* Your app */}
    </ThemeProvider>
  );
}

Source on GitHub · npm