Skip to main content
Coding Theme

Color themes

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#003124
  • activityBar.foreground#c19a6b
  • breadcrumb.activeSelectionForeground#AAAAAA
  • breadcrumb.focusForeground#AAAAAA
  • breadcrumb.foreground#D9D9D9
  • breadcrumbPicker.background#003124
  • debugConsole.errorForeground#8A79C7
  • debugConsole.infoForeground#61A0C2
  • debugConsole.sourceForeground#8A79C7
  • debugConsole.warningForeground#c19a6b
  • debugConsoleInputIcon.foreground#D15B8F
  • debugIcon.breakpointCurrentStackframeForeground#D15B8F
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#C63D3D
  • debugIcon.continueForeground#D15B8F
  • debugIcon.disconnectForeground#C63D3D
  • debugIcon.pauseForeground#c19a6b
  • debugIcon.restartForeground#569C5B
  • debugIcon.startForeground#D15B8F
  • debugIcon.stepBackForeground#c19a6b
  • debugIcon.stepIntoForeground#c19a6b
  • debugIcon.stepOutForeground#8A79C7
  • debugIcon.stepOverForeground#c19a6b
  • debugIcon.stopForeground#C63D3D
  • diffEditor.diagonalFill#003E2E
  • diffEditor.insertedLineBackground#569C5B66
  • diffEditor.insertedTextBackground#569C5B7f
  • diffEditor.removedLineBackground#C63D3D66
  • diffEditor.removedTextBackground#C63D3D7f
  • diffEditorGutter.insertedLineBackground#569C5B66
  • diffEditorGutter.removedLineBackground#C63D3D66
  • diffEditorOverview.insertedForeground#569C5B
  • diffEditorOverview.removedForeground#C63D3D
  • editor.background#002118
  • editor.foreground#D9D9D9
  • editor.inactiveSelectionBackground#473d3bb2
  • editor.inlineSuggest.enabled
  • editor.lineHighlightBackground#2d2625
  • editor.selectionBackground#544846
  • editor.selectionHighlightBackground#473d3bcc
  • editor.wordHighlightBackground#473d3b99
  • editorCursor.foreground#D9D9D9
  • editorGroupHeader.noTabsBackground#003124
  • editorGroupHeader.tabsBackground#002118
  • editorGutter.addedBackground#569C5B
  • editorGutter.deletedBackground#C63D3D
  • editorGutter.foldingControlForeground#61A0C2
  • editorGutter.modifiedBackground#c19a6b
  • editorInlayHint.background#003124
  • editorInlayHint.foreground#AAAAAA
  • editorLineNumber.activeForeground#AAAAAA
  • editorLineNumber.foreground#569C5B
  • editorOverviewRuler.currentContentForeground#D15B8F8e
  • editorOverviewRuler.incomingContentForeground#8A79C78e
  • editorWhitespace.foreground#003E2E
  • foreground#D9D9D9
  • gitDecoration.addedResourceForeground#569C5B
  • gitDecoration.conflictingResourceForeground#8A79C7
  • gitDecoration.deletedResourceForeground#C63D3D
  • gitDecoration.ignoredResourceForeground#848484
  • gitDecoration.modifiedResourceForeground#c19a6b
  • gitDecoration.renamedResourceForeground#569C5B
  • gitDecoration.stageDeletedResourceForeground#569C5B
  • gitDecoration.stageModifiedResourceForeground#569C5B
  • gitDecoration.untrackedResourceForeground#AAAAAA
  • merge.currentContentBackground#D15B8F5e
  • merge.currentHeaderBackground#D15B8F8e
  • merge.incomingContentBackground#8A79C75e
  • merge.incomingHeaderBackground#8A79C78e
  • minimap.errorHighlight#C63D3D
  • minimap.findMatchHighlight#c19a6b7f
  • minimap.selectionHighlight#544846b2
  • minimap.selectionOccurrenceHighlight#473d3bb2
  • minimap.warningHighlight#8A79C7
  • minimapGutter.addedBackground#569C5B
  • minimapGutter.deletedBackground#C63D3D
  • minimapGutter.modifiedBackground#c19a6b
  • progressBar.background#D15B8F
  • sideBar.background#003124
  • statusBar.background#003124
  • statusBar.debuggingBackground#569C5B
  • statusBarItem.remoteBackground#8A79C7
  • tab.activeBackground#003E2E
  • tab.activeBorder#569C5B
  • tab.border#002118
  • tab.inactiveBackground#003124
  • testing.iconErrored#C63D3D
  • testing.iconFailed#C63D3D
  • testing.iconPassed#569C5B
  • testing.iconQueued#AAAAAA
  • testing.iconSkipped#c19a6b
  • testing.iconUnset#848484
  • testing.message.error.decorationForeground#C63D3D
  • testing.peekBorder#C63D3D
  • testing.peekHeaderBackground#C63D3D99
  • testing.runAction#61A0C2
  • textLink.foreground#D15B8F
  • titleBar.activeBackground#003124
  • titleBar.inactiveBackground#003124

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#D9D9D9—
comment#c19a6b—
string#61A0C2—
constant.numeric#8A79C7—
constant.language#8A79C7—
constant.character, constant.other#8A79C7—
variable—
keyword#D15B8F—
storage#D15B8F
storage.type#61A0C2italic
entity.name.class#D15B8Funderline
entity.other.inherited-class#D15B8Fitalic underline
entity.name.function#D15B8F
variable.parameter#C63D3Ditalic
entity.name.tag#8A79C7
entity.other.attribute-name#C63D3D
support.function#61A0C2
support.constant#61A0C2
support.type, support.class#61A0C2italic
support.other.variable—
invalid#AAAAAA
invalid.deprecated#AAAAAA—
variable.language.special.self#C63D3D—
meta.function-call.generic#D15B8F—