React Native Mantine › Theming

Color Manipulation

Theme functions: lighten, darken, dimmed

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

Usage

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

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

  // Lighten a color (makes it lighter)
  const lighterBlue = theme.fn.lighten(
    theme.colors.blue[6],
    0.2  // 20% lighter
  );

  // Darken a color (makes it darker)
  const darkerBlue = theme.fn.darken(
    theme.colors.blue[6],
    0.2  // 20% darker
  );

  // Get dimmed text color
  const dimmedColor = theme.fn.dimmed();

  return (
    <View style={{ backgroundColor: lighterBlue }}>
      <Text style={{ color: dimmedColor }}>
        Secondary text
      </Text>
    </View>
  );
}

// Or use color prop directly
<Text color="dimmed">Dimmed text</Text>

Source on GitHub · npm