Theming

App-wide theme (colours, typography) is configured in App Panel → Packages → AppBuilder → Theme. Changes are served via the initializer API and applied at runtime — no frontend rebuild needed.

Colours

Token	Purpose
primary	Brand colour — buttons, active states, links
secondary	Secondary accent
success	Positive actions, status indicators
warning	Warning states
error	Error/danger states
gray	Neutral palette — borders, backgrounds, muted text

These map to CSS custom properties at runtime:

--color-brand-500: #5048ed;    /* from primary */
--color-gray-500: #717680;     /* from gray */
--color-success-500: #10b981;
--color-warning-500: #f59e0b;
--color-error-500: #f04438;

Typography

Setting	Description
font_family	Font family string — load via Google Fonts or local assets
font_size_base	Base font size (e.g. 14px)
line_height	Base line height (e.g. 1.5)

Using Theme in Custom Components

In your React components, reference CSS variables directly:

const MyCard = () => (
  <div style={{
    borderColor: 'var(--color-brand-500)',
    backgroundColor: 'var(--color-gray-50)',
  }}>
    Content
  </div>
);

Or with Tailwind (if @theme is configured in your CSS):

<div className="border-brand-500 bg-gray-50">
  Content
</div>

Logo

Configure the app logo in App Panel → AppBuilder → General. The logo URL is served via the initializer and accessible in React:

import { useAppContext } from '@zango-core/crm-framework';

const MyNavbar = () => {
  const { appLogo, appName } = useAppContext();
  return <img src={appLogo} alt={appName} />;
};