Site Branding - Theme colors and logo config

[milospp]

VIVO GitHub issue
Linked Vivo 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).

The theme editor is fully customizable per theme.
Each theme’s colors are defined in:
webapp/themes/{theme}/theme-config.json

{
  "themeName": "string",              // Name of your theme
  
  "themeColors": {
    "palette": [                 
      {
        "groupName": "string",         // Logical group (primary, secondary, accent, text, etc.)
        "colors": [
          {
            "name":        "string",        // script identificator name (e.g. primary-base)
            "value":       "hex|string",   // Explicit hex color
            "cssVariable": "string",     // The actual CSS variable that will be injected into :root (Example: "--primary-color")
            "hidden":      true|false,    // (optional) Hides the color from the theme editor / UI color picker.  
                                                       // Commonly used for auto-generated shades that should not be edited directly.shading )
            
            "shade": {                          // (optional) Auto-generate this color from another base color
              "type":   "lighten|darken", // What kind of adjustment
              "amount": number,         // Percentage points (0–100). 20 ≈ 20% lighter/darker
              "base":   "string"            // Name of the base color inside the same theme file
            }
          }
          // ... more colors in the group
        ]
      }
      // ... more groups
    ]
  }
}

Additional Notes

This PR introduces ReferrerHelper.java
This util class easily retrieves the previous page from the request and uses it for the back button.
The traditional approach for handling the back button was to always navigate to the document.referrer or previously visited page. However, this strategy breaks when dealing with nested navigation flows.
Home -> Page 2 -> Page 3
when the user is on Page 3 and clicks the back button, they are correctly taken back to Page 2. But at that point, the referrer becomes Page 3 again. So if the user clicks back on Page 2, they are taken to Page 3—creating an infinite loop between Page 2 and Page 3.

Screenshoots

The chain icon indicates that the shade is linked to its base color and will update automatically when the base changes. If the user manually edits a shade, the chain breaks (turns off). To re-link it and restore automatic updates, click the Reset button in the group.

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]

See comments at vivo-project/VIVO#4040 (comment)

[litvinovg]

Why should the logo be cropped? Couldn't it just be uploaded as a file?

[litvinovg]

Hardcoding theme names/paths is not an option. It will be broken once theme is renamed for customization.

[milospp]

This part is removed when the theme's default color pallete is moved inside the theme folder

[balmas]

Please conversation history in vivo-project/VIVO#4040 for the details of my testing and subsequent changes.

[litvinovg]

How is the individualUri used?

[milospp]

Apparently, this is no longer in use. This PR has gone through significant design changes.
If I recall correctly, site settings (such as the site name) are stored in a triplet, where the subject is the application instance named “...portal.” Because of that approach, I initially stored this site setting in the same way, as it was more convenient to access from my controllers. It is certainly no longer in use since we moved to a display model. Thank you for noticing, it will be removed.