Xgenious/ docs
Products
Get support

Theme Colors

Brand theme colors — emerald primary, backgrounds, cards, text, and alerts — are defined centrally. Edit them to match your brand palette; both light and dark modes update automatically.

File

lib/customizations/colors.dart

Example

// Primary Accent Color (Default Emerald Green for Provider)
const Color primaryColor = Color(0xFF007549); // Change to your brand color
Color get mutedPrimaryColor => primaryColor.withOpacity(.2);

// Light Theme Color Model
final ColorModel lightColors = ColorModel(
  backgroundColor: const Color(0xFFF5F5F5),
  primaryContrastColor: const Color(0xFF0F172A),
  accentContrastColor: const Color(0xFFFFFFFF),
  primarySuccessColor: const Color(0xFF22C55E),
  primaryWarningColor: const Color(0xFFEF4444),
  cardFillColor: const Color(0xFFFFFFFF),
  inputFillColor: const Color(0xFFCBD5E1),
  // ...
);

// Dark Theme Color Model
final ColorModel darkColors = ColorModel(
  backgroundColor: const Color(0xFF0D0F11),
  primaryContrastColor: const Color(0xFFBEBEBE),
  accentContrastColor: const Color(0xFF191D23),
  // ...
);

Steps

  1. Open lib/customizations/colors.dart.
  2. Replace primaryColor (0xFF007549) with your brand hex. mutedPrimaryColor derives automatically at 20% opacity.
  3. Adjust lightColors and darkColors fields as needed (background, card, input fills, and semantic success/warning colors).
  4. Rebuild to preview. Verify contrast in dark mode.
Note

Tip: Keep emerald derivatives for provider status badges (success/warning) unless rebranding semantics.

Still stuck?
Our support team is ready to help you get set up.
Get support