Skip to main content
Coding Theme

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#2c323d
  • activityBar.border#373c47
  • activityBar.foreground#a6a9ad
  • activityBarBadge.background#ffc929
  • activityBarBadge.foreground#2c323d
  • badge.background#ffc929
  • badge.foreground#2c323d
  • button.background#ffc929
  • debugExceptionWidget.background#373c47
  • debugExceptionWidget.border#f36781
  • debugIcon.breakpointForeground#f36781
  • debugToolBar.background#373c47
  • diffEditor.border#636770
  • diffEditor.diagonalFill#636770
  • diffEditor.insertedTextBackground#00cb7c22
  • diffEditor.removedTextBackground#f3678122
  • dropdown.background#373c47
  • editor.background#2c323d
  • editor.lineHighlightBackground#373c47
  • editor.selectionBackground#ffffff44
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#636770
  • editorCursor.foreground#636770
  • editorGroup.border#373c47
  • editorGroup.dropBackground#2c323d
  • editorGroup.emptyBackground#2c323d
  • editorGroupHeader.tabsBackground#373c47
  • editorGutter.addedBackground#00cb7c
  • editorGutter.background#2c323d
  • editorGutter.commentRangeForeground#636770
  • editorGutter.deletedBackground#f36781
  • editorGutter.foldingControlForeground#9065ff
  • editorGutter.modifiedBackground#ffc929
  • editorHoverWidget.background#373c47
  • editorLineNumber.activeForeground#636770
  • editorLineNumber.foreground#63677088
  • editorOverviewRuler.addedForeground#00cb7c44
  • editorOverviewRuler.background#2c323d
  • editorOverviewRuler.deletedForeground#f3678144
  • editorOverviewRuler.errorForeground#f00
  • editorOverviewRuler.modifiedForeground#ffc92944
  • editorOverviewRuler.wordHighlightForeground#636770
  • editorWhitespace.foreground#63677044
  • editorWidget.background#2c323d
  • extensionButton.prominentBackground#ffc929
  • extensionButton.prominentHoverBackground#ffdf7f
  • focusBorder#373c47
  • gitDecoration.addedResourceForeground#66e0b0
  • gitDecoration.conflictingResourceForeground#f36781
  • gitDecoration.deletedResourceForeground#f8a4b3
  • gitDecoration.ignoredResourceForeground#636770
  • gitDecoration.modifiedResourceForeground#ffdf7f
  • gitDecoration.submoduleResourceForeground#9065ff
  • gitDecoration.untrackedResourceForeground#79b8e8
  • input.background#2c323d
  • input.foreground#636770
  • input.placeholderForeground#636770
  • inputOption.activeBorder#ffc929
  • list.activeSelectionBackground#373c47
  • list.activeSelectionForeground#a6a9ad
  • list.focusBackground#ffc92966
  • list.highlightForeground#ffc929
  • list.hoverBackground#ffffff11
  • list.inactiveSelectionBackground#2c323d
  • minimap.background#2c323d
  • minimap.errorHighlight#f36781
  • minimap.findMatchHighlight#636770
  • minimap.selectionHighlight#636770
  • minimap.warningHighlight#ffc929
  • minimapGutter.addedBackground#00cb7c
  • minimapGutter.deletedBackground#f36781
  • minimapGutter.modifiedBackground#ffc929
  • minimapSlider.activeBackground#63677066
  • minimapSlider.background#63677033
  • minimapSlider.hoverBackground#63677066
  • panel.border#ffc929
  • peekView.border#373c47
  • peekViewEditor.background#2c323d
  • peekViewEditor.matchHighlightBackground#63677044
  • peekViewResult.background#2c323d
  • peekViewTitle.background#2c323d
  • pickerGroup.border#ffffff88
  • pickerGroup.foreground#ffffff88
  • progressBar.background#ffc929
  • scrollbar.shadow#0002
  • scrollbarSlider.activeBackground#63677066
  • scrollbarSlider.background#63677033
  • scrollbarSlider.hoverBackground#63677066
  • selection.background#373c47
  • sideBar.background#2c323d
  • sideBar.border#373c47
  • sideBarSectionHeader.background#373c47
  • sideBarSectionHeader.border#2c323d
  • sideBarTitle.foreground#636770
  • statusBar.background#373c47
  • statusBar.debuggingBackground#2c323d
  • statusBar.foreground#a6a9ad
  • statusBar.noFolderBackground#373c47
  • statusBarItem.prominentBackground#373c47
  • statusBarItem.prominentHoverBackground#373c47
  • tab.activeBackground#2c323d
  • tab.activeForeground#a6a9ad
  • tab.activeModifiedBorder#ffc929
  • tab.border#63677044
  • tab.inactiveBackground#373c47
  • tab.inactiveForeground#636770
  • terminal.ansiBlack#636770
  • terminal.ansiBlue#1f88d9
  • terminal.ansiBrightBlack#a6a9ad
  • terminal.ansiBrightBlue#79b8e8
  • terminal.ansiBrightCyan#66ecc2
  • terminal.ansiBrightGreen#66e0b0
  • terminal.ansiBrightMagenta#bca3ff
  • terminal.ansiBrightRed#f8a4b3
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#ffdf7f
  • terminal.ansiCyan#00e09a
  • terminal.ansiGreen#00cb7c
  • terminal.ansiMagenta#9065ff
  • terminal.ansiRed#f36781
  • terminal.ansiWhite#d3d4d6
  • terminal.ansiYellow#ffc929
  • terminal.foreground#636770
  • titleBar.activeBackground#373c47

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant, variable.parameter, meta.object.member variable.other.constant, entity.other.ng-binding-name.property entity, entity.other.attribute-name, entity.other.attribute-name entity#ffc929
keyword.other.unit, support.constant#ffdf7f
entity.name.function, entity.name.tag, meta.tag punctuation.definition.tag#1f88d9
support, meta.decorator varaible, meta.decorator entity.name.function, entity.other.attribute-name.class, meta.tag entity.name.function#79b8e8
keyword, source.css variable, entity.other.ng-binding-name.template, entity.other.ng-binding-name.template entity, entity.name.function.pipe#f36781
constant.language, storage.type.property, variable.language, text.html variable, text.html variable.other.object#f8a4b3
entity, meta.import variable, entity.other.attribute-name.pseudo-class, meta.tag.custom entity.name.tag, meta.tag.custom punctuation.definition.tag#9065ff
storage, support.type, constant.language.null#bca3ff
string, support.type.property-name#00cb7c
meta.type.annotation variable.object.property, meta.object-literal.key, meta.structure.dictionary support.type.property-name#66e0b0
comment#636770
variable.other.object#a6a9ad
Puking Unicorn by mcelin - VS Code Theme