Color Selector

The Color Selector lets you assign colors to any grid object property. Open it by tapping any color field in the Inspector.

Pre-Designed Palettes

MetaGrid Pro includes 8 built-in color palettes:

• Gray Scale
• Dark
• Low
• Faded
• Saturated
• Vibrant
• Bright
• Light

Each palette provides coordinated accent and background colors for consistent styling across grid objects.

Custom Palettes

You can create your own palettes using hex values or the color picker.

Create a New Palette

Tap a color option (e.g., background, border, text, icon) in the Inspector's Color section. Go to Custom Palettes, tap Edit, and tap the plus icon. A new palette starts with a single gray swatch.

Reorder Palettes

Drag the 3-line indicator next to a palette in the Palette Editor.

Delete a Palette

Tap the red minus icon, then confirm with Delete in the Palette Editor.

Edit Colors Within a Palette

• Add a color: Tap the pencil icon in the Color Editor and select Add New Color.
• Edit a color: Tap its hex value and enter a new hex code, or use the eyedropper to pick a color from the Color Picker.
• Reorder colors: Drag the indicator in the Color Editor.
• Delete a color: Tap the red minus icon and confirm with Delete.
• Color Picker: Tap the picker icon for visual color selection.
• Add Current Color: Adds the color currently assigned to the selected object property as a palette swatch.

Share Custom Palettes

Export and import custom palettes via Dropbox or the iOS share menu to transfer color schemes between devices or users. Custom palettes are also included in MetaGrid Pro backup files and restore automatically when recovering from a backup.

Replace Colors Across a Grid

You can replace a specific color across an entire grid for consistent updates.

Step 1: Select the Object

Enter Edit Mode and tap the object containing the color you want to replace.

Step 2: Locate the Color Parameter

In the Inspector, scroll to the parameter with the color to replace (e.g., Background Color, Text Color).

Step 3: Open the Color Selector

Tap the color swatch to open the Color Selector, then tap Replace.

Step 4: Select the Target Color

Choose the new color to apply.

Step 5: Choose the Replacement Scope

• Replace in Specific Parameter: Replaces the source color with the target color in the selected parameter across all objects on the grid.
• Replace in All: Replaces the source color with the target color across all parameters and all objects on the grid.

The replacement applies instantly.

Custom Icons

You can use your own icons on buttons. MetaGrid Pro loads custom icons from either your local drive or iCloud Drive.

Select the Icon Source

Open Settings > Custom Icons > Select Icon Source and choose one:

• Local Drive: Path defined in MetaServer > Files > Custom Icons on your Mac or PC.
• iCloud Drive: Stored in iCloud Drive > MetaGrid Pro > Custom Icons.

Pro Tip: Use iCloud Drive for reliable synchronization across devices.

Prepare Your Icons

• Format: .png only
• Shape: Square aspect ratio (e.g., 128x128, 192x192, or 256x256 pixels)
• Recommended size: Up to 256x256 px
• Background: Transparent, so MetaGrid Pro can apply tinting
• Folders: You can create subfolders 1 level deep (e.g., Custom Icons/Buttons, but not Custom Icons/Buttons/Transport)

Tint Custom Icons

1. Open the Inspector for a button.
2. In the Icon section, toggle Custom Image Should Be Tinted.
3. Choose your tint color.

Important: Tinting requires a transparent background. Opaque icons will not respond to color changes.

Best Practices

• Use consistent icon sizes for a uniform appearance across grids.
• Keep filenames descriptive (e.g., PlayButton.png, VolumeUp.png).
• When updating icons, keep the same filename to avoid broken links in existing buttons.
• Store icons in iCloud Drive if you work across multiple devices or share grids with other users.