So, I have reported the issue that we’re having with custom themes messing up the button’s gradient color.

Turns out the custom themes are not generating the needed overwrites for variants of --color-primary that the buttons use for gradients and they are not explicitly allowing users to change them through their color picker. This leads to a bad customization experience.

How to fix this (desktop client is recommended for this operation):

1. Click on the “Theme” button on the left sidebar.
2. Select your beautiful custom theme.
3. Click on “Export”. Your theme will be copied to your clipboard.
4. Paste your theme in your favorite plain text editor. I recommend jsonformatter.org since it automatically formats your text.
5. Add 200 and 800 to the primary field. You can use htmlcolorcodes.com’ s color picker to pick your favorite colors. Once you picked it, copy and paste the “RGB” field to your color theme file.
6. Once you’re done, save / download your new theme file.
7. Back to the “Theme” page, make sure your custom theme is still selected and click on “Import”. Paste your modified theme file’s contents on the modal that will pop up.

And you’re done! Hopefully the photon people will fix this soon enough… In the meantime, this fix persists through refreshes and hard refreshes of the web ui. Just in case, keep your custom theme file saved somewhere accessible (or share it with everyone by creating a post in here!)