Live Theme Editor

Craft a Flutter theme like a product designer

Tune tokens with real-time preview, switch between light and dark instantly, and export production-ready theme output for your Flutter app.

Theme name

Token Panels

primary

100

200

300

400

500

600

700

800

900

secondary

100

200

300

400

500

600

700

800

900

success

100

200

300

400

500

600

700

800

900

warning

100

200

300

400

500

600

700

800

900

danger

100

200

300

400

500

600

700

800

900

muted

100

200

300

400

500

600

700

800

900

border

100

200

300

400

500

600

700

800

900

{
  "name": "Flutty Theme",
  "light": {
    "colors": {
      "primary": "#6A459A",
      "secondary": "#FFEE99",
      "success": "#22C55E",
      "warning": "#F59E0B",
      "danger": "#EF4444",
      "background": "#FFFFFF",
      "foreground": "#0F172A",
      "muted": "#64748B",
      "border": "#E2E8F0"
    },
    "radius": {
      "sm": 6,
      "md": 10,
      "lg": 14,
      "full": 999
    },
    "typography": {
      "fontFamily": "Inter",
      "baseSize": 14,
      "lineHeight": 1.5,
      "fontWeightRegular": 400,
      "fontWeightMedium": 500,
      "fontWeightBold": 700
    },
    "spacing": {
      "xs": 4,
      "sm": 8,
      "md": 12,
      "lg": 16,
      "xl": 24,
      "2xl": 32
    },
    "shadows": {
      "sm": "0px 1px 2px 0px rgba(0,0,0,0.06)",
      "md": "0px 6px 18px 0px rgba(0,0,0,0.12)",
      "lg": "0px 16px 48px 0px rgba(0,0,0,0.18)"
    }
  },
  "dark": {
    "colors": {
      "primary": "#9F7AEA",
      "secondary": "#FFEE99",
      "success": "#22C55E",
      "warning": "#F59E0B",
      "danger": "#EF4444",
      "background": "#0B1220",
      "foreground": "#E5E7EB",
      "muted": "#9CA3AF",
      "border": "#1F2937"
    },
    "radius": {
      "sm": 6,
      "md": 10,
      "lg": 14,
      "full": 999
    },
    "typography": {
      "fontFamily": "Inter",
      "baseSize": 14,
      "lineHeight": 1.5,
      "fontWeightRegular": 400,
      "fontWeightMedium": 500,
      "fontWeightBold": 700
    },
    "spacing": {
      "xs": 4,
      "sm": 8,
      "md": 12,
      "lg": 16,
      "xl": 24,
      "2xl": 32
    },
    "shadows": {
      "sm": "0px 1px 2px 0px rgba(0,0,0,0.4)",
      "md": "0px 6px 18px 0px rgba(0,0,0,0.5)",
      "lg": "0px 16px 48px 0px rgba(0,0,0,0.6)"
    }
  },
  "componentSizes": {
    "avatar": 40,
    "icon": 20,
    "checkbox": 18
  }
}

Theme Preview

Flutty Theme

Flutter UI

Ready

Weekly Product Launch

4 days left

Components

210+

Template screens

Theme tokens

Loading theme generator...