Need to have a full list of theme override tokens with their examples in the UI

[vittorius]

Or a command in the command palette e.g. "debug: show theme token hints" to show hints in the UI for things like "info.background" etc. Because it's pretty clear how to color the language syntax tokens but it's obscure for the Zed UI parts.

[not-a-cowfr]

(for a full list of the theme variables, look at the docs)

but I agree that the debug: theme preview could use additional work, from my experience its pretty annoying to use and usually not even helpful, I think if these changes are made it could be so much better:

• hover hint
  • some colors have no hint at all
  • some use outdated key names, one example is version_control_modified was changed to version_control.modified but it does not reflect that
  • display the color as a hex, not hsla, since hex is used for defining the colors, hsla (though better imo) is entirely useless
• examples
  • some of the examples are used for the wrong things, eg. selected text color example changes the text color instead of text background
  • header and wrapped text example are useless for themes, no need to include them, especially when there's already a separate page that has that info

and what i think would be the best tool for theme creation, an element selector
like browser devtools element selector you could use this to get info about an element, including its theme keys and colors

[vittorius]

Hey @not-a-cowfr, thanks for the response.

(for a full list of the theme variables, look at the docs)

But where exactly? This looks very poor to me.

[not-a-cowfr]

But where exactly? This looks very poor to me.

damn, could've sworn it was way longer than this, maybe i was thinking of some other page that wasn't theme related

since this is the case though your best bet for a list is to look at a pre-existing theme, thats how i made my theme, just fork a repo and change all the colors. a docs issue should also be opened for this if there isnt already #21994