Site Branding - Theme colors and logo config

[milospp]

VIVO GitHub issue
Linked Vitro PR

What does this pull request do?

This pull request allows administrators to customize institutional branding by defining institutional colors and updating the key color scheme of the current theme.

What's new?

1. Theme Color Customization
   Administrators can now change the following theme colors:
   • Primary Color
   • Secondary Color
   • Accent Color
2. Advanced Color Options
   Additional options for detailed customization:
   • Primary Lighter Color
   • Primary Darker Color
   • Link Color
   • Text Color
3. Logo Management
   • Option to upload a custom logo (max aspect ration 1:7).
   • Option to upload a smaller logo that is visible when screen is smaller (max aspect ration 1:3).

Screenshoots

Regular Color Settings

Advanced Color Settings

Reset Color Option

How should this be tested?

General Testing

Ensure testing is conducted for every available theme.

Test 1: Theme Colors

1. Select a theme
2. Customize colors (Primary, Secondary, Accent)
3. Verify that the updated colors are applied across the site

Test 2: Logo Upload

1. Click Change LOGO
2. Upload a logo image
3. Crop and save the logo
   • Ensure cropping is restricted to a 1:1 or wider aspect ratio.
4. Verify that the new logo is displayed correctly.

Test 3: Logo Small Upload

1. Click Change Small LOGO
2. Upload a logo image
3. Crop and save the logo
   • Ensure cropping is restricted to a 1:1 or wider aspect ratio up to 1:3.
4. Verify that the new logo is displayed correctly only when screen is smaller (unless Regular logo is not uplated).

Test 4: Only one logo uploaded

1. If only a regular logo or only a smaller logo is uploaded, that logo will be applied to both wide and mobile views (test this by resizing the screen or zooming in).

Test 5: Logo Removal

1. Click Change LOGO
2. Click Remove Logo
3. Confirm that the default logo reappears.

[balmas]

Some problems noted during testing (Tested on Chrome Version 132.0.6834.160 (Official Build) (arm64))

1. After uploading a logo, then clicking save, it returns to the upload photo page, with the error "The form did not contain a 'datafile' field." The changes made on the branding page are still applied and the logo is updated, but the only way to leave the page is to click "cancel"
2. the changes seem to apply automatically most of the time. This is not true when you hit "Reset" color settings, but in most other cases, the changes apply whether or not you click Save
3. If I load a small logo but not a large logo it uses the small logo as the large logo (maybe this is intended I'm not sure)
4. Site Name looks like it's used as the html page title but it doesn't appear anywhere else
5. The copyright text doesn't get updated for any theme (it always just reverts back to the default)
6. The primary color selections are a little confusing. Changing lighter doesn't change the others, but change base does. This makes sense to some degree, but it might be better to list base first.
7. None of the changes seem to impact the Wilma theme, although they do impact the others
8. Link color doesn't seem to impact the tenderfoot theme
9. Generally, there probably needs to be some help text to explain what changing primary color affects, what changing secondary color effects,
10. When you first load the site information page, both "hide advanced color settings" and "show advanced color settings" links are present

[balmas]

see comments at #4040 (comment)