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#e6b450
  • activityBar.background#0d1017
  • activityBar.border#1e232b
  • activityBar.foreground#565b66cc
  • activityBar.inactiveForeground#565b6699
  • activityBarBadge.background#e6b450
  • activityBarBadge.foreground#734d00
  • badge.background#e6b45033
  • badge.foreground#e6b450
  • button.background#e6b450
  • button.foreground#734d00
  • button.hoverBackground#e1af4b
  • button.secondaryBackground#565b6633
  • button.secondaryForeground#bfbdb6
  • button.secondaryHoverBackground#565b6680
  • debugConsoleInputIcon.foreground#e6b450
  • debugExceptionWidget.background#0f131a
  • debugExceptionWidget.border#1e232b
  • debugIcon.breakpointDisabledForeground#f2966880
  • debugIcon.breakpointForeground#f29668
  • debugToolBar.background#0f131a
  • descriptionForeground#565b66
  • diffEditor.diagonalFill#1e232b
  • diffEditor.insertedTextBackground#7fd9621f
  • diffEditor.removedTextBackground#f26d781f
  • dropdown.background#0d1017
  • dropdown.border#565b6645
  • dropdown.foreground#565b66
  • editor.background#0d1017
  • editor.findMatchBackground#6c5980
  • editor.findMatchBorder#6c5980
  • editor.findMatchHighlightBackground#6c598066
  • editor.findMatchHighlightBorder#5f4c7266
  • editor.findRangeHighlightBackground#6c598040
  • editor.foreground#bfbdb6
  • editor.inactiveSelectionBackground#409fff21
  • editor.lineHighlightBackground#131721
  • editor.rangeHighlightBackground#6c598033
  • editor.selectionBackground#409fff4d
  • 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#e6b450
  • editorError.foreground#d95757
  • 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
  • editorLineNumber.activeForeground#6c7380e6
  • editorLineNumber.foreground#6c738099
  • editorLink.activeForeground#e6b450
  • editorMarkerNavigation.background#0f131a
  • editorOverviewRuler.addedForeground#7fd962
  • editorOverviewRuler.border#1e232b
  • editorOverviewRuler.bracketMatchForeground#6c7380b3
  • editorOverviewRuler.deletedForeground#f26d78
  • editorOverviewRuler.errorForeground#d95757
  • editorOverviewRuler.findMatchForeground#6c5980
  • editorOverviewRuler.modifiedForeground#73b8ff
  • editorOverviewRuler.warningForeground#e6b450
  • editorOverviewRuler.wordHighlightForeground#73b8ff66
  • editorOverviewRuler.wordHighlightStrongForeground#7fd96266
  • editorRuler.foreground#6c738033
  • editorSuggestWidget.background#0f131a
  • editorSuggestWidget.border#1e232b
  • editorSuggestWidget.highlightForeground#e6b450
  • editorSuggestWidget.selectedBackground#47526640
  • editorWarning.foreground#e6b450
  • editorWhitespace.foreground#6c738099
  • editorWidget.background#0b0e14
  • editorWidget.border#1e232b
  • errorForeground#d95757
  • extensionButton.prominentBackground#e6b450
  • extensionButton.prominentForeground#734d00
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#e6b450b3
  • foreground#565b66
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#f26d78b3
  • gitDecoration.ignoredResourceForeground#565b6680
  • gitDecoration.modifiedResourceForeground#73b8ffb3
  • gitDecoration.submoduleResourceForeground#d2a6ffb3
  • gitDecoration.untrackedResourceForeground#7fd962b3
  • icon.foreground#565b66
  • input.background#0d1017
  • input.border#565b6645
  • input.foreground#bfbdb6
  • input.placeholderForeground#565b6680
  • inputOption.activeBackground#e6b45033
  • inputOption.activeBorder#e6b4504d
  • inputOption.activeForeground#e6b450
  • inputValidation.errorBackground#0d1017
  • inputValidation.errorBorder#d95757
  • inputValidation.infoBackground#0b0e14
  • inputValidation.infoBorder#39bae6
  • inputValidation.warningBackground#0b0e14
  • inputValidation.warningBorder#beb500
  • keybindingLabel.background#565b661a
  • keybindingLabel.border#bfbdb61a
  • keybindingLabel.bottomBorder#bfbdb61a
  • keybindingLabel.foreground#bfbdb6
  • list.activeSelectionBackground#47526640
  • list.activeSelectionForeground#bfbdb6
  • list.deemphasizedForeground#d95757
  • list.errorForeground#d95757
  • list.filterMatchBackground#5f4c7266
  • list.filterMatchBorder#6c598066
  • list.focusBackground#47526640
  • list.focusForeground#bfbdb6
  • list.focusOutline#47526640
  • list.highlightForeground#e6b450
  • list.hoverBackground#47526640
  • list.inactiveSelectionBackground#47526633
  • list.inactiveSelectionForeground#565b66
  • list.invalidItemForeground#565b664d
  • listFilterWidget.background#0f131a
  • listFilterWidget.noMatchesOutline#d95757
  • listFilterWidget.outline#e6b450
  • minimap.background#0d1017
  • minimap.errorHighlight#d95757
  • minimap.findMatchHighlight#6c5980
  • minimap.selectionHighlight#409fff4d
  • minimapGutter.addedBackground#7fd962
  • minimapGutter.deletedBackground#f26d78
  • minimapGutter.modifiedBackground#73b8ff
  • panel.background#0b0e14
  • panel.border#1e232b
  • panelTitle.activeBorder#e6b450
  • panelTitle.activeForeground#bfbdb6
  • panelTitle.inactiveForeground#565b66
  • peekView.border#47526640
  • peekViewEditor.background#0b0e14
  • peekViewEditor.matchHighlightBackground#6c598066
  • peekViewEditor.matchHighlightBorder#5f4c7266
  • peekViewResult.background#0b0e14
  • peekViewResult.fileForeground#bfbdb6
  • peekViewResult.lineForeground#565b66
  • peekViewResult.matchHighlightBackground#6c598066
  • peekViewResult.selectionBackground#47526640
  • peekViewTitle.background#47526640
  • peekViewTitleDescription.foreground#565b66
  • peekViewTitleLabel.foreground#bfbdb6
  • pickerGroup.border#1e232b
  • pickerGroup.foreground#565b6680
  • progressBar.background#e6b450
  • scrollbar.shadow#1e232b00
  • scrollbarSlider.activeBackground#565b66b3
  • scrollbarSlider.background#565b6666
  • scrollbarSlider.hoverBackground#565b6699
  • selection.background#409fff4d
  • settings.headerForeground#bfbdb6
  • settings.modifiedItemIndicator#73b8ff
  • sideBar.background#0b0e14
  • sideBar.border#1e232b
  • sideBarSectionHeader.background#0b0e14
  • sideBarSectionHeader.border#1e232b
  • sideBarSectionHeader.foreground#565b66
  • sideBarTitle.foreground#565b66
  • statusBar.background#0b0e14
  • statusBar.border#1e232b
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#0d1017
  • statusBar.foreground#565b66
  • statusBar.noFolderBackground#0f131a
  • statusBarItem.activeBackground#565b6633
  • statusBarItem.hoverBackground#565b6633
  • statusBarItem.prominentBackground#1e232b
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#e6b450
  • statusBarItem.remoteForeground#734d00
  • tab.activeBackground#0d1017
  • tab.activeBorder#0d1017
  • tab.activeBorderTop#e6b450
  • tab.activeForeground#bfbdb6
  • tab.border#1e232b
  • tab.inactiveBackground#0b0e14
  • tab.inactiveForeground#565b66
  • tab.unfocusedActiveBorderTop#565b66
  • tab.unfocusedActiveForeground#565b66
  • tab.unfocusedInactiveForeground#565b66
  • terminal.ansiBlack#1e232b
  • terminal.ansiBlue#53bdfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#59c2ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#619200
  • terminal.ansiBrightMagenta#d2a6ff
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#beb500
  • 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#0f131a
  • textLink.activeForeground#e6b450
  • textLink.foreground#e6b450
  • textPreformat.foreground#bfbdb6
  • titleBar.activeBackground#0b0e14
  • titleBar.activeForeground#bfbdb6
  • titleBar.border#1e232b
  • titleBar.inactiveBackground#0b0e14
  • titleBar.inactiveForeground#565b66
  • tree.indentGuidesStroke#6c738080
  • walkThrough.embeddedEditorBackground#0f131a
  • welcomePage.progress.background#131721
  • welcomePage.tileBackground#0b0e14
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ACB6BF8Citalic
string, constant.other.symbol#619200
string.regexp, constant.character, constant.other#95E6CB
constant.numeric#D2A6FF
constant.language#D2A6FF
variable, variable.parameter.function-call#BFBDB6
variable.member#F07178
variable.language#39BAE6italic
storage#FF8F40
keyword#FF8F40
keyword.operator#F29668
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
source.java storage.type.primitive#39BAE6
entity.name.function#beb500
variable.parameter, meta.parameter#D2A6FF
variable.function, variable.annotation, meta.function-call.generic, support.function.go#beb500
support.function, support.macro#F07178
entity.name.import, entity.name.package#619200
entity.name#59C2FF
entity.name.tag, meta.tag.sgml#39BAE6
support.class.component#59C2FF
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#39BAE680
entity.other.attribute-name#beb500
support.constant#F29668italic
support.type, support.class, source.go storage.type#39BAE6
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#E6B673
invalid#D95757
meta.diff, meta.diff.header#C594C5
source.ruby variable.other.readwrite#beb500
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#39BAE6normal
constant.numeric.line-number.find-in-files - match#ACB6BF8C
constant.numeric.line-number.match#FF8F40
entity.name.filename.find-in-files#619200
message.error#D95757
markup.heading, markup.heading entity.name#619200bold
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#beb500
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
ref.matchtext#FFFFFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6