Add product icon themes

[miguelsolorio]

Would be rad if this theme added a product icon theme, though those are monochromatic and an icon font, which might be harder to pull off with the Windows NT style.

[manekinekko]

That's a wonderful idea! Thanks for suggesting @misolori I will see what I can do 😃

[phil294]

It's a shame that product icon themes don't support colored images. I just tried some native VSCode CSS modifications using vscode-custom-css (filepaths taken from Chicago95) and I think there's great potential. Mostly altered scrollbars and icons:

Chicago95 also has several icons assembled and categorized to quickly find fitting images, for example file mime types

[manekinekko]

Hi @phil294 I love this. Would you be able to send a PR to add this feature?

[phil294]

Hi @phil294 I love this. Would you be able to send a PR to add this feature?

It's impossible I think. I made it with vscode-custom-css (linked above), which is yet another (very hacky) extension for custom CSS. This is not possible with normal extension APIs

[phil294]

for reference, here is the css from the above screenshot

click to view

:root {
    --win-color-grey: #c0c0c0;
    --win-color-blue: #000080;
    --win-url-grey-chequered: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAABHNCSVQICAgIfAhkiAAAABpJREFUCJkFwQEBAAAIAiD7f0qXEaQtONiWB4CODXyQqjQ4AAAAAElFTkSuQmCC");
}
.scrollbar {
    background-image: var(--win-url-grey-chequered) !important;
}
.scrollbar.vertical {
    width: 16px !important;
    top: 16px !important;
    max-height: calc(100% - 48px);
}
.scrollbar.horizontal {
    height: 16px !important;
    left: 16px !important;
    max-width: calc(100% - 48px);
}
.scrollbar > .slider {
    background-color: var(--win-color-grey) !important;
    box-shadow: 1px 1px 0px white inset, -1px -1px 0 #868686 inset;
    border-width: 1px;
    border-style: solid;
    border-color: #dfdfdf #000 #000 #dfdfdf;
    box-sizing: border-box;
}
.scrollbar > .slider:hover, .scrollbar > .slider.active {
    background: var(--win-color-grey) !important;
}
.scrollbar.vertical > .slider {
    width: 16px !important; 
}
.scrollbar.horizontal > .slider {
    height: 16px !important; 
}
.monaco-scrollable-element > .scrollbar.vertical.invisible.fade {
    /* never hide scrollbars on mouseleave */
    opacity: unset !important;
}
.scrollbar::before, .scrollbar::after {
    position: absolute;
    content: '';
    width: 16px;
    height: 16px;
    z-index: 1;
}
.scrollbar.vertical::before {
    background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Theme/Chicago95/gtk-3.0/scrollbar/stepper-up.png');
    top: -16px;
}
.scrollbar.vertical::after {
    background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Theme/Chicago95/gtk-3.0/scrollbar/stepper-down.png');
    bottom: -16px;
}
.scrollbar.horizontal::before {
    background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Theme/Chicago95/gtk-3.0/scrollbar/stepper-left.png');
    left: -16px;
}
.scrollbar.horizontal::after {
    background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Theme/Chicago95/gtk-3.0/scrollbar/stepper-right.png');
    right: -16px;
}
/* bottom right edge between right and down arrows */
.editor .content .monaco-editor .monaco-scrollable-element::after,
.explorer-folders-view .monaco-scrollable-element::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    content: '';
    background: var(--win-color-grey);
}

.monaco-list.list_id_2 .monaco-list-rows {
    background: #d8d8d8 !important;
}
.monaco-list-row:nth-child(odd) {
    background: #d1d1d1;
}

#workbench\.parts\.activitybar .monaco-action-bar .action-item {
    border-bottom: solid 1px #808080;
    border-top: solid 1px #fff;
}
#workbench\.parts\.activitybar .monaco-action-bar .action-label.codicon::before{
    content: '' !important;
    width: 24px;
    height: 24px;
}
.codicon-explorer-view-icon:before { background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Icons/Chicago95/actions/24/edit-copy.png'); }
.codicon-search-view-icon:before { background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Icons/Chicago95/actions/24/system-search.png'); }
.codicon-run-view-icon:before { background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Icons/Chicago95/actions/24/system-run.png'); }
.codicon-source-control-view-icon:before { background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Icons/Chicago95/actions/24/mail-copy.png'); }
.codicon-remote-explorer-view-icon:before { background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Icons/Chicago95/places/24/folder-remote.png'); }
.codicon-extensions-view-icon:before { background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Icons/Chicago95/mimes/24/extension.png'); }
.codicon-test-view-icon:before { background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Icons/Chicago95/apps/24/checkbox.png'); }
.codicon-timeline-view-icon:before { background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Icons/Chicago95/actions/24/event-new.png'); }

/* side bar bookmarks icon. no idea if this id is specific to my installation or global */
.monaco-action-bar .action-label.activity-workbench-view-extension-bookmarks-5aa1a9fcb7924484f0d5f92576bdec933f30dda8 {
    -webkit-mask: unset !important;
    background-color: unset !important;
}
.monaco-action-bar .action-label.activity-workbench-view-extension-bookmarks-5aa1a9fcb7924484f0d5f92576bdec933f30dda8:before {
    background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Icons/Chicago95/places/24/user-bookmarks.png');
    width: 24px;
    height: 24px;
    content: '';
    position: absolute;
    left: 14px;
    top: 12px;
}
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label:not(.codicon), .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label:not(.codicon), .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label:not(.codicon) {
    background-color: unset !important;
}

/* close x buttons on tabs. somewhere else? */
.codicon-close:before {
    content: '' !important;
    background-image: url('https://raw.githubusercontent.com/grassmunk/Chicago95/master/Theme/Chicago95/gtk-3.0/buttons/close_normal.png');
    background-repeat: no-repeat;
    position: absolute;
    left: 1px;
    top: 1px; /* centered would be 2px but 1px looks better */
    width: 17px;
    height: 15px;
}

.tab.dirty-border-top > .tab-border-top-container {
    height: 4px !important;
}

.tab {
    margin-left: 4px;
    background-color: var(--win-color-grey) !important;
    box-shadow: 1px 1px 0px #dfdfdf inset, -1px -1px 0 #808080 inset;
    border-width: 1px;
    border-style: solid;
    border-color: #fff #000 #000 #fff;
    box-sizing: border-box;
}
.tab.active {
    font-weight: bold;
    background: var(--win-url-grey-chequered) !important;
    box-shadow: 1px 1px 0px #808080 inset, -1px -1px 0 #dfdfdf inset;
    border-color: #000 #fff #fff #000;
}

.action-item.checked .active-item-indicator:before,
.action-item:focus .active-item-indicator:before {
    border-left: 6px solid var(--win-color-blue) !important;
}

.monaco-workbench ::selection {
    /* because dark blue background issue #3 */
    color: white;
}
.scm-view .scm-editor-container .mtk1 {
    /* selection / text, hover, javascript, huge mess */
    color: #2d961b;
}

/* no scrollbar over tabs */
.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container>.monaco-scrollable-element .scrollbar {
    display: none;
}

[manekinekko]

Oh! Gotcha!