Add Custom Theme and Color Customization Feature #1368

Excellencedev · 2025-11-15T12:12:15Z

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

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
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
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
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

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
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
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
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

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

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
Fixed Default Theme ID
- Updated defaultThemeId from "lens-dark" to "Dark" to match actual theme name
- Ensures consistency across the codebase

Users can now:

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

Closes #1280

Excellencedev · 2025-11-15T12:13:21Z

@robertobandini @dex4er review please

robertobandini · 2025-11-15T12:23:37Z

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

gambhirsharma · 2025-11-16T21:59:35Z

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 · 2025-11-17T08:26:10Z

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 · 2025-11-17T08:39:10Z

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

robertobandini · 2025-11-23T11:28:55Z

Hi @gambhirsharma @Excellencedev, I suppose that we can start from the obvious fact that the tests are failed.
Personally I didn't check this too much, as said could be done by @gambhirsharma, but would like that every issue and expecially every PR about something involved with UI/UX should provide some example screen, as much as possible, so anybody at first sight can understand much more in less time. Thanks!

dex4er

Generally it might work someday but it was not compiled even once then it is hard to say if it is usable for us.

dex4er · 2025-11-24T21:41:30Z

packages/ui-components/color-picker/package.json

+  "version": "1.0.0",
+  "main": "index.ts",
+  "dependencies": {
+    "@ogre-tools/injectable-react": "^18.1.1",


What is this dependency?

ERR_PNPM_NO_MATCHING_VERSION No matching version found for @ogre-tools/injectable-react@^18.1.1 while fetching it from https://registry.npmjs.org/

dex4er · 2025-11-24T21:42:01Z

packages/ui-components/color-picker/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@freelensapp/color-picker",
+  "version": "1.0.0",


All versions must be consistent

dex4er · 2025-11-24T21:44:00Z

packages/ui-components/color-picker/package.json

+  "devDependencies": {
+    "@types/color": "^4.0.0",
+    "@types/react": "^18.3.5"
+  }


A lot of dependencies are missing. Check other modules from ui-components how it works. Generally I'm not againt vibe coding but it looks like you never even compiled the code.

dex4er · 2025-11-24T21:44:57Z

packages/ui-components/color-picker/webpack.config.js

+const packageJson = require("./package.json");
+
+module.exports = {
+  name: packageJson.name,


Check other packages and what is inside webpack.config.js

dex4er · 2025-11-24T21:45:20Z

packages/ui-components/color-picker/tsconfig.json

@@ -0,0 +1,8 @@
+{


Check other packages and what is inside tsconfig.json

Excellencedev · 2025-11-25T02:59:15Z

I will make sure to make this work

I am really busy rn so please bare with me

Excellencedev · 2025-11-25T03:02:37Z

Give me a bit of time please and I promise to make this work

Drafting this for now

robertobandini · 2025-11-25T10:27:48Z

Thanks @dex4er!

@gambhirsharma Let us know if you can follow this.

@Excellencedev
Please don't resubmit PRs that can't be built, and preferably test the tests locally first. You can see what the tests do and replicate them locally.
If the review time is greater than the development time, the developer bounty becomes useless.
This will be a new rule to be considered in the discussion on this matter:
#1364

Add Custom Theme and Color Customization Feature

c3b811f

Excellencedev mentioned this pull request Nov 15, 2025

Custom theme and color feature #1280

Open

dex4er added this to the v1.7.0 milestone Nov 17, 2025

Merge branch 'main' into feat/custom-theme-and-colour

1d5ec83

dex4er requested changes Nov 24, 2025

View reviewed changes

Excellencedev marked this pull request as draft November 25, 2025 03:02

Uh oh!

Add Custom Theme and Color Customization Feature #1368

Are you sure you want to change the base?

Add Custom Theme and Color Customization Feature #1368

Uh oh!

Conversation

Excellencedev commented Nov 15, 2025

Description

Changes

Core Theme System Enhancements

User Interface Components

Extension API

Architecture Improvements

Uh oh!

Excellencedev commented Nov 15, 2025

Uh oh!

robertobandini commented Nov 15, 2025

Uh oh!

gambhirsharma commented Nov 16, 2025

Uh oh!

dex4er commented Nov 17, 2025

Uh oh!

robertobandini commented Nov 17, 2025

Uh oh!

robertobandini commented Nov 23, 2025

Uh oh!

dex4er left a comment

Choose a reason for hiding this comment

Uh oh!

dex4er Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

dex4er Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

dex4er Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

dex4er Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

dex4er Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

Excellencedev commented Nov 25, 2025

Uh oh!

Excellencedev commented Nov 25, 2025

Uh oh!

robertobandini commented Nov 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants