AutoCom Docs

Theme System

Auto Commerce features a comprehensive theme engine that allows complete visual customization of your dashboard. Switch between themes, choose color modes, and create a branded experience for your team.

Overview

The theme system provides:

  • Multiple Themes - Switch between different visual designs
  • Color Modes - Light, Dark, Monochrome, and System-following modes
  • Live Preview - Try themes before applying them
  • Persistence - Settings sync across devices via server
┌─────────────────────────────────────────────────────────────┐
│                    Theme Engine                              │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │ ThemeShadcn │  │ ThemeModern │  │ ThemeCustom │         │
│  │  (Default)  │  │(Alternative)│  │  (Your Own) │         │
│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘         │
│         │                │                │                 │
│         └────────────────┼────────────────┘                 │
│                          ▼                                  │
│              ┌───────────────────────┐                      │
│              │    Theme Provider     │                      │
│              │  ┌─────────────────┐  │                      │
│              │  │  Color Modes    │  │                      │
│              │  │ Light│Dark│Mono │  │                      │
│              │  └─────────────────┘  │                      │
│              └───────────┬───────────┘                      │
│                          ▼                                  │
│              ┌───────────────────────┐                      │
│              │   CSS Variables &     │                      │
│              │   Components          │                      │
│              └───────────────────────┘                      │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Available Themes

ThemeShadcn (Default)

The default theme built on shadcn/ui components with a clean, professional aesthetic.

Feature Description
Framework Tailwind CSS + Radix UI
Style Clean, minimal, professional
Best For Business dashboards, enterprise use

ThemeModern

An alternative theme with a modern split-screen design, gradients, and smooth animations.

Feature Description
Framework Tailwind CSS + Custom Components
Style Gradient backgrounds, glassmorphism
Best For Creative brands, modern startups

Color Modes

Each theme supports four color modes:

Mode Description
Light Standard light appearance with white backgrounds
Dark Dark backgrounds with light text, easier on eyes
Monochrome Grayscale UI for accessibility or minimal aesthetics
System Automatically follows your operating system preference

Learn more about Color Modes →

Changing Your Theme

Via Settings UI

  1. Navigate to Settings → Appearance
  2. Browse available themes in the Interface Theme section
  3. Click Preview to try a theme temporarily
  4. Click Apply to make it permanent
  5. Choose your preferred Color Mode below

Programmatically

import { useTheme, useColorMode } from '@/hooks/use-theme';

function MyComponent() {
  const { setTheme, availableThemes } = useTheme();
  const { colorMode, setColorMode } = useColorMode();

  // Switch theme
  await setTheme('theme-modern');

  // Change color mode
  setColorMode('dark');
}

Theme Architecture

The theme system uses a modular architecture:

modules/
├── ThemeShadcn/           # Default theme
│   ├── frontend/
│   │   ├── index.tsx      # Theme configuration
│   │   ├── tokens.ts      # Design tokens (colors, spacing)
│   │   └── components/
│   │       ├── ui/        # UI primitives (Button, Card, etc.)
│   │       ├── layouts/   # Page layouts
│   │       └── templates/ # Page templates
│   └── module.json
│
├── ThemeModern/           # Alternative theme
│   └── ...same structure
│
frontend/
├── lib/theme/
│   ├── types.ts           # TypeScript interfaces
│   ├── registry.ts        # Theme registration
│   └── loader-client.ts   # Runtime loading
├── contexts/
│   └── theme-context.tsx  # React context provider
└── hooks/
    └── use-theme.ts       # Theme hooks

Key Concepts

Design Tokens

Tokens are the foundation of the theme system - semantic values for colors, spacing, typography, and more.

const tokens = {
  colors: {
    primary: 'hsl(222, 47%, 11%)',
    background: 'hsl(0, 0%, 100%)',
    foreground: 'hsl(222, 84%, 5%)',
    // ...
  },
  spacing: { sm: '0.5rem', md: '1rem', lg: '1.5rem' },
  borderRadius: { sm: '0.25rem', md: '0.5rem', lg: '1rem' },
};

Learn more about Design Tokens →

Themed Components

Themes provide their own component implementations that automatically adapt to the active theme.

import { useThemedComponent } from '@/hooks/use-theme';

function MyPage() {
  const Button = useThemedComponent('Button');
  const Card = useThemedComponent('Card');

  return (
    <Card>
      <Button>Click me</Button>
    </Card>
  );
}

Learn more about Components →

Templates

Templates are full page layouts provided by themes, ensuring consistent design across your entire dashboard.

// Each theme provides its own template implementation
const templates = {
  LoginTemplate,
  DashboardTemplate,
  SettingsProfileTemplate,
  // ...
};

Next Steps