Use logo compatible with both light and dark modes

[fbricon]

Currently, the extension is published to the marketplace with a logo compatible with a dark mode:
On the extension page of the marketplace:

In vscode's extensions view :

But it doesn't work in the publisher page, when displayed in a card:

It was proposed to replace the logo with a version compatible with a light mode:

That should work with the extension page on the marketplace and the publisher card, but not when viewed from within vscode, basically amounting to:

I think the best solution is to get logos with non-transparent cube edges:

• white edges for dark cube,
• black edges for white cube

cc @maxandersen

[fbricon]

Maybe @insectengine can help ;-)

[insectengine]

Hello @fbricon, I forwarded my original email I sent Max regarding this, but here is the content of the email I sent...

TLDR is we use the dark cubed version of the logo and a custom color for the background.

---

As per Max, the VSCode Marketplace uses a single image for the Card on the main page and the detail page.

Main marketplace: https://marketplace.visualstudio.com/search?term=quarkus&target=VSCode&category=All%20categories&sortBy=Relevance
Detail page: https://marketplace.visualstudio.com/items?itemName=redhat.vscode-quarkus

The issue is the card has a light background while the detail page has been set to a dark background. We’re currently using the logo designed for a dark background and parts are disappearing on the card view.

Looking at other pages, it seems we can control the background color of the detail page (so it’s not the default light grey).

Here are a couple examples of what other teams have done.
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools

I propose this solution:
https://design.jboss.org/quarkus/vscodeicon/images/vscodemarketplace_quarkusmarkup.png

1. We use the default icon for the card and detail page:
   https://design.jboss.org/quarkus/logo/final/PNG/quarkus_icon_rgb_128px_default.png
   (It has the dark cube in the middle so you may not see it because of the transparent background in Chrome)

2. We then set the background color of the detail page to a light blue derived from our blue color (#d8ebff)

3. If possible, we change the hyperlink for the “quarkus” title to our Medium Blue (#5995e4)

[fbricon]

@insectengine your plan only fixes the marketplace page, but not the extension page INSIDE vscode, as I described it, which will get way way more traffic than the red hat publisher page

[insectengine]

@fbricon - ah ok.. can you post a link to the page where it doesn't work so I can check it out?

[fbricon]

you need to install vscode (dark theme should be enabled by default), open the extension page (5th icon with squares on the left). Type quarkus to look for the extensions on the marketplace :

If we used the logo you recommended, it'd be black square on dark background

[insectengine]

@fbricon - question for you.. they only allow one logo throughout all of this process? It seems odd that they would have an option for light and dark on their site and only dark inside vs code. If possible, we should use the reverse logo inside the dark environment and the default one with the dark cube for the other pages on the site itself. Is this possible?

[fbricon]

Nope. Single icon for both the marketplace website and the extension view within VS Code.
As I said, the simplest solution would be to provide logos with colored edges. They'll work in both dark and light themes.

[insectengine]

We don't want to create a new version of the logo... it would ultimately cause more problems down the line.

How does one using the light background look on VS Code?

https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp
or
https://marketplace.visualstudio.com/items?itemName=kirkslota.karate-runner

[fbricon]

C#:

Karate Runner:

[insectengine]

@fbricon - I suggest we take a page from the karate runner usage. Let's put it on a background of the dark quarkus blue and have it mirror the logo's rounded corners.

So we have this icon (128x128):
https://design.jboss.org/quarkus/vscodeicon/images/quarkus_vscode_icon.png

It would look like this on the light card (the first one on the left):
https://design.jboss.org/quarkus/vscodeicon/images/vscodemarketplace_main_quarkusmarkup_v2.png

Then on the detail page:
https://design.jboss.org/quarkus/vscodeicon/images/vscodemarketplace_quarkusmarkup_v2.png

Finally inside VS code on their default dark:
https://design.jboss.org/quarkus/vscodeicon/images/vscode_interface_dark.png

[fbricon]

@insectengine fine by me, however it'll take a few days before we publish a new release on the VS Code Marketplace

[fbricon]

@xorye please update the icon to https://design.jboss.org/quarkus/vscodeicon/images/quarkus_vscode_icon.png, and in https://github.com/redhat-developer/vscode-quarkus/blob/master/package.json#L15, change the color to #d8ebff and the theme to light

[insectengine]

Awesome... thanks @fbricon !