Skip to main content

useMultinaireTheme

Access theme colors, fonts, and variables in any component.

Usage​

import { useMultinaireTheme } from '@multinaire/multinaire-design';

function MyComponent() {
  const { colors, fonts, variables, themeMode, changeThemeMode } =
    useMultinaireTheme();

  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text style={[fonts.body.regular, { color: colors.onBackground }]}>
        Hello
      </Text>
    </View>
  );
}

Return Value​

PropertyTypeDescription
colorsColorSchemeCurrent theme colors (light or dark)
fontsTextSchemeTypography styles with font families
variablesVariableSchemeSpacing, sizing, and other tokens
themeMode'system' | 'light' | 'dark'Current theme mode setting
changeThemeMode(mode) => voidFunction to change theme mode

Colors​

const { colors } = useMultinaireTheme();

// Primary colors
colors.primary        // Brand primary
colors.primaryVariant // Hover/pressed state
colors.onPrimary      // Text on primary

// Background colors
colors.background        // Main background
colors.backgroundVariant // Cards, inputs
colors.onBackground      // Primary text

// Semantic colors
colors.success
colors.warning
colors.error

Fonts​

const { fonts } = useMultinaireTheme();

// Categories: display, heading, subheading, title, body, caption
// Weights: regular, medium, bold

fonts.heading.bold    // { fontFamily: 'OpenSans-bold', fontSize: 20 }
fonts.body.regular    // { fontFamily: 'OpenSans-regular', fontSize: 14 }
fonts.display.medium  // { fontFamily: 'DancingScript-medium', fontSize: 24 }

Variables​

const { variables } = useMultinaireTheme();

// Sizes: small, medium, large

variables.height.medium  // 40
variables.padding.medium // 16
variables.radius.medium  // 20
variables.gap.medium     // 8
variables.stroke.medium  // 1

Theme Mode​

const { themeMode, changeThemeMode } = useMultinaireTheme();

// Check current mode
console.log(themeMode); // 'system', 'light', or 'dark'

// Change mode
changeThemeMode('dark');
changeThemeMode('light');
changeThemeMode('system');

useMultinaireThemeMode​

Returns the resolved theme, accounting for system preference:

import { useMultinaireThemeMode } from '@multinaire/multinaire-design';

function MyComponent() {
  const resolvedTheme = useMultinaireThemeMode();
  // Always returns 'light' or 'dark', never 'system'

  return <Text>Current theme: {resolvedTheme}</Text>;
}