Change accent color

[gravelfreeman]

First Check

• I used the GitHub search to find a similar requests and didn't find it.
• Checked the tasks taged issues and verified my feature is not covered

Please provide a concise description of the problem that would be addressed by this feature.

The more time I spend in Mealie the more annoyed I get at the orange color. Since it's self hosted I think it would be great to have an official option to change the accent color to something else.

Please provide a concise description of the feature that would resolve your issue.

Setting in the options page to change the accent color with a color picker.

Please consider and list out some caveats or tradeoffs made in your design decision

I think this wouldn't be complicated to integrate instead of a whole theme system.

Additional Information

• If this is accepted I'm willing to submit a PR to provide this feature
• If this is accepted I'm willing to help maintain this feature
• I'm willing to sponsor/pay a developer to do this work

[michael-genson]

This should be possible already:

https://nightly.mealie.io/documentation/getting-started/installation/frontend-config/

[eskahone]

Dear Michael!
Using the env variables is working and gives Mealie a very nice option to customize the color scheme.
However, the setting of the primary color, does not affect the header of of the (mobile) browser bar or of the PWA.

It seems that this color is hard-coded somewhere. I did find the color code of the orange in the PWA section of nuxt.config.js in the frontend folder. Not sure if this can be replaced.

[gravelfreeman]

Yeah this one is especially annoying. Still I want to thank @michael-genson for the tip which worked great so far. There's a few things I can't achieve and color is very limited. If anyone's interested in my version of the Dracula theme for Mealie here's what I've used.

I'll update once I have tested more and will add it to my docs.