immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-07-25 14:00:45 +03:00
Code Issues 783 Packages Projects Releases 22 Wiki Activity

[PR #2628] [CLOSED] feat(web/server): add customizable accent colors #9635

New Issue
Closed
opened 2026-02-05 14:08:13 +03:00 by OVERLORD · 0 comments
OVERLORD commented 2026-02-05 14:08:13 +03:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/immich-app/immich/pull/2628
Author: @Sophtli
Created: 6/1/2023
Status: ❌ Closed

Base: main ← Head: custom-accent-color

📝 Commits (1)

  • 39d135e feat(web/server): add customizable accent colors in the admin settings and in the user settings

📊 Changes

54 files changed (+1128 additions, -14 deletions)

View changed files

📝 mobile/openapi/.openapi-generator/FILES (+6 -0)
📝 mobile/openapi/README.md (+2 -0)
➕ mobile/openapi/doc/AccentColorsApi.md (+51 -0)
➕ mobile/openapi/doc/SystemConfigDisplayDto.md (+16 -0)
📝 mobile/openapi/doc/SystemConfigDto.md (+1 -0)
📝 mobile/openapi/doc/UpdateUserDto.md (+2 -0)
📝 mobile/openapi/doc/UserResponseDto.md (+2 -0)
📝 mobile/openapi/lib/api.dart (+2 -0)
➕ mobile/openapi/lib/api/accent_colors_api.dart (+59 -0)
📝 mobile/openapi/lib/api_client.dart (+2 -0)
➕ mobile/openapi/lib/model/system_config_display_dto.dart (+117 -0)
📝 mobile/openapi/lib/model/system_config_dto.dart (+11 -3)
📝 mobile/openapi/lib/model/update_user_dto.dart (+37 -3)
📝 mobile/openapi/lib/model/user_response_dto.dart (+17 -1)
➕ mobile/openapi/test/accent_colors_api_test.dart (+26 -0)
➕ mobile/openapi/test/system_config_display_dto_test.dart (+32 -0)
📝 mobile/openapi/test/system_config_dto_test.dart (+5 -0)
📝 mobile/openapi/test/update_user_dto_test.dart (+10 -0)
📝 mobile/openapi/test/user_response_dto_test.dart (+10 -0)
📝 server/apps/immich/src/api-v1/album/album.service.spec.ts (+2 -0)

...and 34 more files

📄 Description

As I always like to use custom colors in my applications, I was wondering how this could be implemented in Immich.

I don't know whether this is something that you will consider to merge but it was fun figuring this out regardless.
There are also a few areas that still have to be restructured because they are kind of a mess but I think everything works at least.

There are two places for setting custom colors:

  1. in the user settings
  2. in the admin settings

the user settings are always prefered if set, otherwise it falls back to the admin settings and when that's not configured as well, the default colors will be used.
In both places there are two accent colors, one for light mode and one for dark mode.

The custom colors are added in Tailwind using css variables, which also get temporarily stored in the localStorage to avoid the wrong color on load, similar to how it's handled with light and dark mode.

I've attached three different screenshot and I think that looks actually pretty nice with the right colors and would definitely be an upgrade for me personally.

Screenshot 2023-06-01 at 01-14-09 Settings
Screenshot 2023-06-01 at 01-14-17 System Settings
Screenshot 2023-06-01 at 01-14-44 Settings

I'd be very happy about some feedback about the general idea and the implementation itself. ❤️

🔄 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/immich-app/immich/pull/2628 **Author:** [@Sophtli](https://github.com/Sophtli) **Created:** 6/1/2023 **Status:** ❌ Closed **Base:** `main` ← **Head:** `custom-accent-color` --- ### 📝 Commits (1) - [`39d135e`](https://github.com/immich-app/immich/commit/39d135e671806bc239edaf212968349088ddf142) feat(web/server): add customizable accent colors in the admin settings and in the user settings ### 📊 Changes **54 files changed** (+1128 additions, -14 deletions) <details> <summary>View changed files</summary> 📝 `mobile/openapi/.openapi-generator/FILES` (+6 -0) 📝 `mobile/openapi/README.md` (+2 -0) ➕ `mobile/openapi/doc/AccentColorsApi.md` (+51 -0) ➕ `mobile/openapi/doc/SystemConfigDisplayDto.md` (+16 -0) 📝 `mobile/openapi/doc/SystemConfigDto.md` (+1 -0) 📝 `mobile/openapi/doc/UpdateUserDto.md` (+2 -0) 📝 `mobile/openapi/doc/UserResponseDto.md` (+2 -0) 📝 `mobile/openapi/lib/api.dart` (+2 -0) ➕ `mobile/openapi/lib/api/accent_colors_api.dart` (+59 -0) 📝 `mobile/openapi/lib/api_client.dart` (+2 -0) ➕ `mobile/openapi/lib/model/system_config_display_dto.dart` (+117 -0) 📝 `mobile/openapi/lib/model/system_config_dto.dart` (+11 -3) 📝 `mobile/openapi/lib/model/update_user_dto.dart` (+37 -3) 📝 `mobile/openapi/lib/model/user_response_dto.dart` (+17 -1) ➕ `mobile/openapi/test/accent_colors_api_test.dart` (+26 -0) ➕ `mobile/openapi/test/system_config_display_dto_test.dart` (+32 -0) 📝 `mobile/openapi/test/system_config_dto_test.dart` (+5 -0) 📝 `mobile/openapi/test/update_user_dto_test.dart` (+10 -0) 📝 `mobile/openapi/test/user_response_dto_test.dart` (+10 -0) 📝 `server/apps/immich/src/api-v1/album/album.service.spec.ts` (+2 -0) _...and 34 more files_ </details> ### 📄 Description As I always like to use custom colors in my applications, I was wondering how this could be implemented in Immich. I don't know whether this is something that you will consider to merge but it was fun figuring this out regardless. There are also a few areas that still have to be restructured because they are kind of a mess but I think everything works at least. There are two places for setting custom colors: 1. in the user settings 2. in the admin settings the user settings are always prefered if set, otherwise it falls back to the admin settings and when that's not configured as well, the default colors will be used. In both places there are two accent colors, one for light mode and one for dark mode. The custom colors are added in Tailwind using css variables, which also get temporarily stored in the localStorage to avoid the wrong color on load, similar to how it's handled with light and dark mode. I've attached three different screenshot and I think that looks actually pretty nice with the right colors and would definitely be an upgrade for me personally. ![Screenshot 2023-06-01 at 01-14-09 Settings](https://github.com/immich-app/immich/assets/23268975/f23007f5-f8b7-4567-b302-a7565fbe25d8) ![Screenshot 2023-06-01 at 01-14-17 System Settings](https://github.com/immich-app/immich/assets/23268975/37c888a5-413d-440a-afab-cdde76609c73) ![Screenshot 2023-06-01 at 01-14-44 Settings](https://github.com/immich-app/immich/assets/23268975/30f4d647-5cea-46ac-b1fb-31a2ee8cc307) I'd be very happy about some feedback about the general idea and the implementation itself. :heart: --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
OVERLORD added the pull-request label 2026-02-05 14:08:13 +03:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
changelog:enhancement
changelog:security
changelog:skip
changelog:translation
cli
date-time
dependencies
documentation
external-library
format
good first issue
mobile-beta
mobile-beta
mobile-beta
needs-answer
nice to have
pull-request
Mirrored from GitHub Pull Request
 sharing
tech-debt
📱mobile
🖥️web
🗄️server
🧠machine-learning
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#9635
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?