Skip to main content
Where to find this: Dashboard → App Builder → Settings → Design
CoachIQ Athlete Portal design settings with theme and color options

​
What you’ll accomplish

Customize your Athlete Portal’s visual appearance to match your brand. You’ll configure the theme (dark or light mode), set your primary brand color, and customize button text colors.

​
Accessing design settings

1

Navigate to App Builder

From your dashboard, select App in the left sidebar.
2

Go to Settings

Click on Settings in the navigation menu.
3

Select Design

Choose Design to access your portal’s visual customization options.

​
Configuring your design

​
Theme selection

1

Choose your theme

Under Theme, select the sun or moon button (labeled Light theme and Dark theme on hover and for screen readers):
  • Light mode - Clean, bright interface ideal for daytime use
  • Dark mode - Reduced eye strain, modern appearance
Design Settings Portal
2

Preview changes

Your selection updates the preview immediately. Athletes will see this theme when they access your portal.

​
Brand colors

CoachIQ Athlete Portal color picker for selecting brand colors
1

Set Primary Color

Click the Primary Color selector and choose your main brand color. This affects:
  • Navigation highlights
  • Active buttons
  • Links and accents
  • Selected items
Use your hex code (e.g., #ff0000) for exact brand matching.
2

Set Button Text Color

Choose the Primary Button Text Color to ensure readable text on your buttons.
  • Use white (#ffffff) for dark primary colors
  • Use black (#000000) for light primary colors
If the two colors are too similar, a warning appears under the button text color: “Low contrast: button text may be hard to read.” It’s only a warning; you can still save your choice. White and near-white color dots have a visible edge so you can tell them apart from the background.

​
Saving your design

1

Review your choices

Check that your theme and colors work well together.
2

Update Design

Click Update Design to save and apply your changes.
Changes apply immediately. Athletes see the new design on their next login or refresh, and visitors see your saved colors and theme from the first page load.

​
How your colors and logo are kept readable

Your app adjusts a few small details so your branding stays legible without changing your saved settings:
  • Close to the background: When your primary color is too close to the app background (for example dark navy on the Dark theme, or gold on the Light theme), profile initials, the selected sidebar icon and text shown in your brand color use a lighter or darker shade of the same color. Buttons keep the exact color you saved.
  • Wide logos: A logo more than twice as wide as it is tall shows as your organization’s initials in small square spots, such as the Direct Message row. The full logo stays in the header.
  • No logo: Organizations without a logo get a proper browser tab icon.
  • Logo changes refresh across every group in your organization.

​
Design best practices

Color contrast: Ensure your primary color and button text color have sufficient contrast for readability. Test with both themes if you allow athletes to switch.
Brand consistency: Use the exact hex codes from your brand guidelines to maintain professional consistency across all touchpoints.
Theme selection: Consider your primary user base - dark mode works well for early morning/evening training apps, while light mode is ideal for daytime facilities.

​
Common questions

No, the theme you select applies to all athletes. This ensures brand consistency across your portal.
You can:
  • Ask your designer for brand hex codes
  • Use online color pickers
  • Extract colors from your logo using free tools
  • Common format: #ff0000 (red) or #000000 (black)
No, these settings only apply to your Athlete Portal (App Builder). Website design is configured separately in Website Builder.
The primary color applies globally throughout the portal. Individual section customization is not currently available.