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#000000
  • activityBar.border#dfdfdf40
  • activityBar.foreground#dfdfdf
  • breadcrumb.background#000
  • breadcrumb.focusForeground#dcdddd
  • breadcrumb.foreground#dcdddd
  • debugIcon.breakpointCurrentStackframeForeground#007aff
  • debugIcon.breakpointForeground#007aff
  • debugToolBar.background#000
  • debugToolBar.border#dfdfdf40
  • diffEditor.insertedTextBackground#3cff5518
  • diffEditor.removedTextBackground#ff504418
  • dropdown.background#000
  • dropdown.border#dfdfdf40
  • dropdown.foreground#dfdfdf
  • editor.background#000
  • editor.findMatchBackground#fffb00
  • editor.findMatchHighlightBackground#545558
  • editor.foreground#dfdfdf
  • editor.hoverHighlightBackground#2c5392
  • editor.lineHighlightBackground#2f3239
  • editor.placeholder.foreground#dfdfdf55
  • editor.selectionBackground#646E83
  • editor.snippetTabstopHighlightBackground#007aff
  • editor.stackFrameHighlightBackground#007aff22
  • editorCodeLens.foreground#dfdfdf77
  • editorCursor.foreground#ffffff
  • editorError.foreground#e21514
  • editorGroup.border#dfdfdf40
  • editorGroupHeader.noTabsBackground#000
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#dfdfdf40
  • editorGutter.addedBackground#4f82ce
  • editorGutter.deletedBackground#4f82ce
  • editorGutter.modifiedBackground#4f82ce
  • editorIndentGuide.activeBackground1#00000000
  • editorIndentGuide.background1#00000000
  • editorLineNumber.activeForeground#dfdfdf
  • editorLineNumber.foreground#dfdfdf55
  • editorLink.activeForeground#6699ff
  • editorOverviewRuler.addedForeground#4f82ce
  • editorOverviewRuler.deletedForeground#4f82ce
  • editorOverviewRuler.errorForeground#e21514
  • editorOverviewRuler.findMatchForeground#fffb00
  • editorOverviewRuler.modifiedForeground#4f82ce
  • editorOverviewRuler.warningForeground#f5c443
  • editorWarning.foreground#f5c443
  • editorWhitespace.foreground#53606e
  • editorWidget.background#000
  • errorForeground#e21514
  • focusBorder#35628b
  • foreground#dfdfdf
  • gitDecoration.conflictingResourceForeground#e21514
  • gitDecoration.ignoredResourceForeground#dfdfdf55
  • input.background#000
  • input.border#dfdfdf40
  • input.foreground#dfdfdf
  • list.activeSelectionBackground#3071db
  • list.activeSelectionForeground#dfdfdf
  • list.dropBackground#000
  • list.filterMatchBackground#fffb00
  • list.focusBackground#3071db
  • list.focusForeground#dfdfdf
  • list.highlightForeground#f5c443
  • list.hoverBackground#000
  • list.inactiveFocusBackground#000
  • list.inactiveSelectionBackground#000
  • list.inactiveSelectionForeground#dfdfdf
  • listFilterWidget.background#000
  • minimap.errorHighlight#e21514
  • minimap.findMatchHighlight#fffb00
  • minimap.selectionHighlight#646E83
  • minimap.warningHighlight#f5c443
  • minimapGutter.addedBackground#4f82ce
  • minimapGutter.deletedBackground#4f82ce
  • minimapGutter.modifiedBackground#4f82ce
  • peekView.border#3071db
  • peekViewEditor.background#000
  • peekViewEditor.matchHighlightBackground#646E83
  • peekViewResult.background#000
  • peekViewResult.fileForeground#dfdfdf
  • peekViewResult.lineForeground#dfdfdf99
  • peekViewResult.matchHighlightBackground#646E83
  • peekViewResult.selectionBackground#3071db
  • peekViewResult.selectionForeground#dfdfdf
  • peekViewTitle.background#000
  • peekViewTitleDescription.foreground#6699ff
  • peekViewTitleLabel.foreground#dfdfdf
  • searchEditor.findMatchBackground#fffb00
  • sideBar.background#000
  • sideBar.border#dfdfdf40
  • sideBarSectionHeader.background#000
  • statusBar.background#000
  • statusBar.border#dfdfdf40
  • statusBar.debuggingBackground#000
  • statusBar.debuggingBorder#dfdfdf40
  • statusBar.debuggingForeground#dfdfdf
  • statusBar.foreground#dfdfdf
  • statusBar.noFolderBackground#000
  • statusBar.noFolderBorder#dfdfdf40
  • statusBar.noFolderForeground#dfdfdf
  • tab.activeBackground#000
  • tab.activeBorder#dfdfdf40
  • tab.activeForeground#ffffff
  • tab.border#dfdfdf40
  • tab.inactiveBackground#000
  • tab.inactiveForeground#9a9c9d
  • tab.unfocusedActiveBorder#dfdfdf40
  • tab.unfocusedActiveForeground#fff
  • tab.unfocusedInactiveForeground#9c9c9c
  • terminal.border#dfdfdf40
  • terminalOverviewRuler.border#dfdfdf40
  • textLink.activeForeground#6699ff
  • textLink.foreground#6699ff
  • titleBar.activeBackground#000
  • titleBar.activeForeground#dfdfdf
  • titleBar.border#dfdfdf40
  • titleBar.inactiveBackground#000
  • titleBar.inactiveForeground#dfdfdf
  • toolbar.activeBackground#000
  • toolbar.hoverBackground#000
  • widget.shadow#dfdfdf33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0D07D—
punctuation.definition.string, string#FC6A5D—
constant.numeric, keyword.other.unit, support.constant#D0BF69—
constant.language, entity.name.tag, keyword, storage.modifier, storage.type, support.type.primitive, variable.language#FF7AB2bold
keyword.control.directive, keyword.control.preprocessor, punctuation.definition.preprocessor#FFA14F—
markup.underline.link#6699FF—
entity.name.type.class.std.rust, storage.type.cs, support.type, meta.object-literal.key#ACF2E4—
meta.object-literal.key#72BFAE—
punctuation.definition.variable, punctuation.support.type.property-name, storage.modifier.lifetime, support.type.property-name, variable.other.property#83C9BC—
meta.definition.function, meta.definition.method, meta.method.declaration#5DD8FF—
variable.other.constant, meta.definition.variable#FFFFFF—
variable.parameter, meta.parameters, meta.method.declaration, meta.object.member#48b7db—
variable.other.object, meta.var.expr, meta.definition.variable, meta.block#48b7db—
constant.language.boolean.false, constant.language.boolean.true, meta.objectliteral#D6C455—
entity.name.type#E5CFFF—
entity.name.type.class, entity.other.inherited-class#5DD8FF—
keyword.operator#A167E6—
meta.return.type, meta.function, support.type.primitive, meta.field.declaration, meta.interface#D0A8FF—
meta.function-call#CDA1FF—
entity.name.type.namespace, entity.name.variable, variable.other.assignment#49B7D7—
variable.object.property, meta.definition.property, meta.field.declaration, meta.class#49B7D7—
fenced_code.block.language, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.markdown, punctuation.definition.metadata.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#72BFAE—
string.other.link.title.markdown#DFDFE0—
entity.name.section#DFDFE0bold
variable.other.object.property, support.variable.property, variable.other.constant.property#83C9BC—
markup.bold#DFDFE0bold
markup.italic#DFDFE0italic
punctuation#DFDFE0—
punctuation.decorator, meta.brace.round#FFFFFF—
entity.other.attribute-name#D0A8FF—
meta.tag.without-attributes, metax.children#FFFFFF—
variable.other.readwrite.alias#FFFFFF—
punctuation.terminator.statement#FFFFFF—
punctuation.accessor.optional#A167E6—
case-clause.expr, switch-block.expr, switch-statement.expr#48b7db—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
support.class.dart, other.source.dart#E5CFFF—
entity.name.function.dart#5DD8FF—
source.dart#49B7D7—
variable.parameter.dart#83C9BC—
Xcode Pitch Dark Theme by Alberto Chamorro - VS Code Theme