[feature idea]: @clack/prompts support for many different themes, variants, and colors

[cpreston321]

Is your feature request related to a problem? Please describe.

No

Describe the solution you'd like

Since prompts is super nice it would be since to see a way to either change the theme of the prompts either containing theme within another repo that has those themes, but since prompts is one color and has default set of icons. You could possibly create a way to customize the colors through config or maybe some type of system that can define these as a variant or theme. Since prompts is more a granular term but could be perceived as an all in one alternative solution for CLI prompts.

Describe alternatives you've considered

N/A

Additional context

I would like to discuss more here but it's an idea. Even though @clack/prompts is a wrapper for core I foresee it being bigger package that is built off of core that can include many handy utils, functions, and prompts. Maybe it's the wrong package for it. I am kinda thinking of variants like astro-theme, clack-theme and these will drive icons, styles etc.

[natemoo-re]

I like this idea a lot and have similar thoughts. I haven't really sketched it out yet, but totally agree that theming would be a really powerful feature.

If you have any API ideas I'm all ears!

[cpreston321]

I think theming can go many ways like if you want the theme layer to be at the core package and have a class that can drive themes. The could potentially be the base point that then, you can extend it within prompts that will create a bigger theme for prompts and then add custom variants/themes to inputs that was wrapped within prompts.

The only problem with injecting a theme within core is that you will have multiple prompts with the same config. So goes back to whats the best way to apply global settings that will look at the applied settings. You could possibly use unjs/c12 smart configuration loader from the root of the directory. To then load a config file of your choice to then drive global configuration. Or it could be at the core level but since this is a CLI root doesn't seem bad to have something at the root level config that can drive settings.

[kevinwolfcr]

@natemoo-re I think you could benefit from the NodeJS's AsyncLocalStorage class, and use something like React Context to propagate the user-defined theme through all the prompts. So the API could be something like this:

import { run } from `@clack/prompts`

run(async () => {
  // your cli code here...
}, { theme: someThemeConfig, onCancel: someCustomCancelHandling })

[pi0]

I just started experimenting (amazing) clack with unjs/consola (unjs/consola#170, unjs/consola#169).

Currently had to make an inline copy/paste of @clack/prompts in order to customize symbols for CLI consistency. It would be amazing if exposed utils, can accept an optional styles or theme object (defaulting to currently static consts) and use this styles internally.

[natemoo-re]

Hey folks, finally (oof) getting back to this project and am still interested in making this happen. I think having a lower-level rendering engine is a big missing piece here, but it's a concept I've been hacking on for the past few months. Once that's in place, I think we'll have much better primitives to expose for theming.

That being said, there's definitely some improvements we could make in the interim. I don't want to block on a big project that hasn't totally taken shape yet.

For some good news, there's now an updateSettings() function in @clack/core that we could replicate to have some global settings for the @clack/prompts styling. Even just the ability to toggle the line prefix and customize a few symbols would be a big step in the right direction.