White Label Settings - Documentation

Overview

White Label lets you rebrand TotalApp for your organisation or your clients. Change the app name, swap the logo, set a primary accent colour, and configure social media links — all without touching source code. White label settings are persisted server-side at /api/data/white-label and apply to all users on the same TotalApp instance.

App Name

Set a custom application name that replaces "TotalApp" throughout the interface — in the browser tab title, the header, the footer, and any welcome messages. Keep it short (under 24 characters) for best results in the header.

Use Your Company Name

A typical setup sets the app name to the company name (e.g. "Acme Workspace" or "DevCo Hub"). This creates a strong internal brand and makes the app feel like a custom-built tool rather than a third-party product.

Logo

Upload an SVG or PNG logo to replace the default TotalApp logo in the sidebar header and the top header bar. Two variants are supported:

Full logo — shown in the expanded sidebar state and the header. Recommended dimensions: 120 × 32px or similar wide-format aspect ratio.
Small logo — shown in the collapsed sidebar state (icon-only mode). Should be square, typically 32 × 32px.

SVG is strongly preferred as it scales perfectly at all sizes and screen densities. PNG is acceptable for logos that have complex gradients or raster elements.

Primary Colour

Change the primary accent colour used throughout TotalApp for buttons, active states, progress bars, chart bars, AI panel highlights, and focus rings. The colour is stored as a hex value and applied to the CSS variable --color-primary globally.

All UI elements that reference --color-primary update automatically — there is no need to change individual components. A colour picker is provided; you can also type a hex code directly.

Choose a High-Contrast Colour

The primary colour is used for text labels in some contexts (active tab text, icon fills). Very light colours (near white) or very dark colours (near black) can make these labels unreadable. Test your chosen colour in both Dark and Light themes before deploying.

Custom Themes

Advanced users can override any CSS token per theme without touching source files. The White Label tab includes a token override editor where you can enter CSS variable declarations for specific themes:

[data-theme="dark"] {
  --fc-modal-panel-bg: linear-gradient(180deg, rgba(20,30,55,0.95), rgba(10,15,30,0.99));
}

[data-theme="sleek"] {
  --color-primary: #22c55e;
}

Token overrides are injected into a <style> tag in the document head. They take precedence over the built-in token definitions in inline-styles.css.

Social Links

Configure social media URLs that appear in the app footer and (optionally) in onboarding flows. Supported platforms: YouTube, Instagram, LinkedIn, Twitter/X, Facebook, TikTok, and GitHub. Leave a URL blank to hide that platform's icon from the footer.

Persistence

White label settings are saved to /api/data/white-label.json on the server. They persist across all users and browser sessions. A new user opening TotalApp for the first time will see your custom branding immediately without any configuration on their part.

To revert to TotalApp defaults, clear all custom fields in the White Label settings panel and save. The app name, logos, and primary colour will return to their default values.