10.21. Set Interface Themes, Dark Mode, and White-Label Branding

An MSP's interface has to remain readable through long dispatch, billing, and ticket sessions. Branding also needs to make it clear that staff are working in their MSP's application.

Open Settings > Organization & Access > Appearance to configure appearance. The page is available in Enterprise Edition. It provides nine predefined matched light and dark theme pairs, plus controls for a Custom theme, contrast checking, white-labeling, square and wide logo variants, and a browser icon.

Choose a matched theme pair

AlgaPSA states the division of control on the page itself: you pick the light/dark pair everyone in the organization sees, across both the MSP app and the client portal, and each person still chooses light, dark, or system for themselves. So the theme decision is a brand decision, not a per-user preference you have to police.

Each predefined theme is a pair: one light presentation and one corresponding dark presentation. The picker previews both variants for every pair. The nine pairs are Alga, Slate, Ocean, Sky, Forest, Sunset, Cappuccino, Vice, and High contrast. Custom appears as a tenth card in the same picker, captioned "Your own colors, edited below" — it is not one of the nine predefined pairs, but you choose it the same way.

Figure 1: Each card previews the light and dark variant together, so you approve the pair rather than a single screen.

When selecting a theme, evaluate it with the work your team performs most often:

1. Open representative ticket, client, project, and billing views.
2. Review dense tables as well as forms, alerts, and status indicators.
3. Change between the light and dark counterparts.
4. Confirm that the visual hierarchy remains understandable in both modes.
5. Keep the selected pair long enough to test it during normal daily work rather than judging only an empty settings page.

The predefined pairs provide coordinated light and dark palettes. Test the selected pair against your team's actual workflows and accessibility requirements before making it the operational default.

Understand personal and tenant-level choices

Theme selection affects how a user works in the interface. White-label and logo decisions affect how the MSP presents the application to its staff.

Personal account preferences are covered in 10.16. Manage Your Profile, API Keys, and Personal Notification Preferences. Tenant identity and the company record used for invoices and other communications are covered in 10.1. Configure Your MSP Organization Name and Your Company.

Use dark mode as part of the selected design

Dark mode uses the matched counterpart of the chosen theme. It is not a separate, one-size-fits-all inversion layered over unrelated colors.

This matters for status-heavy PSA work. Foreground text, surfaces, and the background need to retain their intended relationship when a dispatcher moves from a light workspace to a dark one. The paired design also gives an MSP a predictable result when different staff prefer different modes.

Do not make color alone carry an internal operating rule. Ticket priority, approval state, billing status, and other important distinctions should remain understandable from the interface content as well as its color treatment.

Build a custom theme in Enterprise

Enterprise includes a custom theme editor for MSPs that need a palette aligned with their organization. The editor includes built-in contrast checking so administrators can evaluate foreground and background choices while configuring the theme.

A controlled custom-theme process should include:

1. Start from the MSP's approved brand colors rather than sampling colors from an informal asset.
2. Define the foreground and background pairings required by the editor.
3. Use the built-in contrast feedback to identify combinations that do not meet the intended readability threshold.
4. Test the theme in both routine and dense application views.
5. Review light and dark results with staff who perform different roles.
6. Obtain approval from the person responsible for the MSP's brand and accessibility requirements.

Built-in contrast checking supports the design review, but it does not replace testing the finished experience. Long text, compact metadata, focus states, status indicators, and dense application views all deserve a practical review.

For the broader edition comparison, see 1.5. AlgaPSA Community vs Enterprise Edition: Open Source Licensing and Features.

Apply white-label branding to the MSP app

White-label branding helps the MSP application align with the organization's identity for staff using it throughout the day.

Availability: MSP white-labeling, wide logos, and the favicon require Enterprise Edition.

In Settings > Organization & Access > Appearance, use the White-label the MSP app card and its Enable MSP UI customization toggle. Upload Square mark and, when needed, Square mark for dark backgrounds for the collapsed side menu and other square or circular placements.

Figure 2: White-labeling swaps the logo; the palette still comes from the organization theme.

The result reaches every screen, not just the settings page. Below, the same workspace running the High contrast pair with a customer logo in the sidebar — the theme and the logo apply to the MSP app and the client portal together.

Figure 3: High contrast applied across the workspace. Status colors keep their hue so priority and SLA signals stay readable.

Enabling MSP UI customization swaps the logo, not the palette: the card states that the MSP app then uses the shared logo while its colors continue to come from the organization theme above. The logo slots are shared with the client portal, and a portal upload on its own never changes the MSP app.

Use Wide logo (optional) for a wordmark in the expanded side menu. Include the company name in the image because it replaces both the square mark and the separate name. Wide logo for dark backgrounds (optional) supplies its dark-background counterpart.

Logo placement is fixed. Logo variants follow the actual side-menu rail color: a dark rail uses a dark-background variant, while a light rail uses the standard variant, falling back to an uploaded alternative when needed. Review the rail itself when checking contrast, including when a custom theme changes its color.

Upload Browser icon (favicon) to identify browser tabs for both the MSP app and client portal. Confirm the icon remains recognizable at browser-tab size.

Select Apply to everyone to publish pending appearance changes, then review the result in both applications.

Review the expanded and collapsed menu so both the wordmark and square mark remain recognizable. To carry the same identity into system emails, see 10.22. Brand System Emails and Edit Notification Templates.

Review branding before rollout

Treat a theme or white-label change as an organization-wide interface change.

1. Confirm the approved organization name and company record.
2. Select and test the supplied theme pair, or complete the Enterprise custom-theme review.
3. Configure Enable MSP UI customization, square and wide logo variants, and Browser icon (favicon).
4. Review common staff workflows in light and dark mode.
5. Review the expanded and collapsed side menu against its actual background, and check the favicon in both MSP app and client portal tabs.
6. Record who approved the palette, logo, and staff-facing presentation.
7. Revisit the configuration after a rebrand, logo change, or accessibility review.

Avoid publishing a custom palette based only on whether it resembles a brand guide. Readability during real MSP work is the acceptance criterion, and the contrast controls provide an early warning when a pairing needs adjustment.

The supplied nine pairs provide a coordinated starting point. Enterprise customization is most useful when the MSP has a defined brand requirement and an owner prepared to review the resulting interface.