Custom themes clash with hardcoded button gradients · Issue #718 · Xyphyn/photon
github.com
Describe the bug When users create a custom ui theme, they notice that the upvote / add comment buttons display a gradient from a color A to a color B. Color A is modifiable by them, but Color B is...

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!)

  • mljemy
    2·
    1 month ago

    Wow thats a considerably easier fix than what I thought this post would be, why tf didnt they just add the option of editing those two if they already exist so neatly…

    • mljemy
      1·
      1 month ago

      Anyway, obviously i tested all the other numbers inbetween, they dont seem to affect anything, 800 doesnt seem to be responsible for anything either unless its something hidden away or mobile only, if you just add 200 youre good (I was really hoping one of them changed the color of the downvote but its ok since i love everyone here and would never downvote any of you so its ok <3) (except when yash sneedposts)

      • chemOPMA
        2·
        1 month ago

        800 is part of the gradient for the light theme :)

        • mljemy
          2·
          1 month ago

          Ahhh i see, i would never… Ty for the post btw in hindsight really could have done it myself I just really assumed that id have to do some css bullshit and make my own full custom ones and that it wouldnt work with the theme itself… because like if it would why not just add a button… but whatever

          • chemOPMA
            2·
            1 month ago

            You’d be surprised 😸 frontend development is a mess sometimes… Easy to miss stuff…