Theme, fonts and assets

Choose Theme in the rail. Each project has one theme: nine colour roles and a Theme font. A preview at the top shows them together, and a count shows how many properties on your pages are linked to the theme.

The roles sit under Theme colours, Surfaces & borders and Text & contrast. Change one with Pick colour or by typing a hex value such as #C2372B. Palette starting points offers four palettes, Studio, Violet, Forest and Ocean; applying one updates every linked colour, including in custom components, and leaves fixed colours and your font alone.

In the Inspector, open any colour and choose one of your Theme colours. The field then shows the role's value marked Linked, and follows every later change to that role. A Custom colour stays exactly as you set it when the theme changes.

Many components start out linked: a new Button uses Primary for its background and On primary for its label. Font fields link the same way through Theme font.

The theme reaches App settings too: the launch screen background and the Android icon background can link to a theme colour, and pick up theme changes in your next native build. Sanic AI keeps new work linked when you ask for your theme or turn on Use theme for a request, and changes the theme itself only when you ask it to.

Set the app's typeface with Theme font in the Theme panel. Every font control, there and in the Inspector, opens the same library of 18 bundled families: ten sans serif, such as Inter, Roboto and Poppins; five serif, such as Playfair Display and Lora; and three monospace, such as JetBrains Mono.

• Search by name, filter by Sans serif, Serif or Monospace, and type your own preview text. Each family shows in its own typeface with its number of weights.
• Arrow keys move through the list, Enter chooses and Escape closes it. Browsing changes nothing; only choosing a family does.
• In the Inspector, Inherit follows the parent's text style and Theme font stays linked to your theme.
• Weights differ by family. When a weight is missing, the weight menu says which nearest weight is used.

Choose Assets in the rail. Account library holds the media you have saved, shared by all your projects; In this project holds the copies this project uses. Selecting a library asset adds an independent copy to the project, so later library changes leave the project as it is. The dashboard's Assets section shows the same library, and folders, one level deep, organise it in both places.

Storage is shared by all your projects and comes with your plan: it cannot be bought separately, and credit top-ups do not add to it. SVG and other formats cannot be uploaded. A link must point straight at the file and its host must let your app load it; Appsanic does not download or check linked media. Plans, credits and storage compares the plans.

Select an asset in In this project to open its details. Add to page places it as a new image, video or audio component; with a matching component selected, Use on selection makes it that component's source. Media fields in the Inspector open the same library from Choose from assets, or take a pasted HTTPS address.

• Replace swaps an image's file everywhere the project uses it.
• Used in your app lists the components and app settings that use the asset, and opens each one.
• An asset in use cannot be deleted; unlink it from those components and settings first. Deleting an asset from the project can be undone.
• Attach to Sanic AI adds the asset to the request you are writing.
• Media that a component loads from a direct address appears under Already in your design, where Connect to library makes it a project asset.

The app icon, launch screen image, Google Play feature graphic and store screenshots are project assets too, chosen in App settings. They share the same upload budget, so a full set of large store screenshots will not fit; save large store artwork as an HTTPS link instead.

The generated @appsanic/design module exports your theme and your assets, and both follow your changes in Design. Use an asset's .uri as a React Native image source, or its .ref in a binding for a visual component. Asset keys come from each asset's stable ID, so renaming an asset does not break your code.

import { Image, Text, View } from "react-native";
import { assets, theme } from "@appsanic/design";

export function WelcomeCard() {
  return (
    <View style={{ backgroundColor: theme.surface, borderColor: theme.border, borderWidth: 1, padding: 16 }}>
      <Image source={{ uri: assets.welcomePhoto.uri }} style={{ width: 240, height: 180 }} />
      <Text style={{ color: theme.text }}>Welcome back</Text>
    </View>
  );
}