Skins

A skin is a named set of color tokens that maps to Flutter’s ColorScheme. When you publish a skin, the FSkin backend pushes the change to all connected app instances via SSE. Apps update in real time — no restart, no re-fetch, no App Store release.

Creating a Skin

Open your project

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

Name your skin

Give the skin a descriptive name — for example default, dark_pro, or summer_2026.

Configure the colors

Fill in the color tokens using hex values. FSkin follows the Material color scheme structure:

Token	Description
`primary`	Main brand color
`secondary`	Accent / secondary color
`background`	Page background
`surface`	Card and container background
`error`	Error state color
`onPrimary`	Text and icons on primary
`onSecondary`	Text and icons on secondary
`onBackground`	Text and icons on background
`onSurface`	Text and icons on surface
`onError`	Text and icons on error
`brightness`	`light` or `dark`

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 and immediately pushes the update to all connected Flutter apps.

Open the project where the skin is saved and click Publish next to the project name.
Review the color tokens
Click Publish
Confirm the dialog

Only one skin can be active per project at a time. Publishing a new skin automatically deactivates the previously active one.

What happens when you publish

You click Publish
        ↓
Skin is marked active in the database
        ↓
FSkin backend detects the change via Supabase Realtime
        ↓
Backend broadcasts SSE event to all connected Flutter apps
        ↓
flutter_skin re-fetches the active skin
        ↓
App re-renders with new colors — no restart needed

The update reaches connected apps in approximately 1–2 seconds after you click Publish. Apps that are backgrounded or closed will receive the new skin on next launch via the normal fetch.

Skin JSON Format

Under the hood, FSkin serves skins as a JSON file. This is what the backend delivers to the Flutter package:

{
  "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.

Getting Started

Dashboard

Package

Creating a Skin

Publishing a Skin

What happens when you publish

Skin JSON Format

​Creating a Skin

​Publishing a Skin

​What happens when you publish

​Skin JSON Format

Creating a Skin

Publishing a Skin

What happens when you publish

Skin JSON Format