OneDark-Pro

OneDark-Pro copied to clipboard

I've written some CSS rules that will make VSCode look further like Atom. It is of my understanding that it's not possible right now for a theme to inject global CSS, but I could be wrong.

Nonetheless I'd like to leave this here if this changes in the future, or if anyone wants their editor to look more like Atom today by using Custom CSS and JS Loader or Customize UI.

These are the CSS rules usable with Custom CSS and JS Loader:

/* Color the left side of active tabs */
.tab.active {
  border-left: 2px solid #598DEF;
}

/* Change the color of dirty tabs */
.tab.dirty .tab-actions {
  color: #598DEF
}

/* Color the titlebar appropriately */
#workbench\.parts\.titlebar {
  font-weight: bold!important;
  background-color: #393435!important;
  color: #B5B0B4!important;
}
#workbench\.parts\.titlebar.inactive {
  background-color: #2E282C!important;
  color: #6F696D!important;
}

/* Hide title actions in file explorer */
#workbench\.parts\.sidebar .title-actions {
  display: none!important;
}

/* Fix file explorer title */
#workbench\.parts\.sidebar > .composite.title > .title-label > h2 {
  visibility: hidden;
}
#workbench\.parts\.sidebar > .composite.title > .title-label > h2::after {
  content: "Project";
  visibility: visible;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #D7DAE0;
  font-family: system-ui;
  font-size: 12px;
  text-transform: capitalize;
}

/* Disable the focus border of the file explorer */
.explorer-folders-view.file-icon-themable-tree.show-file-icons > div::before {
  outline: none!important;
}

/* Disable the indentation guide of the file explorer */
#workbench\.parts\.sidebar .indent-guide {
  border: none!important;
}

/* Use same icons as Atom */
.monaco-tl-twistie.collapsed::before {
  content: url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"12\" viewBox=\"0 0 8 16\" fill=\"%23D7DAE0\"><path d=\"M7.5 8l-5 5L1 11.5 4.75 8 1 4.5 2.5 3z\"/></svg>")!important;
  transform: translateY(-2px)!important;
}
.codicon-tree-item-expanded::before {
  content: url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7.5\" height=\"12\" viewBox=\"0 0 10 16\" fill=\"%23D7DAE0\"><path d=\"M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6z\"/></svg>")!important;
  transform: translateY(-2px)!important;
}

/* Fix item height */
#workbench\.parts\.sidebar .monaco-list-row {
  height: 25px!important;
  line-height: 25px!important;
}
#workbench\.parts\.sidebar .explorer-item {
  height: 25px!important;
  line-height: 25px!important;
}

These are the same rules converted for use with Customize UI, set in settings.json.

"customizeUI.stylesheet": {
    // Color the left side of active tabs
    ".tab.active": "border-left: 2px solid #598DEF",
    // Change the color of dirty tabs
    ".tab.dirty .tab-actions": "color: #598DEF",
    // Color the titlebar appropriately
    "#workbench\\.parts\\.titlebar": "font-weight: bold!important;background-color: #393435!important; color: #B5B0B4!important",
    "#workbench\\.parts\\.titlebar.inactive": "background-color: #2E282C!important; color: #6F696D!important",
    // Hide title actions in the file explorer
    "#workbench\\.parts\\.sidebar .title-actions": "display: none!important",
    // Fix the file explorer title
    "#workbench\\.parts\\.sidebar > .composite.title > .title-label > h2": "visibility: hidden",
    "#workbench\\.parts\\.sidebar > .composite.title > .title-label > h2::after": "content: \"Project\"; visibility: visible; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: #D7DAE0; font-family: system-ui; font-size: 12px; text-transform: capitalize",
    // Disable the focus border of the file explorer
    ".explorer-folders-view.file-icon-themable-tree.show-file-icons > div::before": "outline: none!important",
    // Disable the indentation guide of the file explorer
    "#workbench\\.parts\\.sidebar .indent-guide": "border: none!important",
    // Use the same icons as Atom
    ".monaco-tl-twistie.collapsed::before": "content: url(\"data:image/svg+xml; utf8, <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"6\\\" height=\\\"12\\\" viewBox=\\\"0 0 8 16\\\" fill=\\\"%23D7DAE0\\\"><path d=\\\"M7.5 8l-5 5L1 11.5 4.75 8 1 4.5 2.5 3z\\\"/></svg>\")!important; transform: translateY(-2px)!important",
    ".codicon-tree-item-expanded::before": "content: url(\"data:image/svg+xml; utf8, <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"7.5\\\" height=\\\"12\\\" viewBox=\\\"0 0 10 16\\\" fill=\\\"%23D7DAE0\\\"><path d=\\\"M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6z\\\"/></svg>\")!important; transform: translateY(-2px)!important",
    // Fix file explorer item height
    "#workbench\\.parts\\.sidebar .monaco-list-row": "height: 25px!important; line-height: 25px!important",
    "#workbench\\.parts\\.sidebar .explorer-item": "height: 25px!important; line-height: 25px!important",
}

Furthermore, the following settings can be set to further make your experience more like that of Atom:

"explorer.confirmDragAndDrop": false,
"editor.minimap.enabled": true,
"editor.minimap.showSlider": "always",
"editor.minimap.scale": 1,
"editor.minimap.renderCharacters": false,
"editor.matchBrackets": "always",
"editor.colorDecorators": false,
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"workbench.colorCustomizations": {
    "list.errorForeground": "#F66146",
    "list.warningForeground": "#FFA08D",
    "gitDecoration.modifiedResourceForeground": "#E2C08D",
    "gitDecoriation.untrackedResourceForeground": "#73C990",
    "foreground": "#9DA5B3",
    "gitDecoration.ignoredResourceForeground": "#6B727D",
    "editor.background": "#282C34",
    "editorError.foreground": "#F66146",
    "editorInfo.foreground": "#F66146",
    "editorWarning.foreground": "#E2C08D",
    "list.activeSelectionBackground": "#4F7AC9"
},
"workbench.tree.indent": 17,
"editor.renderWhitespace": "all",
"workbench.editor.tabSizing": "shrink",
"workbench.activityBar.visible": false,
"explorer.openEditors.visible": 0,
"window.title": "${activeEditorShort}${separator}${rootPath}",
"breadcrumbs.enabled": false,
"editor.scrollBeyondLastLine": false,
"editor.renderIndentGuides": false,
"explorer.decorations.badges": true,
"window.zoomLevel": 0,
"editor.fontSize": 14,
"editor.lineHeight": 21

The missing piece of the puzzle would be an Atom-like search function. That is, a standalone page for searching for files based on contents, removing the search popup for CTRL+D / CMD+D and docking the search at the bottom with search/replace always expanded.

hey owner why you ain't commenting on this?