Skip to main content

Theme Setup

Creating a Theme File​

1. Using the Theme Builder​

The easiest way to create a theme is using the Theme Builder. It provides:

  • Visual color picker with light/dark mode preview
  • Typography customization
  • Variable adjustments
  • Export to JSON, Tailwind CSS, and global.css formats

Add theme.json file exported from Theme Builder to your assets directory.

2. Manually​

Create a theme.json file in your assets directory:

{
  "$schema": "https://raw.githubusercontent.com/multinaire/multinaire-design/main/src/theme/theme.schema.json",
  "colors": {
    "light": {
      "primary": "#ED7030",
      "primaryVariant": "#CB5A23",
      "onPrimary": "#FFFFFF",
      "secondary": "#1842BD",
      "secondaryVariant": "#03164E",
      "onSecondary": "#ECF1FF",
      "background": "#FBFBFB",
      "backgroundVariant": "#F1F1F1",
      "onBackground": "#121212",
      "neutral": "#505050",
      "neutralVariant": "#6D6D6D",
      "onNeutral": "#FFFFFF",
      "base": "#FFFFFF",
      "baseVariant": "rgba(80, 80, 80, 0.5)",
      "onBase": "#000000",
      "success": "#43DF49",
      "warning": "#FFB300",
      "error": "#D32F2F"
    },
    "dark": {
      "primary": "#ED7030",
      "primaryVariant": "#CB5A23",
      "onPrimary": "#FFFFFF",
      "secondary": "#6881FA",
      "secondaryVariant": "#364FC7",
      "onSecondary": "#ECF1FF",
      "background": "#121212",
      "backgroundVariant": "#1B1B1B",
      "onBackground": "#E0E0E0",
      "neutral": "#B0B0B0",
      "neutralVariant": "#8D8D8D",
      "onNeutral": "#FFFFFF",
      "base": "#181818",
      "baseVariant": "rgba(40, 40, 40, 0.5)",
      "onBase": "#FFFFFF",
      "success": "#3BC14A",
      "warning": "#FFC107",
      "error": "#F44336"
    }
  },
  "texts": {
    "display": {
      "regular": { "fontFamily": "DancingScript", "fontSize": 24 },
      "medium": { "fontFamily": "DancingScript", "fontSize": 24 },
      "bold": { "fontFamily": "DancingScript", "fontSize": 24 }
    },
    "heading": {
      "regular": { "fontFamily": "OpenSans", "fontSize": 20 },
      "medium": { "fontFamily": "OpenSans", "fontSize": 20 },
      "bold": { "fontFamily": "OpenSans", "fontSize": 20 }
    },
    "subheading": {
      "regular": { "fontFamily": "OpenSans", "fontSize": 18 },
      "medium": { "fontFamily": "OpenSans", "fontSize": 18 },
      "bold": { "fontFamily": "OpenSans", "fontSize": 18 }
    },
    "title": {
      "regular": { "fontFamily": "OpenSans", "fontSize": 16 },
      "medium": { "fontFamily": "OpenSans", "fontSize": 16 },
      "bold": { "fontFamily": "OpenSans", "fontSize": 16 }
    },
    "body": {
      "regular": { "fontFamily": "OpenSans", "fontSize": 14 },
      "medium": { "fontFamily": "OpenSans", "fontSize": 14 },
      "bold": { "fontFamily": "OpenSans", "fontSize": 14 }
    },
    "caption": {
      "regular": { "fontFamily": "OpenSans", "fontSize": 12 },
      "medium": { "fontFamily": "OpenSans", "fontSize": 12 },
      "bold": { "fontFamily": "OpenSans", "fontSize": 12 }
    }
  },
  "variables": {
    "height": { "small": 32, "medium": 40, "large": 100 },
    "radius": { "small": 16, "medium": 20, "large": 100 },
    "padding": { "small": 12, "medium": 16, "large": 24 },
    "stroke": { "small": 0.5, "medium": 1, "large": 2 },
    "gap": { "small": 4, "medium": 8, "large": 12 }
  }
}
IDE Support Adding the $schema property enables autocompletion and validation in VS Code and other editors.

TypeScript Configuration​

To import JSON files, ensure your tsconfig.json has:

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

Configure the Provider​

import { MultinaireDesignProvider } from '@multinaire/multinaire-design';
import theme from './assets/theme.json';

export default function App() {
  return (
    <MultinaireDesignProvider theme={theme}>
      {/* Your app */}
    </MultinaireDesignProvider>
  );
}

Using Theme​

Use the useMultinaireTheme hook to access theme values in any component:

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}>Hello World</Text>
    </View>
  );
}

Next Steps​

  • Colors - Understanding the color system
  • Typography - Configuring fonts and text styles
  • Variables - Spacing and sizing tokens