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#FFC2D1
  • activityBar.foreground#D86C00
  • breadcrumb.activeSelectionForeground#403B2F
  • breadcrumb.focusForeground#403B2F
  • breadcrumb.foreground#2F2B23
  • breadcrumbPicker.background#FFC2D1
  • debugConsole.errorForeground#E7386A
  • debugConsole.infoForeground#3A6AF8
  • debugConsole.sourceForeground#E7386A
  • debugConsole.warningForeground#D86C00
  • debugConsoleInputIcon.foreground#9C33FF
  • debugIcon.breakpointCurrentStackframeForeground#9C33FF
  • debugIcon.breakpointDisabledForeground#464034
  • debugIcon.breakpointForeground#F72C25
  • debugIcon.continueForeground#9C33FF
  • debugIcon.disconnectForeground#F72C25
  • debugIcon.pauseForeground#D86C00
  • debugIcon.restartForeground#5C9963
  • debugIcon.startForeground#9C33FF
  • debugIcon.stepBackForeground#D86C00
  • debugIcon.stepIntoForeground#D86C00
  • debugIcon.stepOutForeground#E7386A
  • debugIcon.stepOverForeground#D86C00
  • debugIcon.stopForeground#F72C25
  • diffEditor.diagonalFill#FFADC2
  • diffEditor.insertedLineBackground#5C996366
  • diffEditor.insertedTextBackground#5C99637f
  • diffEditor.removedLineBackground#F72C2566
  • diffEditor.removedTextBackground#F72C257f
  • diffEditorGutter.insertedLineBackground#5C996366
  • diffEditorGutter.removedLineBackground#F72C2566
  • diffEditorOverview.insertedForeground#5C9963
  • diffEditorOverview.removedForeground#F72C25
  • editor.background#FFD6E0
  • editor.foreground#2F2B23
  • editor.inactiveSelectionBackground#D29EFFb2
  • editor.lineHighlightBackground#DEB9FFb2
  • editor.selectionBackground#CE96FFb2
  • editor.selectionHighlightBackground#D29EFFcc
  • editor.wordHighlightBackground#D29EFF99
  • editorCursor.foreground#2F2B23
  • editorGroupHeader.noTabsBackground#FFC2D1
  • editorGroupHeader.tabsBackground#FFD6E0
  • editorGutter.addedBackground#5C9963
  • editorGutter.deletedBackground#F72C25
  • editorGutter.foldingControlForeground#3A6AF8
  • editorGutter.modifiedBackground#D86C00
  • editorInlayHint.background#FFC2D1e5
  • editorInlayHint.foreground#403B2F
  • editorLineNumber.activeForeground#403B2F
  • editorLineNumber.foreground#5C9963
  • editorOverviewRuler.currentContentForeground#9C33FF8e
  • editorOverviewRuler.incomingContentForeground#E7386A8e
  • editorStickyScroll.shadow#F72C25
  • editorWhitespace.foreground#FFADC2
  • foreground#2F2B23
  • gitDecoration.addedResourceForeground#5C9963
  • gitDecoration.conflictingResourceForeground#E7386A
  • gitDecoration.deletedResourceForeground#F72C25
  • gitDecoration.ignoredResourceForeground#464034
  • gitDecoration.modifiedResourceForeground#D86C00
  • gitDecoration.renamedResourceForeground#5C9963
  • gitDecoration.stageDeletedResourceForeground#5C9963
  • gitDecoration.stageModifiedResourceForeground#5C9963
  • gitDecoration.untrackedResourceForeground#403B2F
  • list.activeSelectionBackground#D29EFF
  • list.dropBackground#DEB9FFcc
  • list.errorForeground#F72C25
  • list.focusBackground#D29EFF
  • list.hoverBackground#DEB9FF
  • list.inactiveSelectionBackground#D29EFF7f
  • list.warningForeground#D86C00
  • merge.currentContentBackground#9C33FF5e
  • merge.currentHeaderBackground#9C33FF8e
  • merge.incomingContentBackground#E7386A5e
  • merge.incomingHeaderBackground#E7386A8e
  • minimap.errorHighlight#F72C25
  • minimap.findMatchHighlight#D86C007f
  • minimap.selectionHighlight#CE96FFb2
  • minimap.selectionOccurrenceHighlight#D29EFFb2
  • minimap.warningHighlight#E7386A
  • minimapGutter.addedBackground#5C9963
  • minimapGutter.deletedBackground#F72C25
  • minimapGutter.modifiedBackground#D86C00
  • peekView.border#9C33FF
  • peekViewEditor.background#FFC2D1
  • peekViewResult.background#FFADC2
  • peekViewResult.lineForeground#E7386A
  • peekViewTitle.background#FFADC2
  • progressBar.background#9C33FF
  • sideBar.background#FFC2D1
  • statusBar.background#FFC2D1
  • statusBar.debuggingBackground#5C9963
  • statusBarItem.remoteBackground#E7386A
  • tab.activeBackground#FFADC2
  • tab.activeBorder#5C9963
  • tab.border#FFD6E0
  • tab.inactiveBackground#FFC2D1
  • testing.iconErrored#F72C25
  • testing.iconFailed#F72C25
  • testing.iconPassed#5C9963
  • testing.iconQueued#403B2F
  • testing.iconSkipped#D86C00
  • testing.iconUnset#464034
  • testing.message.error.decorationForeground#F72C25
  • testing.peekBorder#F72C25
  • testing.peekHeaderBackground#F72C2599
  • testing.runAction#3A6AF8
  • textLink.foreground#9C33FF
  • titleBar.activeBackground#FFC2D1
  • titleBar.inactiveBackground#FFC2D1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#2F2B23—
comment#D86C00—
string#3A6AF8—
constant.numeric#E7386A—
constant.language#E7386A—
constant.character, constant.other#E7386A—
variable—
keyword#9C33FF—
storage#9C33FF
storage.type#3A6AF8italic
entity.name.class#9C33FFunderline
entity.other.inherited-class#9C33FFitalic underline
entity.name.function#9C33FF
variable.parameter#F72C25italic
entity.name.tag#E7386A
entity.other.attribute-name#F72C25
support.function#3A6AF8
support.constant#3A6AF8
support.type, support.class#3A6AF8italic
support.other.variable—
invalid#403B2F
invalid.deprecated#403B2F—
variable.language.special.self#F72C25—
meta.function-call.generic#9C33FF—
Jungle Pup by keller00 - VS Code Theme