Product icon theme

[piousdeer]

Now that the Command Center, a command/search/navigation bar in the custom title bar, has been introduced, it makes more sense to use that instead of the native title bar. Unfortunately, the custom title bar comes with Windows-styled window buttons. It'd be great if we could ship a product icon theme that'd replace just these three icons first, then it could potentially be expanded to replace more icons across the app.

[ceiphr]

This would be fantastic!

[piousdeer]

Okay, I've replaced most icons in the title bar. I won't replace any other icons for now in order not to create a mess of default and Adwaita icons next to each other. Not until the process is automated, then it could be a separate opt-in icon theme. Also I've found out you can hide the layout buttons by right clicking them. Good, I never liked them. It works quite nicely with other themes too. I had to create an icon font, and wow including translucency in font glyphs turned out not to be a trivial task. Luckily, I came across nanoemoji, which totally saved me. I'll wrap things up and make a commit a bit later.

[ceiphr]

Wow, that looks fantastic! I didn't expect it to make vscode feel so much like a native gtk/adwaita app, it's great!

Would it be possible to change the padding between window controls? That's the only thing that looks a bit off.

Regardless, I'm so excited to start testing this out!

[piousdeer]

Would it be possible to change the padding between window controls? That's the only thing that looks a bit off.

Unfortunately it's hardcoded here, so not without custom CSS (see #7 for my stance on that)

[ceiphr]

No worries, that's completely understandable! I look forward to the icons being added :cowboy_hat_face:

[piousdeer]

Please feel free to test the icons by cloning this repo, opening it in VS Code, and hitting F5. I'll publish a new version for everyone tomorrow.

[ceiphr]

Just tested it with VSCode 1.74-insider on Fedora 37 and the icons look perfect, thank you for implementing this!

[ceiphr]

I was able to get the icons looking near-native!

Albeit with some very janky custom css:

/* Make titlebar and window controls look more native */
#workbench\.parts\.titlebar {
    padding: 0px 2px !important;
}

.monaco-workbench .part.titlebar > .window-controls-container > .window-icon {
    border-radius: 100%;
    height: 19.92px;
    width: 19.92px;
    transform: scale(1.3);
    margin-top: 8px;
}

.monaco-workbench .part.titlebar > .window-controls-container {
    width: 112px !important;
    justify-content: space-around !important;
}

/* Close button hover is now gray */
.monaco-workbench
    .part.titlebar
    > .window-controls-container
    > .window-icon.window-close:hover {
    background-color: hsla(0, 0%, 100%, 0.1) !important;
}

This isn't something I ever expect to see in this project, and it's more obvious now why you'd want to avoid this.

But, something I wanted to note that I noticed was the icon padding within the circle. With SVGs having style="transform:scale(0.8)translate(2,2)", the scaling doesn't seem to be applied. The symbol within the window control circles is slightly larger than what you'd expect in adwaita. But with style="transform:scale(0.8)translate(2px,2px)" scaling does get applied. Of course, the issue is, nanoemoji doesn't like "2px" because it can't convert that to a float.

I know this is a tiny pet peeve issue, so it isn't an issue if it's put on the back burner, but do you know if there's any practical way to reduce the size of the icons?

[piousdeer]

Well, since you use custom CSS, you have the power to replace the icon completely. I don't think there's an easier way. Here I've modified the close icon in Inkscape to enlarge the background circle to 24x24 and got rid of all the transform stuff.

/* Tweaks to your CSS */
.monaco-workbench .part.titlebar > .window-controls-container > .window-icon {
    display: block;
    height: 24px;
    width: 24px;
    transform: none;
    margin-top: 6px;
}

/* Replace the icon */
.window-close:before {
    content: '' !important;
    height: 100% !important;
    display: block;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='16px' viewBox='0 0 24 24' width='16px' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle style='opacity:0.1' fill='currentColor' cx='12' cy='12' r='12' /%3E%3Cpath d='M 8.0035143,8 H 9.003075 9.034311 c 0.2537945,0.011719 0.5114942,0.128906 0.687198,0.3125 l 2.280248,2.28125 2.311484,-2.28125 C 14.57875,8.082031 14.758358,8.007812 15.000439,8 H 16 v 1 c 0,0.285156 -0.03514,0.550781 -0.24989,0.75 l -2.280248,2.28125 2.249012,2.25 C 15.906291,14.46875 16,14.734375 16,15 v 1 h -0.999561 c -0.265508,0 -0.531016,-0.09375 -0.718434,-0.28125 L 12.001757,13.4375 9.7215092,15.71875 C 9.5340916,15.90625 9.2685833,16 9.003075,16 H 8.0035143 v -1 c 0,-0.265625 0.093709,-0.53125 0.2811264,-0.71875 l 2.2802483,-2.25 L 8.2846407,9.75 C 8.0737954,9.554688 7.9800866,9.28125 8.0035143,9 Z m 0,0' fill='currentColor' /%3E%3C/svg%3E%0A");
    -webkit-mask-size: contain;
}

I went with mask and background instead of background-image because that doesn't seem like it can use the currentColor.

Here's how it looks next to a native app:

I appreciate your interest and attention to details!

[ceiphr]

Thank you so much, this is awesome! It now looks perfectly native:

Here's the full CSS:

/* Make titlebar and window controls look more native */
.monaco-workbench .part.titlebar {
    padding: 0px 1px !important;
}

.monaco-workbench .part.titlebar > .window-controls-container {
    width: 114px !important;
    justify-content: space-around !important;
}

/* Window control icon formatting */
.monaco-workbench .part.titlebar > .window-controls-container > .window-icon {
    display: block;
    height: 24px;
    width: 24px;
    transform: none;
    margin-top: 6px;
    border-radius: 100%;
    transition: background-color 100ms ease-in-out;
}

.window-close:before,
.window-max-restore.codicon-chrome-maximize:before,
.window-max-restore.codicon-chrome-restore:before,
.window-minimize:before {
    content: "" !important;
    height: 100% !important;
    display: block;
    background: currentColor;
    -webkit-mask-size: contain;
}

/* Replace the close icon */
.window-close:before {
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='16px' viewBox='0 0 24 24' width='16px' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle style='opacity:0.1' fill='currentColor' cx='12' cy='12' r='12' /%3E%3Cpath d='M 8.0035143,8 H 9.003075 9.034311 c 0.2537945,0.011719 0.5114942,0.128906 0.687198,0.3125 l 2.280248,2.28125 2.311484,-2.28125 C 14.57875,8.082031 14.758358,8.007812 15.000439,8 H 16 v 1 c 0,0.285156 -0.03514,0.550781 -0.24989,0.75 l -2.280248,2.28125 2.249012,2.25 C 15.906291,14.46875 16,14.734375 16,15 v 1 h -0.999561 c -0.265508,0 -0.531016,-0.09375 -0.718434,-0.28125 L 12.001757,13.4375 9.7215092,15.71875 C 9.5340916,15.90625 9.2685833,16 9.003075,16 H 8.0035143 v -1 c 0,-0.265625 0.093709,-0.53125 0.2811264,-0.71875 l 2.2802483,-2.25 L 8.2846407,9.75 C 8.0737954,9.554688 7.9800866,9.28125 8.0035143,9 Z m 0,0' fill='currentColor' /%3E%3C/svg%3E%0A");
}

/* Replace maximize icon */
.window-max-restore.codicon-chrome-maximize:before {
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='16px' viewBox='0 0 24 24' width='16px' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle style='opacity:0.1' fill='currentColor' cx='12' cy='12' r='12' /%3E%3Cpath style='transform:translate(4px,4px)' d='m 3.988281 3.992188 v 8.011718 h 8.011719 v -8.011718 z m 2 2 h 4.011719 v 4.011718 h -4.011719 z m 0 0' fill='currentColor' /%3E%3C/svg%3E%0A");
}

/* Replace restore icon */
.window-max-restore.codicon-chrome-restore:before {
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='16px' viewBox='0 0 24 24' width='16px' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle style='opacity:0.1' fill='currentColor' cx='12' cy='12' r='12' /%3E%3Cpath style='transform:translate(4px,4px)' d='m 4.988281 4.992188 v 6.011718 h 6.011719 v -6.011718 z m 2 2 h 2.011719 v 2.011718 h -2.011719 z m 0 0' fill='currentColor' /%3E%3C/svg%3E%0A");
}

/* Rplace minimize icon */
.window-minimize:before {
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='16px' viewBox='0 0 24 24' width='16px' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle style='opacity:0.1' fill='currentColor' cx='12' cy='12' r='12' /%3E%3Cpath style='transform:translate(4px,4px)' d='m 4 10.007812 h 8 v 1.988282 h -8 z m 0 0' fill='currentColor' /%3E%3C/svg%3E%0A");
}

/* Make hover background color more native */
.monaco-workbench
    .part.titlebar
    > .window-controls-container
    > .window-icon:hover {
    color: currentColor !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.monaco-workbench.vs-dark
    .part.titlebar
    > .window-controls-container
    > .window-icon:hover {
    color: currentColor !important;
    background-color: hsla(0, 0%, 100%, 0.05) !important;
}

This can, of course, break at anytime, but I'm happy it's working now. Thanks again for your help with this!

[cachandlerdev]

Just curious, if this technique was ever implemented (although it seems like it won't be, from the discussion) would it be possible to only show the window buttons present in native apps? For example, if someone's using stock Gnome and does not have a minimize or maximize button, would only the close button appear?

[piousdeer]

In a hypothetical scenario where custom CSS gets added, yes, that would be possible. We'd check which buttons are enabled with gsettings and alter the CSS accordingly.

[piousdeer]

Something was changed in VS Code 1.74 or 1.75, and the CSS above now results in invisible icons. To fix it, replace

    content: "" !important;
    height: 100% !important;

with

    height: 24px !important;
    width: 24px;

[a-plastic-bag]

Does anyone know how you would change ceiphr's CSS to hide the maximise button?

[piousdeer]

Try

.window-controls-container {
  width: auto !important;
}
.window-max-restore {
  display: none;
}