Add Custom Theme and Color Customization Feature

[Excellencedev]

Description

This PR implements a comprehensive custom theme and color customization system for Freelens, addressing issue #1280. Users can now create, edit, duplicate, delete, import, and export custom themes with full control over all UI colors.

Changes

Core Theme System Enhancements

1. Extended Theme Interface

   • Added isCustom flag to LensTheme interface to distinguish user-created themes from built-in ones
   • Updated theme storage to support both built-in and custom themes simultaneously

2. Custom Theme Storage

   • Created custom-themes-storage.injectable.ts for persistent storage of custom themes
   • Custom themes are stored in a separate file (lens-custom-themes.json)
   • Provides full CRUD operations (Create, Read, Update, Delete)
   • Observable storage that reactively updates the UI when themes change

3. Theme Validation

   • Created theme-validation.ts with comprehensive validation utilities
   • Validates all required color properties (130+ colors)
   • Validates color format using the color library
   • Sanitizes theme names to prevent invalid characters

4. Theme Manager Service

   • Created custom-theme-manager.injectable.ts as the main API for theme operations
   • Handles theme creation from existing themes
   • Supports theme duplication with automatic name generation
   • Manages theme updates with rename support
   • Enforces protection of built-in themes from deletion

User Interface Components

5. Color Picker Component (New Package: @freelensapp/color-picker)

   • Reusable color picker component with visual picker and hex input
   • Real-time color validation
   • Support for all valid CSS color formats
   • Clean, accessible design matching Freelens UI

6. Theme Editor

   • Created custom-theme-editor.tsx for full-featured theme editing
   • Colors organized into logical categories (General, Text, Background, Sidebar, etc.)
   • Tabbed interface for easy navigation between color categories
   • Live preview of theme changes
   • Edit theme name and description

7. Enhanced Theme Preference UI

   • Updated theme.tsx with buttons for theme operations
   • "Create Custom Theme" - starts from current theme
   • "Edit Theme" - only shown for custom themes
   • "Duplicate Theme" - creates a copy of any theme
   • "Delete Theme" - removes custom themes (with confirmation)
   • Success/error notifications for all operations

8. Import/Export Functionality

   • Created import-export-theme.tsx for theme sharing
   • Export themes as formatted JSON files
   • Import themes from JSON with validation
   • Automatic name collision handling
   • Includes theme metadata (version, export date)

Extension API

9. Extension Theme Support
   • Added registerTheme() function for extensions to provide custom themes
   • Added unregisterTheme() for cleanup
   • Added getThemes() to retrieve all available themes
   • All functions exported through the Theme namespace in the renderer API

Architecture Improvements

10. Reactive Theme System

    • Updated themes.injectable.ts to combine built-in and custom themes reactively
    • Updated active.injectable.ts to support custom themes
    • Custom themes are automatically loaded on startup
    • Theme changes trigger immediate UI updates

11. Fixed Default Theme ID

    • Updated defaultThemeId from "lens-dark" to "Dark" to match actual theme name
    • Ensures consistency across the codebase

Users can now:

1. Click "Create Custom Theme" to start customizing colors
2. Use the color picker to adjust any of the 130+ color variables
3. Colors are organized into categories: General, Text, Background, Sidebar, Buttons, Status, Tables, etc.
4. Export themes to share with others
5. Import themes from the community

Closes #1280

[Excellencedev]

@robertobandini @dex4er review please

[robertobandini]

Please read this comment as info:
#1280 (comment)

[gambhirsharma]

Hi @Excellencedev,

Sorry for the delay, I couldn’t find time over the weekend. I’ll be in the office for the next three days and will try to review your PR if I can. Could you please provide a detailed, step-by-step guide to set up and run your solution locally so I can verify it? I attempted to run it once but ran into dependency issues and I’m not very experienced with Electron app builds, so a straightforward initial setup walkthrough would be very helpful. Thanks!

[dex4er]

I like the idea of custom themes very much. However it'll go to next version v1.7.0 as it needs polishing and brings more changes, ie. to the extensions API.

[robertobandini]

I like the idea of custom themes very much. However it'll go to next version v1.7.0 as it needs polishing and brings more changes, ie. to the extensions API.

I agree