[PR #5909] feat(theme): add custom accent color picker with HEX/RGB support #5410

New issue

Open

opened 2026-03-17 02:51:30 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:51:30 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5909
Author: @nikhilmahato21
Created: 2/26/2026
Status: 🔄 Open

Base: main ← Head: feat/custom-accent-color-picker

📝 Commits (5)

af2b153 feat(theme): add custom accent color picker with HEX/RGB support
ebf49f2 Update packages/hoppscotch-common/src/modules/theming.ts
6e53a28 feat(theming): support custom accent colors with validation
5ed983e feat(ui): set palette icon color to selected custom accent
60fa5a0 fix(theming): keep native color input synced with active theme color

📊 Changes

9 files changed (+274 additions, -38 deletions)

View changed files

📝 packages/hoppscotch-common/assets/themes/accent-themes.scss (+22 -0)
📝 packages/hoppscotch-common/assets/themes/themes.scss (+11 -0)
📝 packages/hoppscotch-common/package.json (+1 -0)
📝 packages/hoppscotch-common/src/components/smart/AccentModePicker.vue (+100 -23)
➕ packages/hoppscotch-common/src/helpers/theme.ts (+46 -0)
📝 packages/hoppscotch-common/src/modules/theming.ts (+75 -1)
📝 packages/hoppscotch-common/src/newstore/settings.ts (+1 -1)
📝 packages/hoppscotch-common/src/services/persistence/index.ts (+3 -2)
📝 packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts (+15 -11)

📄 Description

🚀 Summary

closes #5857

Adds a custom color picker in Theme Settings to allow users to define their own accent color using HEX or RGB values instead of being limited to preset options.

🎯 Features

Custom accent color picker component
Support for:
- HEX input (e.g., #FF5733)
- RGB input (e.g., rgb(255, 87, 51))
Real-time theme preview updates
Input validation for invalid color formats
Backward compatibility with existing preset colors

🧠 Motivation

Previously, users could only select accent colors from predefined presets.
This enhancement improves personalization, flexibility, and overall user experience.

🛠 Implementation Details

Integrated color picker into Theme Settings UI
Extended theme state to support dynamic accent values
Added validation logic for HEX and RGB formats
Ensured no breaking changes to existing preset functionality

🧪 Testing

Verified HEX input handling
Verified RGB input handling
Confirmed real-time UI updates
Tested invalid inputs
Ensured preset colors still function correctly

📸 Screenshots

https://github.com/user-attachments/assets/d44bfd6f-df66-4ee8-81bb-483f1c159f69

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5909 **Author:** [@nikhilmahato21](https://github.com/nikhilmahato21) **Created:** 2/26/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feat/custom-accent-color-picker` --- ### 📝 Commits (5) - [`af2b153`](https://github.com/hoppscotch/hoppscotch/commit/af2b1536990f8e536bcc0b33ff5ac459932f9a64) feat(theme): add custom accent color picker with HEX/RGB support - [`ebf49f2`](https://github.com/hoppscotch/hoppscotch/commit/ebf49f25b131597f4698becadbf038a65f64f66a) Update packages/hoppscotch-common/src/modules/theming.ts - [`6e53a28`](https://github.com/hoppscotch/hoppscotch/commit/6e53a28517b3716c04b69832fa402926248223e8) feat(theming): support custom accent colors with validation - [`5ed983e`](https://github.com/hoppscotch/hoppscotch/commit/5ed983e1774cc7d8608ff77b2f47c74f3b9802ba) feat(ui): set palette icon color to selected custom accent - [`60fa5a0`](https://github.com/hoppscotch/hoppscotch/commit/60fa5a018e585aae102fd8dd6674cc7e8c9d5250) fix(theming): keep native color input synced with active theme color ### 📊 Changes **9 files changed** (+274 additions, -38 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/assets/themes/accent-themes.scss` (+22 -0) 📝 `packages/hoppscotch-common/assets/themes/themes.scss` (+11 -0) 📝 `packages/hoppscotch-common/package.json` (+1 -0) 📝 `packages/hoppscotch-common/src/components/smart/AccentModePicker.vue` (+100 -23) ➕ `packages/hoppscotch-common/src/helpers/theme.ts` (+46 -0) 📝 `packages/hoppscotch-common/src/modules/theming.ts` (+75 -1) 📝 `packages/hoppscotch-common/src/newstore/settings.ts` (+1 -1) 📝 `packages/hoppscotch-common/src/services/persistence/index.ts` (+3 -2) 📝 `packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts` (+15 -11) </details> ### 📄 Description ## 🚀 Summary closes #5857 Adds a custom color picker in Theme Settings to allow users to define their own accent color using HEX or RGB values instead of being limited to preset options. --- ## 🎯 Features - Custom accent color picker component - Support for: - HEX input (e.g., `#FF5733`) - RGB input (e.g., `rgb(255, 87, 51)`) - Real-time theme preview updates - Input validation for invalid color formats - Backward compatibility with existing preset colors --- ## 🧠 Motivation Previously, users could only select accent colors from predefined presets. This enhancement improves personalization, flexibility, and overall user experience. --- ## 🛠 Implementation Details - Integrated color picker into Theme Settings UI - Extended theme state to support dynamic accent values - Added validation logic for HEX and RGB formats - Ensured no breaking changes to existing preset functionality --- ## 🧪 Testing - Verified HEX input handling - Verified RGB input handling - Confirmed real-time UI updates - Tested invalid inputs - Ensured preset colors still function correctly --- ## 📸 Screenshots https://github.com/user-attachments/assets/d44bfd6f-df66-4ee8-81bb-483f1c159f69 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>