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#1e1e1e
  • activityBar.foreground#58c7a2
  • badge.background#1e1e1e
  • breadcrumb.foreground#d5ad3f
  • button.background#343434
  • button.foreground#d5ad3f
  • descriptionForeground#d5ad3f
  • dropdown.background#343434
  • dropdown.foreground#d5ad3f
  • editor.background#1e1e1ea3
  • editor.foreground#c49949
  • editor.lineHighlightBackground#6dd4b238
  • editor.selectionBackground#6dd4b238
  • editorBracketHighlight.foreground1#b96f2e
  • editorBracketHighlight.foreground2#c49949
  • editorBracketHighlight.foreground3#6dd4b28c
  • editorCursor.foreground#d5ad3f
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorHoverWidget.background#1e1e1eeb
  • editorLineNumber.activeForeground#6dd4b28c
  • editorLineNumber.foreground#6dd4b2
  • editorWhitespace.foreground#6dd4b28c
  • editorWidget.background#1e1e1e
  • editorWidget.foreground#d5ad3f
  • errorForeground#c74031
  • focusBorder#d5ad3f
  • foreground#d5ad3f
  • gitDecoration.deletedResourceForeground#c74031
  • gitDecoration.modifiedResourceForeground#00ffb3
  • icon.foreground#d5ad3f
  • input.background#343434
  • input.foreground#d5ad3f
  • input.placeholderForeground#5e5e65
  • inputOption.activeBackground#6dd4b28c
  • inputOption.activeForeground#fff
  • inputValidation.errorBackground#1e1e1ea3
  • inputValidation.errorBorder#c74031
  • inputValidation.infoBackground#1e1e1ea3
  • inputValidation.infoBorder#b96f2e
  • inputValidation.warningBackground#1e1e1ea3
  • list.activeSelectionBackground#d5ad3f
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#d5ad3f
  • list.hoverBackground#343434
  • list.inactiveSelectionBackground#343434
  • menu.background#1e1e1ea3
  • menu.foreground#d5ad3f
  • merge.currentContentBackground#6dd4b28c
  • merge.currentHeaderBackground#343434
  • merge.incomingContentBackground#b96f2e
  • merge.incomingHeaderBackground#343434
  • minimap.selectionHighlight#6dd4b238
  • panelTitle.activeForeground#d5ad3f
  • peekView.border#b96f2e
  • peekViewEditor.background#1e1e1ea3
  • peekViewEditor.matchHighlightBackground#1e1e1e
  • peekViewResult.background#1e1e1ea3
  • peekViewTitle.background#1e1e1ea3
  • pickerGroup.border#b96f2e
  • pickerGroup.foreground#d5ad3f
  • ports.iconRunningProcessForeground#58c7a2
  • progressBar.background#1e1e1e
  • quickInputList.focusBackground#1e1e1e
  • scrollbarSlider.activeBackground#343434
  • scrollbarSlider.background#343434
  • scrollbarSlider.hoverBackground#343434
  • selection.background#1e1e1e
  • sideBar.background#1e1e1ea3
  • sideBar.foreground#d5ad3f
  • statusBar.background#1e1e1ea3
  • statusBar.debuggingBackground#1e1e1e
  • statusBar.foreground#d5ad3f
  • statusBar.noFolderBackground#1e1e1e
  • statusBarItem.remoteBackground#1e1e1ea3
  • statusBarItem.remoteForeground#d5ad3f
  • tab.activeForeground#6dd4b2
  • tab.inactiveBackground#131510
  • tab.inactiveForeground#6dd4b28c
  • tab.lastPinnedBorder#6dd4b2
  • terminal.background#1e1e1e
  • terminal.foreground#d5ad3f
  • textBlockQuote.background#1e1e1e
  • textBlockQuote.border#b96f2e
  • textCodeBlock.background#1e1e1ea3
  • textLink.activeForeground#d5ad3f
  • textLink.foreground#d5ad3f
  • textPreformat.foreground#b96f2e
  • textSeparator.foreground#b96f2e
  • titleBar.activeBackground#1e1e1ea3
  • titleBar.activeForeground#d5ad3f
  • tree.indentGuidesStroke#6dd4b28c
  • widget.shadow#1e1e1ea3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d5ad3f
meta.embedded, source.groovy.embedded#d5ad3f
variable.parameter.function#d5ad3f
comment, punctuation.definition.comment#5e5e65
punctuation, punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#b96f2e
none#d3af86
keyword.operator#58c7a2
keyword, keyword.control, keyword.operator.new.cpp, keyword.operator.delete.cpp, keyword.other.using, keyword.other.operator#b96f2e
variable#71a573
entity.name.function, meta.require, support.function.any-method#58c7a2
support.class, entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#c74031
keyword.other.special-method#b96f2e
storage#b96f2e
support.function, support.type.property-name.json.comments#c74031
string, constant.other.symbol, entity.other.inherited-class#d5ad3f
constant.numeric#b6f69d
none#b6f69d
none#b96f2e
constant#71a573
entity.name.tag#c74031
entity.other.attribute-name#b96f2e
entity.other.attribute-name.id, punctuation.definition.entity#71a573
meta.selector#c74031
none#b96f2e
markup.heading, markup.heading.setext, punctuation.definition.heading, entity.name.section#b96f2ebold
keyword.other.unit#b96f2e
markup.bold, punctuation.definition.bold#b96f2ebold
markup.italic, punctuation.definition.italic#d5ad3fitalic
markup.strikethroughstrikethrough
markup.inline.raw#d5ad3f
string.other.link#c74031
meta.link#b96f2e
markup.list#c74031
markup.quote#b96f2e
meta.separator#b6f69d
markup.inserted#d5ad3f
markup.deleted#c74031
markup.changed#58c7a2
constant.other.color#d5ad3f
string.regexp#d5ad3f
constant.character.escape#5e5e65
punctuation.section.embedded, variable.interpolation#58c7a2
invalid#c74031
Cloudbank by terryszhou - VS Code Theme