Generating theme previews before publishing (CLI tool)

[flowchartsman]

I am developing a new theme for VSCode (and others eventually), and I include screenshots of the theme in action in the README.md for the project. Currently, I have to manually screenshot the theme by debugging it and screenshotting the development preview for each theme variant. I would love to be able to generate these automatically before the theme is published. Is there a way to do this for local themes, using your code?

[jschr]

Sorry for the late response. This isn't possible at the moment but a CLI could be built to generate the same preview images used on the site locally.

If there's enough interest I'd consider building one or if anyone else is interested in contributing I'd be happy to help guide you.

[ykrx]

+1 would be very helpful

[flowchartsman]

So how is this done? I find myself pretty dissatisfied with the way I've been doing it, and would love to do it another way, thanks!

[jschr]

@flowchartsman The preview images are generated as SVG and PNG. I suspect for the README you would need to use PNGs. The code for this is in a private repo at the moment because it's messy and I just haven't spent the time to clean it up yet.

Are you interested in building the tool? I'd be happy to share the code with you in it's current state, you've been warned :-). It might only be useful if you're ok with using the exact same previews that vscodethemes.com uses though.

[flowchartsman]

So, I've actually found a way to do it in docker, using docker and xvfb :) This should make automating shots as part of builds a breeze, but I'm very curious what you use to generate the title bar portion of the image. Would you be able to share that with me? I'm guessing you do a gradient with the main background color of the theme?

Ideally I could whip up an imagemagic script to just add it to the screenshots I'm taking, but I could also wrap it in a simple html file with inline CSS.

[jschr]

The title bar is using the titleBar.activeBackground and titleBar.activeForeground settings from the theme.

I use defaults based on the type of theme if not set, which I grabbed from the VSCode codebase:

setting	type=dark	type=light	type=hc
titleBar.activeBackground	#3C3C3C	#DDDDDD	#000000
titleBar.activeForeground	#CCCCCC	#333333	#FFFFFF

Here's the SVG generation code: https://github.com/vscodethemes/utilities/blob/main/src/renderers.ts

Then I use the SVG + Puppeteer to make PNG previews.

Hope that helps!

[flowchartsman]

Thanks for that. I still haven't integrated that particular portion yet, but I do finally have a full example working for taking screenshots using xvfb and docker. It uses matchbox, so it's completely fullscreen and works really well, though it's really basic, since I just got it working, and it's hardcoded to get the solarized themes, but it shows promise. https://github.com/flowchartsman/vscode-docker-screenshots

Next steps will be config for things like resolutions and automations for installing all of the necessary colorschemes and such and, eventually, a github action. Let me know if you have any thoughts or find it useful!

[jschr]

While I still don't have an official CLI tool I've recently open sourced the backend code which has some code that could be a good starting point for generating the theme previews locally: https://github.com/vscodethemes/backend/tree/main/cli

[T3M1N4L]

Is it possible to extract pngs, instead of svg's from the website/or use the cli to generate pngs instead of svgs?

[jschr]

hey, yeah it is possible. The cli will output a png and an svg. Here is an example of the CLI command used to generate the images for a theme: https://github.com/vscodethemes/backend/blob/main/cli/Taskfile.yml#L23.

npx vscodethemes images \
  -d /path/to/extension \   # extension folder
  --path ./path/to/theme.json  \  # relative theme json file (from package.json contributes.themes[].path)
  --label themeName \ # theme name (from package.json contributes.themes[].label)
  --uiTheme themeType \ # vs-dark or vs (from package.json contributes.themes[].uiTheme)
  --output /images # output directory of png and svgs

The cli is pretty specific to how the backend is using it but hopefully this is a helpful starting point.