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.activeBorder#720000
  • activityBar.background#000000
  • activityBar.border#1e232b
  • activityBar.foreground#534f4fcc
  • activityBar.inactiveForeground#534f4f99
  • activityBarBadge.background#720000
  • activityBarBadge.foreground#ffffff
  • badge.background#72000033
  • badge.foreground#720000
  • button.background#720000
  • button.foreground#ffffff
  • button.hoverBackground#000000
  • button.secondaryBackground#534f4f33
  • button.secondaryForeground#bfbdb6
  • button.secondaryHoverBackground#534f4f80
  • debugConsoleInputIcon.foreground#720000
  • debugExceptionWidget.background#1a0f0f
  • debugExceptionWidget.border#1e232b
  • debugIcon.breakpointDisabledForeground#f2966880
  • debugIcon.breakpointForeground#f29668
  • debugToolBar.background#1a0f0f
  • descriptionForeground#534f4f
  • diffEditor.diagonalFill#1e232b
  • diffEditor.insertedTextBackground#7fd9621f
  • diffEditor.removedTextBackground#f26d781f
  • dropdown.background#000000
  • dropdown.border#534f4f45
  • dropdown.foreground#534f4f
  • editor.background#000000
  • editor.findMatchBackground#3e565a8c
  • editor.findMatchBorder#c9bf37
  • editor.findMatchHighlightBackground#c9c9c949
  • editor.findMatchHighlightBorder#7a7a7a
  • editor.findRangeHighlightBackground#6c598040
  • editor.foreground#bfbdb6
  • editor.inactiveSelectionBackground#409fff21
  • editor.lineHighlightBackground#131721
  • editor.rangeHighlightBackground#6c598033
  • editor.selectionBackground#8d9ea03b
  • editor.selectionHighlightBackground#7fd96226
  • editor.selectionHighlightBorder#7fd96200
  • editor.snippetTabstopHighlightBackground#7fd96233
  • editor.wordHighlightBackground#73b8ff14
  • editor.wordHighlightBorder#73b8ff80
  • editor.wordHighlightStrongBackground#7fd96214
  • editor.wordHighlightStrongBorder#7fd96280
  • editorBracketMatch.background#6c73804d
  • editorBracketMatch.border#6c73804d
  • editorCodeLens.foreground#acb6bf8c
  • editorCursor.foreground#720000
  • editorError.foreground#af0000
  • editorGroup.background#1a0f0f
  • editorGroup.border#1e232b
  • editorGroupHeader.noTabsBackground#0b0e14
  • editorGroupHeader.tabsBackground#0b0e14
  • editorGroupHeader.tabsBorder#1e232b
  • editorGutter.addedBackground#7fd962cc
  • editorGutter.deletedBackground#f26d78cc
  • editorGutter.modifiedBackground#73b8ffcc
  • editorHoverWidget.background#0b0e14
  • editorHoverWidget.border#1e232b
  • editorIndentGuide.activeBackground#6c738080
  • editorIndentGuide.background#6c738033
  • editorLineNumber.activeForeground#6c7380e6
  • editorLineNumber.foreground#6c738099
  • editorLink.activeForeground#720000
  • editorMarkerNavigation.background#1a0f0f
  • editorOverviewRuler.addedForeground#7fd962
  • editorOverviewRuler.border#1e232b
  • editorOverviewRuler.bracketMatchForeground#6c7380b3
  • editorOverviewRuler.deletedForeground#f26d78
  • editorOverviewRuler.errorForeground#af0000
  • editorOverviewRuler.findMatchForeground#6c5980
  • editorOverviewRuler.modifiedForeground#73b8ff
  • editorOverviewRuler.warningForeground#ce7500
  • editorOverviewRuler.wordHighlightForeground#73b8ff66
  • editorOverviewRuler.wordHighlightStrongForeground#7fd96266
  • editorRuler.foreground#6c738033
  • editorSuggestWidget.background#1a0f0f
  • editorSuggestWidget.border#1e232b
  • editorSuggestWidget.highlightForeground#720000
  • editorSuggestWidget.selectedBackground#47526640
  • editorWarning.foreground#ce7500
  • editorWhitespace.foreground#6c738099
  • editorWidget.background#0b0e14
  • editorWidget.border#1e232b
  • errorForeground#af0000
  • extensionButton.prominentBackground#720000
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#000000
  • focusBorder#7c0d0db3
  • foreground#534f4f
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f26d78b3
  • gitDecoration.ignoredResourceForeground#534f4f80
  • gitDecoration.modifiedResourceForeground#73b8ffb3
  • gitDecoration.submoduleResourceForeground#d2a6ffb3
  • gitDecoration.untrackedResourceForeground#7fd962b3
  • icon.foreground#534f4f
  • input.background#000000
  • input.border#534f4f45
  • input.foreground#bfbdb6
  • input.placeholderForeground#534f4f80
  • inputOption.activeBackground#72000033
  • inputOption.activeBorder#7200004d
  • inputOption.activeForeground#720000
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#e47814
  • inputValidation.infoBackground#0b0e14
  • inputValidation.infoBorder#39bae6
  • inputValidation.warningBackground#0b0e14
  • inputValidation.warningBorder#ffb454
  • keybindingLabel.background#534f4f1a
  • keybindingLabel.border#bfbdb61a
  • keybindingLabel.bottomBorder#bfbdb61a
  • keybindingLabel.foreground#bfbdb6
  • list.activeSelectionBackground#47526640
  • list.activeSelectionForeground#bfbdb6
  • list.deemphasizedForeground#e47814
  • list.errorForeground#af0000
  • list.filterMatchBackground#5f4c7266
  • list.filterMatchBorder#6c598066
  • list.focusBackground#47526640
  • list.focusForeground#bfbdb6
  • list.focusOutline#47526640
  • list.highlightForeground#720000
  • list.hoverBackground#47526640
  • list.inactiveSelectionBackground#47526633
  • list.inactiveSelectionForeground#534f4f
  • list.invalidItemForeground#534f4f4d
  • listFilterWidget.background#1a0f0f
  • listFilterWidget.noMatchesOutline#e47814
  • listFilterWidget.outline#720000
  • minimap.background#000000
  • minimap.errorHighlight#af0000
  • minimap.findMatchHighlight#d1ac458c
  • minimap.selectionHighlight#ff72723b
  • minimapGutter.addedBackground#7fd962
  • minimapGutter.deletedBackground#f26d78
  • minimapGutter.modifiedBackground#73b8ff
  • panel.background#0b0e14
  • panel.border#1e232b
  • panelTitle.activeBorder#720000
  • panelTitle.activeForeground#bfbdb6
  • panelTitle.inactiveForeground#534f4f
  • peekView.border#47526640
  • peekViewEditor.background#0b0e14
  • peekViewEditor.matchHighlightBackground#6c598066
  • peekViewEditor.matchHighlightBorder#5f4c7266
  • peekViewResult.background#0b0e14
  • peekViewResult.fileForeground#bfbdb6
  • peekViewResult.lineForeground#534f4f
  • peekViewResult.matchHighlightBackground#6c598066
  • peekViewResult.selectionBackground#47526640
  • peekViewTitle.background#47526640
  • peekViewTitleDescription.foreground#534f4f
  • peekViewTitleLabel.foreground#bfbdb6
  • pickerGroup.border#1e232b
  • pickerGroup.foreground#534f4f80
  • progressBar.background#720000
  • scrollbar.shadow#1e232b00
  • scrollbarSlider.activeBackground#534f4fb3
  • scrollbarSlider.background#534f4f66
  • scrollbarSlider.hoverBackground#534f4f99
  • selection.background#ff72723b
  • settings.headerForeground#bfbdb6
  • settings.modifiedItemIndicator#73b8ff
  • sideBar.background#0b0e14
  • sideBar.border#1e232b
  • sideBarSectionHeader.background#0b0e14
  • sideBarSectionHeader.border#1e232b
  • sideBarSectionHeader.foreground#534f4f
  • sideBarTitle.foreground#534f4f
  • statusBar.background#0b0e14
  • statusBar.border#1e232b
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#534f4f
  • statusBar.noFolderBackground#1a0f0f
  • statusBarItem.activeBackground#534f4f33
  • statusBarItem.hoverBackground#534f4f33
  • statusBarItem.prominentBackground#1e232b
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#720000
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#000000
  • tab.activeBorder#000000
  • tab.activeBorderTop#720000
  • tab.activeForeground#bfbdb6
  • tab.border#1e232b
  • tab.inactiveBackground#0b0e14
  • tab.inactiveForeground#534f4f
  • tab.unfocusedActiveBorderTop#534f4f
  • tab.unfocusedActiveForeground#534f4f
  • tab.unfocusedInactiveForeground#534f4f
  • terminal.ansiBlack#1e232b
  • terminal.ansiBlue#53bdfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#59c2ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#aad94c
  • terminal.ansiBrightMagenta#d2a6ff
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb454
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#7fd962
  • terminal.ansiMagenta#cda1fa
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#0b0e14
  • terminal.foreground#bfbdb6
  • textBlockQuote.background#1a0f0f
  • textLink.activeForeground#7c0d0d
  • textLink.foreground#7c0d0d
  • textPreformat.foreground#bfbdb6
  • titleBar.activeBackground#0b0e14
  • titleBar.activeForeground#bfbdb6
  • titleBar.border#1e232b
  • titleBar.inactiveBackground#0b0e14
  • titleBar.inactiveForeground#534f4f
  • tree.indentGuidesStroke#6c738080
  • walkThrough.embeddedEditorBackground#1a0f0f
  • welcomePage.buttonBackground#72000066
  • welcomePage.progress.background#131721
  • welcomePage.tileBackground#0b0e14
  • welcomePage.tileShadow#00000080
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bfbdb6
comment#504545italic
string, constant.other.symbol#e6d1d1
string.regexp, constant.character, constant.other#95e6cb
constant.numeric#ad4000
constant.language#e4c333
variable, variable.parameter.function-call#b81111
variable.member#aa0000
variable.language#af6b1ditalic
storage#861a1a
keyword#8a0404
keyword.operator#b4b4b4
punctuation.separator, punctuation.terminator#bfbdb6b3
punctuation.section#bfbdb6
punctuation.accessor#f29668
punctuation.definition.template-expression#ff8f40
punctuation.section.embedded#ff8f40
meta.embedded#bfbdb6
source.java storage.type, source.haskell storage.type, source.c storage.type#59c2ff
entity.other.inherited-class#39bae6
storage.type.function#ff8f40
entity.name.function#b81111
variable.parameter, meta.parameter#af6b1d
variable.function, variable.annotation, meta.function-call.generic, support.function.go#e7e7e7
support.function, support.macro#f07178
entity.name.import, entity.name.package#aad94c
entity.name, source.java storage.type.primitive#e9caca
entity.name.tag, meta.tag.sgml#d8d8d8
support.class.component#59c2ff
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#39bae680
entity.other.attribute-name#ffb454
support.constant#f29668italic
support.type, support.class, source.go storage.type#d8d8d8
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#e6b673
invalid#e47814
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#ffb454
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#59c2ff
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#acb6bf8c
support.type.property-name#aa0000normal
constant.numeric.line-number.find-in-files - match#acb6bf8c
constant.numeric.line-number.match#ff8f40
entity.name.filename.find-in-files#aad94c
message.error#af0000
markup.heading, markup.heading entity.name#aad94cbold
markup.underline.link, string.other.link#39bae6
markup.italic#f07178italic
markup.bold#f07178bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#acb6bf8cbold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffb454
markup.inserted#7fd962
markup.changed#73b8ff
markup.deleted#f26d78
markup.strike#e6b673
markup.table#39bae6
text.html.markdown markup.inline.raw#f29668
text.html.markdown meta.dummy.line-break#acb6bf8c
punctuation.definition.markdown#acb6bf8c