Skip to main content

Theme Overview

The Multinaire Design theme system provides a consistent way to style your application across all platforms.

Theme Structure​

A theme consists of three main parts:

{
  "colors": { /* Light and dark color schemes */ },
  "texts": { /* Typography definitions */ },
  "variables": { /* Spacing, sizing, and other tokens */ }
}

Colors​

Define semantic colors for both light and dark modes:

  • Primary: App brand color
  • Secondary: Multinaire brand color
  • Background/Base: Surface colors for screens and cards
  • Neutral: Text and icon colors
  • Semantic: Success, warning, error states

Learn more about colors →

Typography​

Six text categories with three weight variants each:

  • Display: Brand text, decorative headers
  • Heading: Page titles, section headers
  • Subheading: Card headers, secondary titles
  • Title: List items, button labels
  • Body: Content text, paragraphs
  • Caption: Helper text, timestamps

Learn more about typography →

Variables​

Design tokens for consistent spacing:

  • Height: Component heights (buttons, inputs)
  • Radius: Border radius values
  • Padding: Internal spacing
  • Stroke: Border widths
  • Gap: Spacing between elements

Learn more about variables →

Accessing Theme Values​

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

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

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

Theme Mode​

The design system supports three theme modes:

  • 'system': Follows device settings (default)
  • 'light': Always light mode
  • 'dark': Always dark mode
const { themeMode, changeThemeMode } = useMultinaireTheme();

// Switch to dark mode
changeThemeMode('dark');

// Follow system
changeThemeMode('system');

Creating Your Theme​

Use the Theme Builder for visual theme creation, or create a JSON file manually following the theme setup guide.