CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-google--gemini-cli

Open-source AI agent providing terminal access to Gemini models with extensible tool support and developer-focused features

Overview
Eval results
Files

themes.mddocs/

Theme System

The Gemini CLI provides a comprehensive theming system with built-in themes, custom theme support, and accessibility features for terminal interface customization.

Capabilities

Theme Structure

Themes define the visual appearance of the terminal interface including colors, styling, and accessibility options.

interface Theme {
  /** Theme display name */
  name: string;

  /** Theme category */
  type: 'light' | 'dark' | 'ansi' | 'custom';

  /** Primary accent color */
  primary?: string;

  /** Secondary accent color */
  secondary?: string;

  /** Background color */
  background?: string;

  /** Foreground/text color */
  foreground?: string;

  /** Additional color palette */
  colors?: {
    error?: string;
    warning?: string;
    success?: string;
    info?: string;
    muted?: string;
    highlight?: string;
  };

  /** Syntax highlighting colors */
  syntax?: {
    keyword?: string;
    string?: string;
    number?: string;
    comment?: string;
    function?: string;
    variable?: string;
  };
}

Built-in Themes

The CLI includes a comprehensive set of built-in themes for various preferences.

Dark Themes

const DARK_THEMES = [
  'ayu-dark',           // Modern dark theme with blue accents
  'atom-one-dark',      // Popular editor theme
  'dracula',            // High-contrast purple theme
  'default',            // Default dark theme
  'github-dark',        // GitHub's dark theme
  'shades-of-purple'    // Purple-focused theme
] as const;

Light Themes

const LIGHT_THEMES = [
  'ayu-light',          // Clean light theme
  'default-light',      // Default light theme
  'github-light',       // GitHub's light theme
  'googlecode',         // Google Code style
  'xcode'               // Xcode-inspired theme
] as const;

ANSI Themes

const ANSI_THEMES = [
  'ansi',               // Standard ANSI colors
  'ansi-light'          // Light ANSI variant
] as const;

Special Themes

const SPECIAL_THEMES = [
  'no-color'            // Activated when NO_COLOR env var is set
] as const;

Theme Management API

Theme Manager

The theme system is managed through a central theme manager.

interface ThemeManager {
  /**
   * Get list of all available theme names
   * @returns Array of theme names
   */
  getAvailableThemes(): string[];

  /**
   * Set the active theme
   * @param name - Theme name to activate
   * @throws Error if theme doesn't exist
   */
  setActiveTheme(name: string): void;

  /**
   * Get the currently active theme
   * @returns Current theme object
   */
  getActiveTheme(): Theme;

  /**
   * Load custom themes from configuration
   * @param themes - Custom theme definitions
   */
  loadCustomThemes(themes: Record<string, Theme>): void;

  /**
   * Get theme by name
   * @param name - Theme name
   * @returns Theme object or null if not found
   */
  getTheme(name: string): Theme | null;

  /**
   * Check if theme exists
   * @param name - Theme name to check
   * @returns True if theme exists
   */
  hasTheme(name: string): boolean;
}

/** Global theme manager instance */
const themeManager: ThemeManager;

Theme Selection

/**
 * Interactive theme selection interface
 * @returns Promise resolving to selected theme name
 */
function selectTheme(): Promise<string>;

/**
 * Set theme from command line or configuration
 * @param themeName - Name of theme to apply
 * @param scope - Settings scope to save in
 */
function applyTheme(
  themeName: string,
  scope: SettingScope
): Promise<void>;

Custom Themes

Custom Theme Definition

Users can define custom themes in their settings configuration.

interface CustomTheme extends Theme {
  /** Theme type must be 'custom' */
  type: 'custom';

  /** Base theme to inherit from (optional) */
  extends?: string;
}

Usage Examples:

{
  "ui": {
    "customThemes": {
      "my-dark-theme": {
        "name": "My Dark Theme",
        "type": "custom",
        "primary": "#00d4ff",
        "secondary": "#ff6b6b",
        "background": "#1a1a1a",
        "foreground": "#e6e6e6",
        "colors": {
          "error": "#ff5555",
          "warning": "#f1fa8c",
          "success": "#50fa7b",
          "info": "#8be9fd"
        }
      },
      "corporate": {
        "name": "Corporate Theme",
        "type": "custom",
        "extends": "github-light",
        "primary": "#0366d6",
        "secondary": "#28a745"
      }
    }
  }
}

Theme Inheritance

Custom themes can inherit from built-in themes:

/**
 * Resolve theme inheritance chain
 * @param theme - Theme with potential inheritance
 * @param baseThemes - Available base themes
 * @returns Fully resolved theme
 */
function resolveThemeInheritance(
  theme: CustomTheme,
  baseThemes: Record<string, Theme>
): Theme;

Theme Configuration

Settings Integration

Themes are configured through the settings system:

interface UISettings {
  /** Active theme name */
  theme?: string;

  /** Custom theme definitions */
  customThemes?: Record<string, CustomTheme>;

  /** Theme-related UI options */
  hideWindowTitle?: boolean;
  showLineNumbers?: boolean;
  showCitations?: boolean;
}

Environment-Based Themes

Themes can be automatically selected based on environment:

/**
 * Detect appropriate theme based on environment
 * @returns Recommended theme name
 */
function detectEnvironmentTheme(): string;

// Environment detection logic
const environmentThemes = {
  /** NO_COLOR environment variable set */
  NO_COLOR: 'no-color',

  /** Cloud Shell environment */
  CLOUD_SHELL: 'ansi',

  /** Terminal with limited color support */
  LIMITED_COLORS: 'ansi-light'
};

Interactive Theme Selection

Theme Picker Interface

The CLI provides an interactive theme selection interface accessible via /theme command.

interface ThemePickerOptions {
  /** Show theme previews */
  showPreview: boolean;

  /** Group themes by category */
  groupByType: boolean;

  /** Include custom themes */
  includeCustom: boolean;

  /** Current theme for highlighting */
  currentTheme: string;
}

/**
 * Display interactive theme picker
 * @param options - Picker configuration
 * @returns Selected theme name or null if cancelled
 */
function showThemePicker(
  options: ThemePickerOptions
): Promise<string | null>;

Theme Preview

interface ThemePreview {
  /** Sample code with syntax highlighting */
  codeSnippet: string;

  /** UI elements preview */
  uiElements: string[];

  /** Color palette display */
  colorPalette: string;
}

/**
 * Generate theme preview
 * @param theme - Theme to preview
 * @returns Preview content
 */
function generateThemePreview(theme: Theme): ThemePreview;

Accessibility Features

High Contrast Support

interface AccessibilityTheme extends Theme {
  /** High contrast mode enabled */
  highContrast: boolean;

  /** Minimum contrast ratios */
  contrastRatios: {
    normal: number;
    large: number;
  };

  /** Screen reader optimizations */
  screenReaderOptimized: boolean;
}

/**
 * Validate theme accessibility
 * @param theme - Theme to validate
 * @returns Accessibility compliance report
 */
function validateThemeAccessibility(theme: Theme): {
  compliant: boolean;
  issues: string[];
  suggestions: string[];
};

Color Blindness Support

/**
 * Adjust theme for color blindness
 * @param theme - Original theme
 * @param type - Color blindness type
 * @returns Adjusted theme
 */
function adjustThemeForColorBlindness(
  theme: Theme,
  type: 'protanopia' | 'deuteranopia' | 'tritanopia'
): Theme;

/**
 * Test theme color combinations
 * @param theme - Theme to test
 * @returns Color accessibility report
 */
function testThemeColorAccessibility(theme: Theme): {
  combinations: Array<{
    foreground: string;
    background: string;
    contrast: number;
    wcagLevel: 'AA' | 'AAA' | 'fail';
  }>;
};

Theme Development

Theme Creation Utilities

/**
 * Create theme from color palette
 * @param name - Theme name
 * @param palette - Color palette
 * @param type - Theme type
 * @returns Generated theme
 */
function createThemeFromPalette(
  name: string,
  palette: {
    primary: string;
    secondary: string;
    background: string;
    foreground: string;
  },
  type: 'light' | 'dark'
): Theme;

/**
 * Generate theme variants
 * @param baseTheme - Base theme
 * @returns Theme variants (light/dark)
 */
function generateThemeVariants(baseTheme: Theme): {
  light: Theme;
  dark: Theme;
};

Theme Validation

interface ThemeValidation {
  /** Validation success */
  valid: boolean;

  /** Validation errors */
  errors: string[];

  /** Validation warnings */
  warnings: string[];

  /** Missing required properties */
  missing: string[];
}

/**
 * Validate theme configuration
 * @param theme - Theme to validate
 * @returns Validation results
 */
function validateTheme(theme: Theme): ThemeValidation;

Advanced Theme Features

Dynamic Themes

interface DynamicTheme extends Theme {
  /** Theme adapts to time of day */
  timeAdaptive: boolean;

  /** Theme adapts to system preference */
  systemAdaptive: boolean;

  /** Schedule for time-based switching */
  schedule?: {
    lightTheme: string;
    darkTheme: string;
    switchTimes: {
      toDark: string;    // "18:00"
      toLight: string;   // "06:00"
    };
  };
}

/**
 * Apply dynamic theme based on current conditions
 * @param dynamicTheme - Dynamic theme configuration
 * @returns Resolved theme name
 */
function resolveDynamicTheme(dynamicTheme: DynamicTheme): string;

Theme Export/Import

/**
 * Export theme to file
 * @param theme - Theme to export
 * @param format - Export format
 * @returns Exported theme data
 */
function exportTheme(
  theme: Theme,
  format: 'json' | 'css' | 'scss'
): string;

/**
 * Import theme from file
 * @param data - Theme data
 * @param format - Import format
 * @returns Imported theme
 */
function importTheme(
  data: string,
  format: 'json' | 'css' | 'scss'
): Theme;

Theme Marketplace Integration

interface ThemePackage {
  /** Package metadata */
  name: string;
  version: string;
  author: string;
  description: string;

  /** Included themes */
  themes: Record<string, Theme>;

  /** Package tags */
  tags: string[];

  /** Download statistics */
  stats: {
    downloads: number;
    rating: number;
  };
}

/**
 * Browse available theme packages
 * @param query - Search query
 * @returns Available theme packages
 */
function browseThemePackages(
  query?: string
): Promise<ThemePackage[]>;

/**
 * Install theme package
 * @param packageName - Package to install
 * @param scope - Installation scope
 */
function installThemePackage(
  packageName: string,
  scope: SettingScope
): Promise<void>;

Install with Tessl CLI

npx tessl i tessl/npm-google--gemini-cli

docs

cli-interface.md

configuration.md

extensions.md

index.md

interactive-commands.md

mcp-integration.md

themes.md

tile.json