React Native Mantine › Theming

Color Scheme Constants

Color scheme-aware constants using colorSchemeValue

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

Usage

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

// Define constants with different light/dark values
const appColors = {
  text: colorSchemeValue('#000', '#fff'),
  background: colorSchemeValue('#FCFCFC', '#272727'),
  primaryButtonBackground: colorSchemeValue('#00203E', '#2581C4'),
  primaryButtonText: 'white', // Fixed value
};

// In your component
const theme = useTheme();
const colors = theme.fn.colorSchemeConstants(appColors);

// Use the resolved colors
<View style={{ backgroundColor: colors.background }}>
  <Text style={{ color: colors.text }}>
    Adapts to light/dark mode!
  </Text>
</View>

Source on GitHub · npm