Skip to main content
A skin is a named set of color tokens that maps to Flutter’s ColorScheme. When you publish a skin, every connected app fetches it on next launch and applies it automatically.

​
Creating a Skin

1

Open your project

Navigate to Projects, select the project you want to add a skin to, then click + Create Skin.
2

Name your skin

Give the skin a descriptive name — for example default, dark_pro, or summer_2026. This name appears in the dashboard and in analytics.
3

Configure the colors

Fill in the color tokens using hex values. FSkin follows the Material color scheme structure:
TokenDescription
primaryMain brand color
secondaryAccent / secondary color
backgroundPage background
surfaceCard and container background
errorError state color
onPrimaryText and icons on primary
onSecondaryText and icons on secondary
onBackgroundText and icons on background
onSurfaceText and icons on surface
onErrorText and icons on error
brightnesslight or dark
4

Save the skin

Click Save. The skin is saved as a draft and won’t affect your app until you publish it.
Use the Clone action on any existing skin to create a variant without starting from scratch. Useful for creating a dark version of your default skin.

​
Publishing a Skin

Publishing makes a skin the active skin for the project. Your Flutter app will fetch this skin on next launch.
  1. Open the project you want to publish a skin for
  2. Click Publish
  3. Confirm the dialog
  4. This will publish the latest version of the currently active skin. To publish a different skin, first open that skin and set it active.
Only one skin can be active per project at a time. Publishing a new skin automatically deactivates the previously active one.
Once published, any Flutter app using this project’s API key will receive the new skin on next launch. Live push updates (SSE) are coming in an upcoming release — until then, changes take effect on app restart.

​
Skin JSON Format

Under the hood, FSkin serves skins as a JSON file from the CDN. This is what your Flutter app fetches: 
{
  "name": "default",
  "version": 1,
  "colors": {
    "primary": "#6C63FF",
    "secondary": "#FF6584",
    "background": "#FFFFFF",
    "surface": "#F9F9FB",
    "error": "#EF4444",
    "onPrimary": "#FFFFFF",
    "onSecondary": "#000000",
    "onBackground": "#0D0D0D",
    "onSurface": "#1C1B1F",
    "onError": "#FFFFFF",
    "brightness": "light"
  }
}
The current alpha supports color tokens only. Typography, spacing, border radii, elevation, and animation tokens are planned for upcoming releases.

​
Upcoming Features

So many exciting features are in the works, just a bit of patience until we can share them 🥸.