Product icon theme #11

piousdeer · 2022-08-09T14:30:13Z

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 · 2022-11-25T23:25:01Z

This would be fantastic!

piousdeer · 2022-11-30T18:08:59Z

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 · 2022-11-30T18:25:25Z

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 · 2022-11-30T18:38:40Z

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 · 2022-11-30T18:44:48Z

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

piousdeer · 2022-12-01T00:21:02Z

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 · 2022-12-01T01:20:21Z

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

ceiphr · 2022-12-01T23:47:24Z

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 · 2022-12-02T13:51:33Z

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 · 2022-12-02T20:42:57Z

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 · 2022-12-08T19:01:25Z

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 · 2022-12-08T19:32:58Z

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 · 2023-03-01T03:59:14Z

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 · 2023-12-02T05:42:01Z

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

piousdeer · 2023-12-02T15:42:31Z

Try

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

piousdeer added enhancement New feature or request help wanted Extra attention is needed labels Aug 9, 2022

piousdeer self-assigned this Nov 29, 2022

piousdeer removed the help wanted Extra attention is needed label Nov 30, 2022

piousdeer added a commit that referenced this issue Dec 1, 2022

Add product icons (see #11)

3d3061f

piousdeer closed this as completed Dec 1, 2022

piousdeer mentioned this issue Mar 6, 2023

Inconsistent color, size and gap, and rectangle artifact on normal, hover and active state of titlebar button #21

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Product icon theme #11

Product icon theme #11

piousdeer commented Aug 9, 2022

ceiphr commented Nov 25, 2022

piousdeer commented Nov 30, 2022

ceiphr commented Nov 30, 2022

piousdeer commented Nov 30, 2022

ceiphr commented Nov 30, 2022

piousdeer commented Dec 1, 2022

ceiphr commented Dec 1, 2022

ceiphr commented Dec 1, 2022

piousdeer commented Dec 2, 2022

ceiphr commented Dec 2, 2022

cachandlerdev commented Dec 8, 2022

piousdeer commented Dec 8, 2022

piousdeer commented Mar 1, 2023

a-plastic-bag commented Dec 2, 2023

piousdeer commented Dec 2, 2023

Product icon theme #11

Product icon theme #11

Comments

piousdeer commented Aug 9, 2022

ceiphr commented Nov 25, 2022

piousdeer commented Nov 30, 2022

ceiphr commented Nov 30, 2022

piousdeer commented Nov 30, 2022

ceiphr commented Nov 30, 2022

piousdeer commented Dec 1, 2022

ceiphr commented Dec 1, 2022

ceiphr commented Dec 1, 2022

piousdeer commented Dec 2, 2022

ceiphr commented Dec 2, 2022

cachandlerdev commented Dec 8, 2022

piousdeer commented Dec 8, 2022

piousdeer commented Mar 1, 2023

a-plastic-bag commented Dec 2, 2023

piousdeer commented Dec 2, 2023