[BUG] - Setting theme primary colour doesn't change theme-color meta

[tecosaur]

First Check

• This is not a feature request.
• I added a very descriptive title to this issue (title field is above this).
• I used the GitHub search to find a similar issue and didn't find it.
• I searched the Mealie documentation, with the integrated search.
• I already read the docs and didn't find an answer.
• This issue can be replicated on the demo site (https://demo.mealie.io/).

What is the issue you are experiencing?

I've recently customised the THEME_DARK_ACCENT and THEME_LIGHT_PRIMARY on my Mealie instance. After figuring out the caching issues, I've noticed that the theme-color meta tag isn't affected by this, leading to what I'd consider a UI bug:

On iOS for instance, the orange banner appears as you start scrolling, which is rather jarring difference from the selected primary colour used in the banner.

Steps to Reproduce

• Customise your mealie colours
• Observe

Please provide relevant logs

n/a

Mealie Version

v2.2.0

Deployment

Other (please specify below)

Additional Deployment Details

On NixOS

[Kuchenpirat]

The theme color meta tag is set to primary there here:

mealie/frontend/nuxt.config.js

Line 363 in aceed2a

theme_color: process.env.THEME_LIGHT_PRIMARY || "#E58325",

But i could reproduce it not having any effect so marking as confirmed 👍

[bloominstrong]

Having a look at the code the problem is that the pwa theme_color does is set at build time and needs to be set at runtime.
I will have a try at changing it to a runtimeConfig.

[bloominstrong]

So it seems like the pwa module does not support runtimeConfig's. I don't have the skill or knowledge to attempt to fix that but I have got workarounds for docker and NixOS users.

Docker workaround

You need to manually change the color and build the container yourself.

git clone https://github.com/mealie-recipes/mealie.git
cd mealie
git checkout $PREFERRED_VERSION
cp docker/Dockerfile .
sed -i -E "s//E58325/$YOUR_COLOR/" ./frontend/nuxt.config.js
docker build -t my-mealie --platform linux/amd64 .
docker run my-mealie

NixOS workaround

I tried to do this in an override but I couldn't get there and ended up using a local copy of nixpkgs which is not ideal as you will need to git rebase to update the system

git clone --branch nixos-24.11 --depth=1 https://github.com/NixOS/nixpkgs.git
cd nixpkgs
$EDITOR pkgs/by-name/me/mealie/mealie-frontend.nix 

in here you want to add in the below

postPatch = ''
sed -i -E "s/E58325/$YOUR_COLOR/" nuxt.config.js
'';

then commit it and rebuild

git add pkgs/by-name/me/mealie/mealie-frontend.nix 
git commit
nixos-rebuild -I nixpkgs=/path/to/nixpkgs switch 

[matthewkdies]

You need to manually change the color and build the container yourself.

git clone https://github.com/mealie-recipes/mealie.git
cd mealie
git checkout $PREFERRED_VERSION
cp docker/Dockerfile .
sed -i -E "s//E58325/$YOUR_COLOR/" ./frontend/nuxt.config.js
docker build -t my-mealie --platform linux/amd64 .
docker run my-mealie

Can confirm that this works! After completely closing the PWA and restarting, my issue is resolved.