Merge pull request #168 from benjaminbelaga/feature/terminal-theme-import

feat: import terminal color schemes from .itermcolors files

Author: hanrw

README.md

@@ -26,7 +26,7 @@ A macOS menu bar application that monitors AI coding assistant usage quotas. Kee
 - **Multi-Provider Support** - Monitor Claude, Codex, Gemini, GitHub Copilot, Antigravity, Z.ai, Kimi, Kiro, and Amp quotas in one place
 - **Provider Enable/Disable** - Toggle individual providers on/off from Settings to customize your monitoring
 - **Real-Time Quota Tracking** - View Session, Weekly, and Model-specific usage percentages
-- **Multiple Themes** - Light, Dark, CLI (terminal-style), and festive Christmas themes
+- **Multiple Themes** - Light, Dark, CLI, Christmas, and [imported terminal themes](#import-terminal-theme) (.itermcolors)
 - **Automatic Adaptation** - System theme follows your macOS appearance; Christmas auto-enables during the holiday season
 - **Visual Status Indicators** - Color-coded progress bars (green/yellow/red) show quota health
 - **System Notifications** - Get alerted when quota status changes to warning or critical
@@ -182,6 +182,18 @@ ClaudeBar uses a **layered architecture** with `QuotaMonitor` as the single sour
 - **Chicago School TDD** - Tests verify state changes, not method calls
 - **No ViewModel/AppState** - Views consume domain directly
 
+## Import Terminal Theme
+
+Match ClaudeBar's appearance to your terminal. Import any `.itermcolors` file:
+
+1. Open **Settings** (gear icon)
+2. Click **Import .itermcolors**
+3. Select your file (export from iTerm2: Preferences > Profiles > Colors > Color Presets > Export)
+
+450+ pre-made schemes available at [iTerm2-Color-Schemes](https://github.com/mbadolato/iTerm2-Color-Schemes/tree/master/schemes).
+
+Imported themes are saved in `~/.claudebar/themes/` and persist across restarts.
+
 ## Contributing
 
 ### Adding a New AI Provider

Sources/App/Settings/ThemeImportView.swift

@@ -0,0 +1,86 @@
+import SwiftUI
+import Infrastructure
+import UniformTypeIdentifiers
+
+/// Import button for terminal color scheme files.
+///
+/// Currently supports `.itermcolors` (iTerm2 export format, compatible with 450+ schemes
+/// from [iTerm2-Color-Schemes](https://github.com/mbadolato/iTerm2-Color-Schemes)).
+/// The architecture supports adding more formats via new parsers.
+struct ThemeImportButton: View {
+    @Environment(\.appTheme) private var theme
+    @State private var isImporting = false
+    @State private var importError: String?
+    @State private var importedThemeName: String?
+
+    var body: some View {
+        VStack(spacing: 6) {
+            Button {
+                isImporting = true
+            } label: {
+                HStack(spacing: 6) {
+                    Image(systemName: "square.and.arrow.down")
+                        .font(.system(size: 10, weight: .semibold))
+                    Text("Import Theme")
+                        .font(theme.font(size: 11, weight: .medium))
+                }
+                .foregroundStyle(theme.accentPrimary)
+                .padding(.horizontal, 12)
+                .padding(.vertical, 6)
+                .background(
+                    RoundedRectangle(cornerRadius: 8)
+                        .fill(theme.accentPrimary.opacity(0.1))
+                        .overlay(
+                            RoundedRectangle(cornerRadius: 8)
+                                .stroke(theme.accentPrimary.opacity(0.3), lineWidth: 1)
+                        )
+                )
+            }
+            .buttonStyle(.plain)
+            .fileImporter(
+                isPresented: $isImporting,
+                allowedContentTypes: [UTType(filenameExtension: "itermcolors") ?? .propertyList],
+                allowsMultipleSelection: false
+            ) { result in
+                handleImport(result)
+            }
+
+            if let error = importError {
+                Text(error)
+                    .font(theme.font(size: 9))
+                    .foregroundStyle(theme.statusCritical)
+            }
+
+            if let name = importedThemeName {
+                Text("Imported: \(name)")
+                    .font(theme.font(size: 9))
+                    .foregroundStyle(theme.statusHealthy)
+            }
+        }
+    }
+
+    @MainActor private func handleImport(_ result: Result<[URL], Error>) {
+        importError = nil
+        importedThemeName = nil
+
+        switch result {
+        case .success(let urls):
+            guard let url = urls.first else { return }
+            guard url.startAccessingSecurityScopedResource() else {
+                importError = "Cannot access file"
+                return
+            }
+            defer { url.stopAccessingSecurityScopedResource() }
+
+            do {
+                let importedTheme = try ThemeRegistry.shared.importItermcolors(from: url)
+                importedThemeName = importedTheme.displayName
+            } catch {
+                importError = "Import failed: \(error.localizedDescription)"
+            }
+
+        case .failure(let error):
+            importError = error.localizedDescription
+        }
+    }
+}

Sources/App/Theme/AppThemeProvider.swift

@@ -83,6 +83,9 @@ public protocol AppThemeProvider {
     /// Font design (default, rounded, monospaced, serif)
     var fontDesign: Font.Design { get }
 
+    /// Custom font family name (e.g., "IBM Plex Mono"). When set, views use this instead of system font.
+    var customFontName: String? { get }
+
     // MARK: - Status Colors
 
     /// Healthy status color (>50% remaining)
@@ -145,6 +148,9 @@ public extension AppThemeProvider {
     /// Default status bar icon is nil (uses status-based icons)
     var statusBarIconName: String? { nil }
 
+    /// Default custom font is nil (uses system font with fontDesign)
+    var customFontName: String? { nil }
+
     /// Default overlay is nil
     @MainActor var overlayView: AnyView? { nil }
 
@@ -169,6 +175,25 @@ public extension AppThemeProvider {
     }
 }
 
+// MARK: - Theme Font Helper
+
+public extension AppThemeProvider {
+    /// Returns the appropriate font for this theme — custom font if set, otherwise system font with fontDesign.
+    func font(size: CGFloat, weight: Font.Weight = .regular) -> Font {
+        if let name = customFontName {
+            let suffix: String = switch weight {
+            case .bold, .heavy, .black: "-Bold"
+            case .semibold: "-SemiBold"
+            case .medium: "-Medium"
+            case .light, .ultraLight, .thin: "-Light"
+            default: "-Regular"
+            }
+            return .custom("\(name)\(suffix)", size: size)
+        }
+        return .system(size: size, weight: weight, design: fontDesign)
+    }
+}
+
 // MARK: - Base Theme
 
 /// Base theme providing common defaults that other themes can inherit from.

Sources/App/Theme/ImportedTerminalTheme.swift

@@ -0,0 +1,123 @@
+import SwiftUI
+import Infrastructure
+import Domain
+
+// MARK: - RGBColor → SwiftUI Color
+
+public extension TerminalColorScheme.RGBColor {
+    /// Convert to SwiftUI `Color`.
+    var color: Color {
+        Color(red: red, green: green, blue: blue).opacity(alpha)
+    }
+}
+
+// MARK: - ImportedTerminalTheme
+
+/// An ``AppThemeProvider`` implementation generated from an imported terminal color scheme.
+///
+/// Created by ``TerminalThemeGenerator`` and backed by pre-computed ``GeneratedThemeProperties``.
+/// All SwiftUI colors are derived from the canonical ``TerminalColorScheme/RGBColor`` values.
+public struct ImportedTerminalTheme: AppThemeProvider {
+    private let props: GeneratedThemeProperties
+    private let scheme: TerminalColorScheme
+
+    /// Create a theme from generated properties and the original color scheme.
+    public init(props: GeneratedThemeProperties, scheme: TerminalColorScheme) {
+        self.props = props
+        self.scheme = scheme
+    }
+
+    // MARK: - Identity
+
+    public var id: String { props.id }
+    public var displayName: String { props.displayName }
+    public var icon: String { "terminal.fill" }
+    public var subtitle: String? { "Imported" }
+    public var statusBarIconName: String? { nil }
+
+    // MARK: - Color Scheme Preference
+
+    /// Whether this imported theme prefers a dark color scheme (derived from background luminance).
+    public var prefersDarkColorScheme: Bool { props.isDark }
+
+    // MARK: - Background
+
+    public var backgroundGradient: LinearGradient {
+        LinearGradient(
+            colors: [props.background.color, props.cardBackground.color],
+            startPoint: .topLeading,
+            endPoint: .bottomTrailing
+        )
+    }
+
+    public var showBackgroundOrbs: Bool { false }
+
+    // MARK: - Cards & Glass
+
+    public var cardGradient: LinearGradient {
+        LinearGradient(
+            colors: [props.cardBackground.color, props.cardBackground.color.opacity(0.95)],
+            startPoint: .topLeading,
+            endPoint: .bottomTrailing
+        )
+    }
+
+    public var glassBackground: Color { props.glassBackground.color }
+    public var glassBorder: Color { props.glassBorder.color }
+    public var glassHighlight: Color { props.glassHighlight.color }
+    public var cardCornerRadius: CGFloat { 10 }
+    public var pillCornerRadius: CGFloat { 12 }
+
+    // MARK: - Typography
+
+    public var textPrimary: Color { props.textPrimary.color }
+    public var textSecondary: Color { props.textSecondary.color }
+    public var textTertiary: Color { props.textTertiary.color }
+    public var fontDesign: Font.Design { .monospaced }
+    public var customFontName: String? { nil }
+
+    // MARK: - Status Colors
+
+    public var statusHealthy: Color { props.statusHealthy.color }
+    public var statusWarning: Color { props.statusWarning.color }
+    public var statusCritical: Color { props.statusCritical.color }
+    public var statusDepleted: Color { props.statusDepleted.color }
+
+    // MARK: - Accents
+
+    public var accentPrimary: Color { props.accentPrimary.color }
+    public var accentSecondary: Color { props.accentSecondary.color }
+
+    public var accentGradient: LinearGradient {
+        LinearGradient(
+            colors: [accentPrimary, accentSecondary],
+            startPoint: .leading,
+            endPoint: .trailing
+        )
+    }
+
+    public var pillGradient: LinearGradient {
+        LinearGradient(
+            colors: [accentPrimary.opacity(0.25), accentSecondary.opacity(0.15)],
+            startPoint: .topLeading,
+            endPoint: .bottomTrailing
+        )
+    }
+
+    public var shareGradient: LinearGradient {
+        LinearGradient(
+            colors: [scheme.yellow.color, scheme.brightYellow.color],
+            startPoint: .leading,
+            endPoint: .trailing
+        )
+    }
+
+    // MARK: - Interactive States
+
+    public var hoverOverlay: Color { accentPrimary.opacity(0.1) }
+    public var pressedOverlay: Color { accentPrimary.opacity(0.15) }
+
+    // MARK: - Progress Bar
+
+    public var progressTrack: Color { props.progressTrack.color }
+}

Sources/App/Theme/ImportedThemeStore.swift

@@ -0,0 +1,68 @@
+import Foundation
+import Infrastructure
+
+/// Persists imported terminal color schemes as JSON files in `~/.claudebar/themes/`.
+///
+/// On load, the stored ``TerminalColorScheme`` values are re-generated into themes
+/// by ``TerminalThemeGenerator``, ensuring imported themes benefit from future mapping improvements.
+@MainActor
+public final class ImportedThemeStore {
+
+    private let themesDirectory: URL
+
+    /// Create a store backed by a directory.
+    /// - Parameter directory: Override for the themes directory. Defaults to `~/.claudebar/themes/`.
+    public init(directory: URL? = nil) {
+        self.themesDirectory = directory ?? Self.defaultDirectory()
+    }
+
+    /// Load all imported color schemes from disk, sorted by import date.
+    public func loadAll() -> [(TerminalColorScheme, Date)] {
+        guard let files = try? FileManager.default.contentsOfDirectory(
+            at: themesDirectory, includingPropertiesForKeys: nil
+        ) else { return [] }
+
+        return files
+            .filter { $0.pathExtension == "json" }
+            .compactMap { url -> (TerminalColorScheme, Date)? in
+                guard let data = try? Data(contentsOf: url),
+                      let entry = try? JSONDecoder().decode(StoredTheme.self, from: data)
+                else { return nil }
+                return (entry.scheme, entry.importedAt)
+            }
+    }
+
+    /// Save a color scheme to disk as JSON.
+    public func save(_ scheme: TerminalColorScheme) throws {
+        try FileManager.default.createDirectory(at: themesDirectory, withIntermediateDirectories: true)
+        let entry = StoredTheme(scheme: scheme, importedAt: Date())
+        let data = try JSONEncoder().encode(entry)
+        let filename = Self.sanitize(scheme.name)
+        let fileURL = themesDirectory.appendingPathComponent("\(filename).json")
+        try data.write(to: fileURL, options: .atomic)
+    }
+
+    /// Delete a stored theme by its scheme name.
+    public func delete(name: String) throws {
+        let filename = Self.sanitize(name)
+        let fileURL = themesDirectory.appendingPathComponent("\(filename).json")
+        try FileManager.default.removeItem(at: fileURL)
+    }
+
+    private static func defaultDirectory() -> URL {
+        FileManager.default.homeDirectoryForCurrentUser
+            .appendingPathComponent(".claudebar")
+            .appendingPathComponent("themes")
+    }
+
+    private static func sanitize(_ name: String) -> String {
+        name.lowercased()
+            .replacingOccurrences(of: " ", with: "-")
+            .replacingOccurrences(of: "[^a-z0-9\\-]", with: "", options: .regularExpression)
+    }
+
+    private struct StoredTheme: Codable {
+        let scheme: TerminalColorScheme
+        let importedAt: Date
+    }
+}

Sources/App/Theme/ThemeEnvironment.swift

@@ -54,7 +54,13 @@ public struct AppThemeProviderModifier: ViewModifier {
         switch mode {
         case .light: return .light
         case .dark, .cli, .christmas: return .dark
-        case .system, .none: return systemColorScheme
+        case .system: return systemColorScheme
+        case .none:
+            // Imported theme — check dark preference
+            if let imported = ThemeRegistry.shared.theme(for: themeModeId) as? ImportedTerminalTheme {
+                return imported.prefersDarkColorScheme ? .dark : .light
+            }
+            return systemColorScheme
         }
     }