[PR #5032] [MERGED] Customize tags colors #5717

Closed
opened 2026-02-28 21:17:15 -06:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/5032
Author: @pogman-code
Created: 5/19/2025
Status: Merged
Merged: 7/7/2025
Merged by: @youngcw

Base: masterHead: master


📝 Commits (10+)

  • 3aaa9e2 add user defined tag colors
  • 7a2622b use DB to store tag colors
  • a32bf7b change specific tags_colors to generic tags
  • 46e0d66 move tag customization to its own page (pt. 1)
  • c085872 move tag customization to its own page (pt. 2), edit description
  • ce21f87 move tag customization to its own page (pt. 3), better default tag mgmt
  • 0cdb510 move tag customization to its own page (pt. 4), tag creation
  • 17563b3 move tag customization to its own page (pt. 5), remove tags settings
  • 38e1095 Update VRT
  • cd361e6 nitpicking & code rabbit fixing

📊 Changes

102 files changed (+1204 additions, -68 deletions)

View changed files

📝 packages/component-library/package.json (+2 -1)
packages/component-library/src/ColorPicker.tsx (+135 -0)
📝 packages/component-library/src/theme.ts (+1 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--14404-in-the-page-header-opens-the-month-menu-modal-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--321fd-ed-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--4bb70-ed-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--6ab37-roup-name-opens-the-category-group-menu-modal-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--6dbdb-page-header-shows-the-previous-month-s-budget-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--94a79-roup-name-opens-the-category-group-menu-modal-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--94a85-ed-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--96ebb-page-header-shows-the-previous-month-s-budget-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--9e6aa-in-the-page-header-opens-the-budget-page-menu-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--bbde3-roup-name-opens-the-category-group-menu-modal-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--bed18-in-the-page-header-opens-the-month-menu-modal-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--ceb3a-in-the-page-header-opens-the-month-menu-modal-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--d270d-in-the-page-header-opens-the-budget-page-menu-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--d7184-page-header-shows-the-previous-month-s-budget-2-chromium-linux.png (+0 -0)

...and 80 more files

📄 Description

First things first, I understand if this is rejected right off the bat since I have barely discussed it before the PR (made a suggestion on discord)

The point of this feature is to allow user to choose color of tags (and as a bonus, colorize tags in the mobile view).

Hopefully you'll have some feedback, positive or not :)

image
image
image
image
image
image


🔄 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/actualbudget/actual/pull/5032 **Author:** [@pogman-code](https://github.com/pogman-code) **Created:** 5/19/2025 **Status:** ✅ Merged **Merged:** 7/7/2025 **Merged by:** [@youngcw](https://github.com/youngcw) **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (10+) - [`3aaa9e2`](https://github.com/actualbudget/actual/commit/3aaa9e2bc2bc0a36727888a3865882cb2be24095) add user defined tag colors - [`7a2622b`](https://github.com/actualbudget/actual/commit/7a2622bfcdeb3f5d95a361c9b8857749d8c2fa1f) use DB to store tag colors - [`a32bf7b`](https://github.com/actualbudget/actual/commit/a32bf7ba54b8658c08d6bdb20a8e760a25c9512a) change specific tags_colors to generic tags - [`46e0d66`](https://github.com/actualbudget/actual/commit/46e0d6687f2304360b6107da5825d61504fcb21d) move tag customization to its own page (pt. 1) - [`c085872`](https://github.com/actualbudget/actual/commit/c085872f3b9031e58c7d09619943c9e393d6ad9a) move tag customization to its own page (pt. 2), edit description - [`ce21f87`](https://github.com/actualbudget/actual/commit/ce21f873bb3658e60fd0b22bb9d075275a4b080b) move tag customization to its own page (pt. 3), better default tag mgmt - [`0cdb510`](https://github.com/actualbudget/actual/commit/0cdb5109d1cc043d3e6fe8e5592399da55290795) move tag customization to its own page (pt. 4), tag creation - [`17563b3`](https://github.com/actualbudget/actual/commit/17563b3053e0247070c921638763e09e2055f461) move tag customization to its own page (pt. 5), remove tags settings - [`38e1095`](https://github.com/actualbudget/actual/commit/38e1095eb0fdfcbc3c2f55933bd761ddf2bc4250) Update VRT - [`cd361e6`](https://github.com/actualbudget/actual/commit/cd361e668bd1d87909aae002e1789e0aaac543c3) nitpicking & code rabbit fixing ### 📊 Changes **102 files changed** (+1204 additions, -68 deletions) <details> <summary>View changed files</summary> 📝 `packages/component-library/package.json` (+2 -1) ➕ `packages/component-library/src/ColorPicker.tsx` (+135 -0) 📝 `packages/component-library/src/theme.ts` (+1 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--14404-in-the-page-header-opens-the-month-menu-modal-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--321fd-ed-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--4bb70-ed-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--6ab37-roup-name-opens-the-category-group-menu-modal-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--6dbdb-page-header-shows-the-previous-month-s-budget-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--94a79-roup-name-opens-the-category-group-menu-modal-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--94a85-ed-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--96ebb-page-header-shows-the-previous-month-s-budget-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--9e6aa-in-the-page-header-opens-the-budget-page-menu-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--bbde3-roup-name-opens-the-category-group-menu-modal-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--bed18-in-the-page-header-opens-the-month-menu-modal-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--ceb3a-in-the-page-header-opens-the-month-menu-modal-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--d270d-in-the-page-header-opens-the-budget-page-menu-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--d7184-page-header-shows-the-previous-month-s-budget-2-chromium-linux.png` (+0 -0) _...and 80 more files_ </details> ### 📄 Description First things first, I understand if this is rejected right off the bat since I have barely discussed it before the PR (made a suggestion on discord) The point of this feature is to allow user to choose color of tags (and as a bonus, colorize tags in the mobile view). Hopefully you'll have some feedback, positive or not :) ![image](https://github.com/user-attachments/assets/ddc65a85-dd5e-474c-af15-a7ec20af24fa) ![image](https://github.com/user-attachments/assets/ff172702-cb21-467e-83f7-8d97361388a8) ![image](https://github.com/user-attachments/assets/ac944fd3-6968-4017-9320-dc60847756d8) ![image](https://github.com/user-attachments/assets/0d20adad-1db4-4c16-9d68-5d49865c803f) ![image](https://github.com/user-attachments/assets/6baa9093-c6d9-4ce3-b527-75df68aed28c) ![image](https://github.com/user-attachments/assets/f5c1a1f3-6c01-4e3b-a439-693a7bbc5e26) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-02-28 21:17:15 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#5717