Getting started showing wrong theme image for HC

[miguelsolorio]

It's currently showing the monkai theme

cc @digitarald

[JacksonKearl]

Does there exist a theme image for monokai? I just took the highest-contrast image I could find from the figma file 🙊

[JacksonKearl]

@misolori Could we get this image as an SVG with theme tokens? Then I'd inject the colors for each theme as needed.

[miguelsolorio]

So you just want the HC one that's a themed svg right (excluding the rest)?

[JacksonKearl]

Ideally I'd have an SVG that references some sort of theme variables, which I'd replace programmatically with the colors from whatever theme we are trying to display. This would potentially allow us to have a pictorial representation of the current theme even when it's non-default.

[miguelsolorio]

So here's the svg but the only downside is the color syntax does not exist as css variables since they are different:

<svg width="160" height="100" viewBox="0 0 160 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="160" height="100" fill="var(--vscode-editor-background, #1E1E1E)" />
  <rect y="12" width="24" height="88" fill="var(--vscode-activityBar-background, #333333)" />
  <rect x="24" width="48" height="100" fill="var(--vscode-sideBar-background, #252526)" />
  <rect width="160" height="12" fill="var(--vscode-titleBar-activeBackground, #3C3C3C)" />
  <rect x="8" y="20" width="8" height="8" fill="var(--vscode-activityBar-foreground, #FFFFFF)" />
  <rect x="8" y="44" width="8" height="8" fill="var(--vscode-activityBar-inactiveForeground, #858585)" />
  <rect x="8" y="68" width="8" height="8" fill="var(--vscode-activityBar-inactiveForeground, #858585)" />
  <rect y="12" width="1" height="24" fill="var(--vscode-activityBar-activeBorder, #FFFFFF)" />
  <rect x="80" y="20" width="72" height="2" fill="var(--vscode-debugTokenExpression-name, #C586C0)" />
  <rect x="80" y="29" width="35" height="2" fill="var(--vscode-editor-selectionHighlightBackground, #9CDCFE)" />
  <rect x="80" y="38" width="55" height="2" fill="var(--vscode-debugTokenExpression-string, #C68C74)" />
  <rect x="80" y="47" width="44" height="2" fill="var(--vscode-editor-foreground, #D4D4D4)" />
  <rect x="80" y="56" width="68" height="2" fill="var(--vscode-debugView-valueChangedHighlight, #579CD6)" />
  <rect x="80" y="65" width="51" height="2" fill="var(--vscode-debugTokenExpression-number, #DCDCAA)" />
  <rect x="80" y="74" width="36" height="2" fill="var(--vscode-editor-foreground, #D4D4D4)" />
  <rect x="80" y="83" width="43" height="2" fill="var(--vscode-editor-selectionHighlightBackground, #9CDCFE)" />
</svg>

and here's the regular version for HC in case we ever want to use it:

<svg width="215" height="134" viewBox="0 0 215 134" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.2701" y="0.67" width="213.06" height="132.66" fill="black" stroke="#6FC3DF" stroke-width="1.34"/>
<rect x="1.67" y="11.67" width="30.66" height="121.66" fill="black" stroke="#6FC3DF" stroke-width="1.34"/>
<rect x="33.67" y="11.67" width="62.66" height="121.66" fill="black" stroke="#6FC3DF" stroke-width="1.34"/>
<rect x="1.2701" y="0.67" width="213.06" height="14.74" fill="black" stroke="#6FC3DF" stroke-width="1.34"/>
<rect x="11" y="27" width="10.72" height="10.72" fill="#F8F8F1"/>
<rect x="9.5" y="25.5" width="13.72" height="13.72" stroke="#F38518"/>
<rect x="11.3203" y="58.96" width="10.72" height="10.72" fill="#7A7B74"/>
<rect x="11.3203" y="91.1201" width="10.72" height="10.72" fill="#7A7B74"/>
<rect x="108.2" y="26.8" width="96.48" height="2.68" fill="#C586C0"/>
<rect x="108.2" y="38.86" width="46.9" height="2.68" fill="#9CDCFE"/>
<rect x="108.2" y="50.92" width="73.7" height="2.68" fill="#C68C74"/>
<rect x="108.2" y="62.98" width="58.96" height="2.68" fill="#D4D4D4"/>
<rect x="108.2" y="75.04" width="91.12" height="2.68" fill="#579CD6"/>
<rect x="108.2" y="87.1001" width="68.34" height="2.68" fill="#DCDCAA"/>
<rect x="108.2" y="99.1599" width="48.24" height="2.68" fill="#D4D4D4"/>
<rect x="108.2" y="111.22" width="57.62" height="2.68" fill="#9CDCFE"/>
<rect x="1.2701" y="0.67" width="213.06" height="132.66" stroke="#6FC3DF" stroke-width="1.34"/>
</svg>

[JacksonKearl]

Since fixed