Themes & Customization

Clientra CRM includes 7 built-in themes controlled through CSS custom properties. The theme system is designed to be lightweight — all theme variations are defined in a single variables.css file using the data-theme attribute on the <html> element.

Available Themes

dark (default)

light

classic

chatgpt

midnight

oled

slate

Theme	Background	Primary Color	Character
`dark` (default)	#000000	#3B82F6 Blue	True black with blue accents
`light`	#f8f9fc	#3B82F6 Blue	Clean light mode
`classic`	#1a1c2e	#5865f2 Indigo	Deep navy with indigo tones
`chatgpt`	#202123	#19c37d Green	Dark charcoal with green accents
`midnight`	#0a0e1a	#6366f1 Violet	Ultra-deep midnight with violet
`oled`	#000000	#3B82F6 Blue	True black for OLED screens
`slate`	#1c2333	#64748b Slate	Muted blue-grey tones

Theme System

Themes are implemented using the CSS data-theme attribute on the <html> element. Each theme defines a set of CSS custom properties that override the defaults.

Switching Themes

javascript

// Switch to midnight theme
document.documentElement.setAttribute('data-theme', 'midnight');

// Persist theme preference
const settings = JSON.parse(localStorage.getItem('clientra_settings') || '{}');
settings.theme = 'midnight';
localStorage.setItem('clientra_settings', JSON.stringify(settings));

CSS Architecture

Only 3 CSS files exist in the CRM — never add a 4th file. All styles must go into one of these three files:

File	Purpose	Contains
`variables.css`	Theme definitions	CSS custom properties per theme, color palettes, spacing scales
`components.css`	UI components	.card, .btn, .badge, .form-input, modal, table styles
`main.css`	Layout & pages	Page layouts, utility classes, .page, .page-header, sidebar, navigation

CSS Custom Properties

All theme colors and design tokens are defined as CSS custom properties. These are the primary variables to use when styling components:

Color Variables

css

/* variables.css — :root defines the dark (default) theme */
:root {
  /* Backgrounds */
  --color-bg:          #000000;   /* Page background */
  --color-surface:     #0a0a0a;   /* Sidebar, panels */
  --color-card:        #121212;   /* Card backgrounds */
  --color-input:       #1E1E1E;   /* Form inputs */

  /* Primary brand color */
  --color-primary:     #3B82F6;   /* Blue accent */
  --color-primary-light: #6eb5ff; /* Lighter shade */
  --color-primary-dark:  #2563EB; /* Darker shade */

  /* Text */
  --color-text:        #e2e4ed;   /* Body text */
  --color-text-muted:  #8b8fa8;   /* Secondary text */
  --color-text-faint:  #5a5e75;   /* Disabled/placeholder */
  --color-heading:     #f4f5f9;   /* Heading text */

  /* Borders */
  --color-border:      #2a2b3d;   /* Default border */
  --color-border-light: #23243a; /* Subtle border */

  /* Status colors */
  --color-success:     #22c55e;
  --color-warning:     #f59e0b;
  --color-error:       #ef4444;
  --color-info:        #3b82f6;
}

Theme Overrides

css

/* Light theme override */
[data-theme="light"] {
  --color-bg:        #f8f9fc;
  --color-surface:   #ffffff;
  --color-card:      #ffffff;
  --color-input:     #f3f4f8;
  --color-text:      #2d3148;
  --color-text-muted: #6b7280;
  --color-border:    #e5e7eb;
  --color-heading:   #111827;
}

/* OLED theme override */
[data-theme="oled"] {
  --color-bg:        #000000;
  --color-surface:   #0a0a0a;
  --color-card:      #111111;
  --color-border:    #1f1f1f;
}

Component CSS Classes

These utility and component classes are available throughout the application from components.css:

Layout

Class	Description
`.page`	Outer page container with max-width and padding
`.page-header`	Page title row with action buttons (flex, space-between)
`.page-title`	h1 styling for page title
`.page-subtitle`	Secondary text below page title
`.filters-row`	Horizontal filter bar (search + dropdowns)
`.table-footer`	Pagination area below data table

Cards

html

<div class="card">Standard card with padding</div>
<div class="card card-sm">Compact card</div>

Buttons

html

<!-- Primary action button -->
<button class="btn btn-primary">Save Property</button>

<!-- Secondary / ghost button -->
<button class="btn btn-ghost">Cancel</button>

<!-- Danger button -->
<button class="btn btn-danger">Delete</button>

<!-- Small size modifier -->
<button class="btn btn-primary btn-sm">Save</button>

<!-- Icon button -->
<button class="btn btn-ghost btn-icon">🔍</button>

Badges

html

<span class="badge badge--success">Active</span>
<span class="badge badge--warning">Pending</span>
<span class="badge badge--danger">Overdue</span>
<span class="badge badge--info">New</span>
<span class="badge badge--neutral">Closed</span>

Form Elements

html

<div class="form-group">
  <label class="form-label">Property Type</label>
  <input  type="text" class="form-input" placeholder="Enter type...">
  <select class="form-select">
    <option>Apartment</option>
    <option>Villa</option>
  </select>
  <textarea class="form-textarea"></textarea>
  <span class="form-hint">Helper text here</span>
  <span class="form-error">Validation error</span>
</div>

Avatar

html

<!-- Text avatar (initials) -->
<div class="avatar">JS</div>

<!-- Sized variants -->
<div class="avatar avatar--sm">JS</div>
<div class="avatar avatar--lg">JS</div>

Creating Custom Themes

Add a new theme by adding a selector block to variables.css:

css

/* In assets/css/variables.css — add at end of file */
[data-theme="ocean"] {
  --color-bg:           #0d1b2a;
  --color-surface:      #1b2838;
  --color-card:         #1e3248;
  --color-input:        #0d1b2a;
  --color-primary:      #0ea5e9;
  --color-primary-light: #38bdf8;
  --color-primary-dark:  #0284c7;
  --color-text:         #cbd5e1;
  --color-text-muted:   #64748b;
  --color-border:       #1e3248;
  --color-heading:      #f0f9ff;
}

Then activate it in JavaScript:

javascript

document.documentElement.setAttribute('data-theme', 'ocean');

App Branding

Beyond themes, these branding options are available in Settings → General:

Setting	Description
App Name	Replaces "Clientra CRM" in the sidebar, title bar, and PDF headers
Primary Color	Overrides `--color-primary` globally. Accepts hex color code.
Favicon	Upload custom .ico or .png favicon (16×16 or 32×32 recommended)
Default Theme	Theme applied to new users. Individual users can override in their profile.

ℹ Per-User Theme Override

Each user can choose their own theme from the Profile page. The chosen theme is saved to localStorage under clientra_settings.theme and takes precedence over the system default.