feat: add "auto" variant for 2023 icons

[arthur-fontaine]

Since VSCode 1.42 (January 2020), VSCode supports automatic theme switching based on the system color scheme (see release notes).

Since the light icons do not match the dark themes, and the dark icons do not match the light themes, it may be useful to provide a variant called "Auto" that automatically switches to light or dark icons depending on the system color scheme.

I created a script that is automatically run when the extension is built (NPM automatically run prebuild script when the build script is run).

https://github.com/arthur-fontaine/vscode-jetbrains-icon-theme/blob/f5895c956612fb3eff6a8cd9b009a3dbc6e191f2/package.json#L13

This script will go through all the 2023 icons, pick the light and dark (if exists) for each one, and create a new SVG file with a group for the light icon and a group for the dark icon. These groups are displayed or not thanks to a media query in CSS (prefers-color-scheme). The script will also generate a new theme-auto.json file, based on theme-light.json.

Demo (look at the icons, e.g. the JS and the folder icons change colors):

https://github.com/cadamsdev/vscode-jetbrains-icon-theme/assets/57626613/3d53d5d9-e171-4d7a-9b30-42de527a695b

[cadamsdev]

Hey! Thanks for contributing. 🙂

A couple of things I would like to look into before we merge this.

1. Can we look into an approach where we don't have to commit the auto svg files?

   • Throwing out ideas but we could generate the "theme-auto.json" then place it inside a folder "dist" at the root dir (that dir would be gitignored). We would also copy over the generated auto svg files into that directory as well. Then we would update this path here to the "theme-auto.json" in the "dist" folder. Something like ./dist/themes/2023/theme.json

2. Instead of having 3 icon themes for "JetBrains Icon Theme 2023+" we could consolidate it down to 1 to keep the plugin simple. We can remove the existing dark and the auto one. Then we can update the existing light one to be the new auto one.

[arthur-fontaine]

(1) Yes. I think that we could rename the current themes folder to an assets folder. Then we would have a scripts/build.mjs script that packages the icons into a dist folder. This script is run by the prebuild NPM script.

(2) I think this is a bad idea. I think that a lot of people are still not using an adaptive theme (they still have a light theme but their computers are in dark mode, or vice versa). Since the icons are themed according to the OS color scheme, that would not fit for some people. So I think that we need to keep 3 icon themes. However, we could make the auto one the default?

[cadamsdev]

(1) Yes. I think that we could rename the current themes folder to an assets folder. Then we would have a scripts/build.mjs script that packages the icons into a dist folder. This script is run by the prebuild NPM script.

Sounds good to me.

(2) I think this is a bad idea. I think that a lot of people are still not using an adaptive theme (they still have a light theme but their computers are in dark mode, or vice versa). Since the icons are themed according to the OS color scheme, that would not fit for some people. So I think that we need to keep 3 icon themes. However, we could make the auto one the default?

That's fair. I'm ok with that. Feel free to make those changes.

[arthur-fontaine]

Just added the new build script, renamed the themes folder to assets and changed the theme paths in the package.json to point to dist.... Also rebased.

I let you version the package.

[cadamsdev]

Looks good to me. Thanks for contributing. 🙂

[arthur-fontaine]

Thank you for the collaboration 😉

[arthur-fontaine]

Seems like the extension is not built correctly 🫤.

[cadamsdev]

Seems like the extension is not built correctly 🫤.

Looks like the prebuild script is not being called.

We may need to call it before here

EDIT:

Should be fixed now in v2.11.1+