Brand Colors & Theme

Personalizing Your Colors

FitSuite lets you customize the color scheme your clients see in the app. Match the look and feel to your brand so everything — from buttons to progress charts — feels cohesive and professional.

Setting Your Colors

Go to Settings > Branding > Colors to access the theme editor. You can customize:

• Primary color — used for buttons, links, and key interface elements
• Accent color — used for highlights, badges, and secondary actions
• Background tint — a subtle wash applied to the app background for a branded feel

Enter a hex code directly or use the color picker. FitSuite automatically generates complementary shades (hover states, disabled states, text contrast) from your chosen colors so you don’t have to fine-tune every element.

Real-Time Preview

As you adjust colors, a live preview panel on the right shows exactly how the client app will look. Toggle between different screens — home, workout view, check-in form — to make sure everything reads well before saving.

Dark Mode Support

FitSuite supports dark mode, and your brand colors adapt automatically. The system adjusts brightness and contrast so your primary color works on both light and dark backgrounds. You can preview both modes in the editor.

💡 Tip: Avoid very light primary colors — they tend to disappear on white backgrounds and look washed out. Bold, saturated tones work best across both themes.

Resetting to Defaults

If you want to start over, click Reset to Defaults at the bottom of the color editor. This reverts to the standard FitSuite theme without affecting your logo or other branding settings.