Theme Configuration

Type Definition

interface ThemeConfig {
  /**
   * Color overrides
   */
  colors?: Partial<ThemeColors>;

  /**
   * Border radius preset
   */
  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';

  /**
   * Font overrides
   */
  font?: {
    sans?: string;
    mono?: string;
  };

  /**
   * Custom CSS variables
   */
  cssVariables?: Record<string, string>;
}

interface ThemeColors {
  primary: string;
  secondary: string;
  background: string;
  foreground: string;
  muted: string;
  mutedForeground: string;
  border: string;
  ring: string;
  accent: string;
  accentForeground: string;
  destructive: string;
  destructiveForeground: string;
}

Color Configuration

Override theme colors:

theme: {
  colors: {
    primary: '#3b82f6',         // Primary color
    secondary: '#64748b',       // Secondary color
    destructive: '#ef4444',     // Destructive action color
  },
},

Complete Color List

Color	Description	Usage
`primary`	Primary color	Buttons, links, highlights
`secondary`	Secondary color	Secondary buttons, helper info
`background`	Background color	Page background
`foreground`	Foreground color	Text color
`muted`	Muted background	Disabled states, secondary areas
`mutedForeground`	Muted foreground	Secondary text
`border`	Border color	Borders, dividers
`ring`	Focus ring	Focus states
`accent`	Accent color	Hover states
`accentForeground`	Accent foreground	Text on accent areas
`destructive`	Destructive color	Delete buttons, errors
`destructiveForeground`	Destructive foreground	Text on destructive buttons

Border Radius Configuration

Preset border radius sizes:

theme: {
  radius: 'md',  // 'none' | 'sm' | 'md' | 'lg' | 'full'
},

Value	Effect
`none`	No radius (0)
`sm`	Small radius (0.25rem)
`md`	Medium radius (0.5rem)
`lg`	Large radius (0.75rem)
`full`	Full radius (9999px)

Font Configuration

Custom fonts:

theme: {
  font: {
    sans: '"Inter", "Noto Sans SC", sans-serif',
    mono: '"Fira Code", monospace',
  },
},

CSS Variables

Add custom CSS variables:

theme: {
  cssVariables: {
    '--header-height': '48px',
    '--sidebar-width': '200px',
    '--custom-spacing': '1.5rem',
  },
},

Use in CSS:

.my-component {
  height: var(--header-height);
  margin-left: var(--sidebar-width);
}

Light/Dark Mode

The core automatically supports light/dark mode:

Use useTheme hook to get and set theme
Colors automatically switch based on theme
System mode follows OS settings

import { useTheme } from '@linch-tech/desktop-core';

function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="system">System</option>
    </select>
  );
}

Complete Example

theme: {
  colors: {
    primary: '#8b5cf6',      // Purple theme
    secondary: '#a78bfa',
    destructive: '#f43f5e',
  },
  radius: 'lg',
  font: {
    sans: '"Inter", sans-serif',
    mono: '"JetBrains Mono", monospace',
  },
  cssVariables: {
    '--header-height': '52px',
  },
},

Theme Configuration

On this page