React Native Mantine › Theming

Color Palette

Complete color system aligned with Mantine web

Import: import { Color Palette } from 'react-native-mantine';

Usage

import { Badge, Text, Paper } from 'react-native-mantine';

// Use color prop
<Badge color="green">Success</Badge>
<Text color="blue">Blue text</Text>

// Access theme colors programmatically
import { useTheme } from 'react-native-mantine';

function MyComponent() {
  const theme = useTheme();

  return (
    <View style={{
      backgroundColor: theme.colors.blue[6]
    }}>
      <Text>Blue background</Text>
    </View>
  );
}

// Available colors:
// blue, cyan, teal, green, lime,
// yellow, orange, red, pink,
// grape, violet, indigo, dark, gray

// Each color has shades 0-9:
// theme.colors.blue[0]  // Lightest
// theme.colors.blue[6]  // Default
// theme.colors.blue[9]  // Darkest

Source on GitHub · npm