Some customization suggestions to bring it even closer to IntelliJ’s theme

[PeterShaws]

UI color

jsannotations.annotationForeground is given by the JS Parameter Annotations extension.

{
  "workbench.colorCustomizations": {
    "[Webstorm IntelliJ Darcula Theme]": {
      "activityBar.activeBackground": "#4e5254",
      "activityBar.activeBorder": "#3b9eba",
      "activityBar.border": "#2e2f2f",
      "activityBar.foreground": "#bababa",
      "activityBar.inactiveForeground": "#bababa",
      "breadcrumb.activeSelectionForeground": "#6696bd",
      "breadcrumb.background": "#303234",
      "breadcrumb.focusForeground": "#6696bd",
      "breadcrumbPicker.background": "#3c3f41ee",
      "editor.selectionBackground": "#1f4085",
      "editorGroupHeader.noTabsBackground": "#3c3f41",
      "editorGroupHeader.tabsBackground": "#3c3f41",
      "editorGutter.background": "#313335",
      "editorHoverWidget.background": "#3c3f41ee",
      "editorHoverWidget.border": "#252525c0",
      "editorIndentGuide.activeBackground": "#434343",
      "editorIndentGuide.background": "#373737",
      "editorLink.activeForeground": "#5398f3",
      "editorRuler.foreground": "#373737",
      "editorSuggestWidget.background": "#3c3f41ee",
      "editorSuggestWidget.border": "#252525C0",
      "editorSuggestWidget.foreground": "#b7b7b7",
      "editorSuggestWidget.highlightForeground": "#cd75d3",
      "editorSuggestWidget.selectedBackground": "#004fa3",
      "editorWidget.background": "#3c3f41ee",
      "jsannotations.annotationForeground": "#787878",
      "menu.background": "#3c3f41ee",
      "menu.selectionBackground": "#004fa3",
      "menu.selectionForeground": "#dddddd",
      "notificationLink.foreground": "#5398f3",
      "panel.border": "#2e2f2f",
      "peekViewEditor.matchHighlightBackground": "#ea5c004d",
      "peekViewResult.background": "#001f33",
      "peekViewResult.selectionBackground": "#00000090",
      "scrollbar.shadow": "#00000000",
      "scrollbarSlider.activeBackground": "#555758B0",
      "scrollbarSlider.background": "#55575870",
      "scrollbarSlider.hoverBackground": "#55575890",
      "sideBar.border": "#2e2f2f",
      "sideBarSectionHeader.background": "#3c3f41",
      "sideBarSectionHeader.border": "#2e2f2f",
      "statusBar.border": "#2e2f2f",
      "statusBar.noFolderBackground": "#3c3f41",
      "tab.activeBorder": "#3b9eba",
      "tab.border": "#2e2f2f",
      "tab.inactiveBackground": "#3c3f41",
      "tab.inactiveForeground": "#bababa",
      "tab.unfocusedActiveBackground": "#4e5254",
      "tab.unfocusedActiveBorder": "#747a80",
      "tab.unfocusedActiveForeground": "#bababa",
      "tab.unfocusedInactiveForeground": "#bababa",
      "terminal.border": "#3c3f41",
      "textLink.activeForeground": "#5398f3",
      "textLink.foreground": "#5398f3",
      "titleBar.activeBackground": "#3c3f41",
      "titleBar.activeForeground": "#bababa",
      "titleBar.border": "#2e2f2f",
      "titleBar.inactiveBackground": "#3c3f41",
      "titleBar.inactiveForeground": "#bababa80"
    }
  }
}

Syntax colors

Disclaimer, I’ve only tested these with TypeScript. I deviated a little in the JSDoc definitions in an attempt to improve their legibility a bit.

{
  "editor.tokenColorCustomizations": {
    "[Webstorm IntelliJ Darcula Theme]": {
      "textMateRules": [
        {
          "name": "Line/HTML comments",
          "scope": [
            "comment.line",
            "comment.block.html"
          ],
          "settings": {
            "fontStyle": ""
          }
        },
        {
          "name": "JSDoc types",
          "scope": "entity.name.type.instance.jsdoc",
          "settings": {
            "foreground": "#a9b7c6"
          }
        },
        {
          "name": "JSDoc variables",
          "scope": "variable.other.jsdoc",
          "settings": {
            "foreground": "#90734b"
          }
        },
        {
          "name": "JSDoc definition 'at' signs",
          "scope": "punctuation.definition.block.tag.jsdoc",
          "settings": {
            "foreground": "#6a8759"
          }
        },
        {
          "name": "JSDoc definition brackets",
          "scope": [
            "punctuation.definition.bracket.curly.begin.jsdoc",
            "punctuation.definition.bracket.curly.end.jsdoc",
            "punctuation.definition.optional-value.begin.bracket.square.jsdoc",
            "punctuation.definition.optional-value.end.bracket.square.jsdoc"
          ],
          "settings": {
            "foreground": "#808080"
          }
        },
        {
          "name": "Decorator 'at' signs",
          "scope": "punctuation.decorator.ts",
          "settings": {
            "foreground": "#ffc66d"
          }
        },
        {
          "name": "Properties/variables in TS expressions in templates",
          "scope": "variable.other.readwrite.ts",
          "settings": {
            "foreground": "#9876aa"
          },
        },
        {
          "name": "HTML attributes",
          "scope": "support.type.object.html-attribute",
          "settings": {
            "foreground": "#a9b7c6",
            "fontStyle": ""
          }
        }
      ]
    }
  }
}

More

These require the Customize UI extension, AFAICT, unless a theme is able to change them.

{
  "customizeUI.stylesheet": {
    ".monaco-editor .lines-content": "padding-left: 0.5em",
    ".header .monaco-editor .lines-content, .settings-header .monaco-editor .lines-content, .panel.bottom .monaco-editor .lines-content": "padding-left: 0",
    ".monaco-editor-overlaymessage": "margin-left: 0.65em;",
    ".margin-view-overlays": "box-shadow: inset -1px 0 0 0 #5555557f",
    ".header .monaco-editor .margin-view-overlays, .settings-header .monaco-editor .margin-view-overlays, .panel.bottom .monaco-editor .margin-view-overlays": "box-shadow: none",
    ".monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container": "height: 2px;",
    ".monaco-icon-label > .monaco-icon-label-description-container:only-child, .monaco-icon-label > .monaco-icon-label-description-container:first-child:nth-last-child(2)": "width: 100%",
    ".monaco-workbench .activitybar>.content :not(.monaco-menu)>.monaco-action-bar .action-label.codicon": "--font-size-15: 24px",
    ".monaco-editor .current-line ~ .line-numbers": "color: #a3a3a3",
    ".monaco-editor .margin-view-overlays .current-line-margin": "background-color: transparent",
    ".monaco-editor .view-overlays .current-line, .monaco-diff-editor .cdr.line-insert, .monaco-diff-editor .cdr.line-delete, .monaco-editor .cdr.line-insert, .monaco-editor .cdr.line-delete": "margin-left: -0.5em",
    ".monaco-breadcrumbs::after": "content: ''; position: absolute; left: 69px; bottom: 0px; width: calc(100% - 69px); height: 1px; background-color: #5555557f",
    ".monaco-editor .margin-view-overlays .codicon-chevron-down, .monaco-editor .margin-view-overlays .codicon-chevron-right, .monaco-panel-view .panel>.panel-header>.twisties": "font-size: var(--font-size-10)"
  },
}

[xr0master]

Hey Peter, I'm sorry for this delay! Thank you very much. Can I ask you to do PR? I will also test this on my part. And if you have a screenshot before and after, it will be awesome.