React Native Mantine › Theming

Primary Color System

primaryColor and primaryShade configuration

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

Usage

import { useTheme } from 'react-native-mantine';

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

  // Get primary color at current shade
  // In light mode: returns blue[6]
  // In dark mode: returns blue[8]
  const primaryColor = theme.fn.primaryColor();

  // Get primary color for specific color scheme
  const lightPrimary = theme.fn.primaryColor('light');
  const darkPrimary = theme.fn.primaryColor('dark');

  // Get current primary shade
  const shade = theme.fn.primaryShade();
  // Returns 6 in light mode, 8 in dark mode

  // Get shade for specific color scheme
  const lightShade = theme.fn.primaryShade('light');  // 6
  const darkShade = theme.fn.primaryShade('dark');    // 8

  return (
    <View style={{ backgroundColor: primaryColor }}>
      <Text>Using primary color</Text>
    </View>
  );
}

Source on GitHub · npm