Themes

# Set theme for web UI
wit config --global ui.theme dracula

# Or in the web UI, use the theme picker in settings

# Set terminal color theme
wit config --global terminal.theme nord

# Disable colors entirely
wit config --global color.ui false

import { getTheme, getThemeNames, themes } from 'wit/ui';

// Get theme by name
const theme = getTheme('dracula');
console.log(theme.colors.accentPrimary);

// List available themes
const names = getThemeNames();
// ['github-dark', 'github-light', 'dracula', ...]

// Access all themes
Object.keys(themes).forEach(name => {
  console.log(`${name}: ${themes[name].displayName}`);
});

import { generateThemeCSS, getTheme } from 'wit/ui';

const theme = getTheme('nord');
const css = generateThemeCSS(theme);

// Use in HTML
document.head.insertAdjacentHTML('beforeend', `<style>${css}</style>`);

:root {
  --bg-primary: #2e3440;
  --bg-secondary: #3b4252;
  --text-primary: #eceff4;
  --accent-primary: #88c0d0;
  --git-added: #a3be8c;
  /* ... */
}

import { generateTerminalTheme, getTheme } from 'wit/ui';

const theme = getTheme('dracula');
const colors = generateTerminalTheme(theme);

console.log(colors.success + 'Success!' + colors.reset);
console.log(colors.added + '+ Added line' + colors.reset);

import { themeManager } from 'wit/ui';

// Get current theme
const current = themeManager.getTheme();
console.log('Current theme:', current.name);

// Switch theme
themeManager.setTheme('monokai');

// Toggle dark/light mode
themeManager.toggleDarkMode();

// Subscribe to changes
const unsubscribe = themeManager.subscribe((theme) => {
  console.log('Theme changed to:', theme.name);
  applyTheme(theme);
});

// Cleanup
unsubscribe();

import { Theme, githubDark } from 'wit/ui';

const myTheme: Theme = {
  ...githubDark,
  name: 'my-custom-theme',
  displayName: 'My Custom Theme',
  colors: {
    ...githubDark.colors,
    accentPrimary: '#ff6b6b',
    accentSecondary: '#4ecdc4',
    // Override other colors as needed
  },
};

// Register custom theme
themes['my-custom-theme'] = myTheme;

// Use it
themeManager.setTheme('my-custom-theme');

interface ThemeTypography {
  fontFamily: string;       // Sans-serif font stack
  fontFamilyMono: string;   // Monospace font stack
  fontSizeXs: string;       // 11px
  fontSizeSm: string;       // 12px
  fontSizeBase: string;     // 14px
  fontSizeLg: string;       // 16px
  fontSizeXl: string;       // 20px
  fontSizeXxl: string;      // 24px
  lineHeight: number;       // 1.5
  lineHeightTight: number;  // 1.25
  lineHeightRelaxed: number; // 1.75
}

// Spacing scale
interface ThemeSpacing {
  xs: string;   // 4px
  sm: string;   // 8px
  md: string;   // 16px
  lg: string;   // 24px
  xl: string;   // 32px
  xxl: string;  // 48px
}

// Effects
interface ThemeEffects {
  borderRadius: string;      // 6px
  borderRadiusLg: string;    // 12px
  borderRadiusFull: string;  // 9999px
  shadow: string;            // Subtle shadow
  shadowLg: string;          // Large shadow
  shadowXl: string;          // Extra large shadow
  transitionFast: string;    // 0.1s
  transitionBase: string;    // 0.2s
  transitionSlow: string;    // 0.3s
  blur: string;              // blur(10px)
}

// Check system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
themeManager.setTheme(prefersDark ? 'github-dark' : 'github-light');

// Listen for changes
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (e) => {
    themeManager.setTheme(e.matches ? 'github-dark' : 'github-light');
  });