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#131519
  • activityBar.border#00010a
  • activityBar.foreground#9bbfbf
  • activityBar.inactiveForeground#727272
  • activityBarBadge.background#fabd2f
  • activityBarBadge.foreground#0a0e14
  • badge.background#fabd2f33
  • badge.foreground#fabd2f
  • button.background#fabd2f
  • button.foreground#0a0e14
  • button.hoverBackground#e1af4b
  • debugExceptionWidget.background#0e0e11
  • debugExceptionWidget.border#00010a
  • debugToolBar.background#0e0e11
  • descriptionForeground#727272
  • diffEditor.insertedTextBackground#b8bb2626
  • diffEditor.removedTextBackground#f2966826
  • dropdown.background#0e0e11
  • dropdown.border#2b303a
  • dropdown.foreground#727272
  • editor.background#131519
  • editor.findMatchBackground#fabd2f0d
  • editor.findMatchBorder#fabd2f
  • editor.findMatchHighlightBackground#fabd2f0d
  • editor.findMatchHighlightBorder#fabd2f59
  • editor.findRangeHighlightBackground#1b2733
  • editor.findRangeHighlightBorder#0a0e1400
  • editor.foreground#b3b1ad
  • editor.inactiveSelectionBackground#1b2733
  • editor.lineHighlightBackground#0e0e11
  • editor.rangeHighlightBackground#0e0e11
  • editor.selectionBackground#273747
  • editor.selectionHighlightBackground#1b2733
  • editor.selectionHighlightBorder#304357
  • editor.wordHighlightBackground#6994bf12
  • editor.wordHighlightBorder#6994bf80
  • editor.wordHighlightStrongBackground#91b36212
  • editor.wordHighlightStrongBorder#91b36280
  • editorBracketMatch.background#7272724d
  • editorBracketMatch.border#72727299
  • editorCodeLens.foreground#626a73
  • editorCursor.foreground#fabd2f
  • editorError.foreground#ff3333
  • editorGroup.background#0e0e11
  • editorGroup.border#00010a
  • editorGroupHeader.noTabsBackground#131519
  • editorGroupHeader.tabsBackground#131519
  • editorGroupHeader.tabsBorder#00010a
  • editorGutter.addedBackground#91b36299
  • editorGutter.deletedBackground#d96c7599
  • editorGutter.modifiedBackground#6994bf99
  • editorHoverWidget.background#0e0e11
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#727272b3
  • editorIndentGuide.background#72727266
  • editorLineNumber.activeForeground#727272e6
  • editorLineNumber.foreground#72727299
  • editorLink.activeForeground#fabd2f
  • editorMarkerNavigation.background#0e0e11
  • editorOverviewRuler.addedForeground#91b36299
  • editorOverviewRuler.border#00010a
  • editorOverviewRuler.deletedForeground#d96c7599
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#6994bf99
  • editorOverviewRuler.warningForeground#fabd2f
  • editorRuler.foreground#72727266
  • editorSuggestWidget.background#0e0e11
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.highlightForeground#fabd2f
  • editorSuggestWidget.selectedBackground#9bbfbf4d
  • editorWarning.foreground#fabd2f
  • editorWhitespace.foreground#72727299
  • editorWidget.background#0e0e11
  • errorForeground#ff3333
  • extensionButton.prominentBackground#fabd2f
  • extensionButton.prominentForeground#0a0e14
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#3c4250
  • foreground#727272
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#d96c75b3
  • gitDecoration.ignoredResourceForeground#373d49
  • gitDecoration.modifiedResourceForeground#6994bfb3
  • gitDecoration.submoduleResourceForeground#ffee99b3
  • gitDecoration.untrackedResourceForeground#91b362b3
  • icon.foreground#727272
  • input.background#0e0e11
  • input.border#2b303a
  • input.foreground#b3b1ad
  • input.placeholderForeground#414856
  • inputOption.activeBorder#fabd2f
  • inputValidation.errorBackground#0a0e14
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#0a0e14
  • inputValidation.infoBorder#39bae6
  • inputValidation.warningBackground#0a0e14
  • inputValidation.warningBorder#ffb454
  • list.activeSelectionBackground#9bbfbf
  • list.activeSelectionForeground#000
  • list.errorForeground#d96c75
  • list.filterMatchBackground#fabd2f0d
  • list.filterMatchBorder#fabd2f
  • list.focusBackground#9bbfbf
  • list.focusForeground#000
  • list.highlightForeground#fabd2f
  • list.hoverBackground#9bbfbf4d
  • list.hoverForeground#000
  • list.inactiveSelectionBackground#9bbfbf4d
  • list.inactiveSelectionForeground#000
  • list.invalidItemForeground#414856
  • listFilterWidget.background#0e0e11
  • listFilterWidget.noMatchesOutline#ff3333
  • listFilterWidget.outline#fabd2f
  • panel.background#131519
  • panel.border#00010a
  • panelTitle.activeBorder#fabd2f
  • panelTitle.activeForeground#b3b1ad
  • panelTitle.inactiveForeground#727272
  • peekView.border#00010a
  • peekViewEditor.background#0e0e11
  • peekViewEditor.matchHighlightBackground#fabd2f33
  • peekViewResult.background#0e0e11
  • peekViewResult.fileForeground#727272
  • peekViewResult.matchHighlightBackground#fabd2f33
  • peekViewTitle.background#0e0e11
  • peekViewTitleDescription.foreground#727272
  • peekViewTitleLabel.foreground#727272
  • pickerGroup.border#00010a
  • pickerGroup.foreground#373d49
  • progressBar.background#fabd2f
  • scrollbar.shadow#00010a
  • scrollbarSlider.activeBackground#727272b3
  • scrollbarSlider.background#72727266
  • scrollbarSlider.hoverBackground#72727299
  • selection.background#273747fd
  • settings.headerForeground#b3b1ad
  • settings.modifiedItemIndicator#6994bf
  • sideBar.background#131519
  • sideBar.border#00010a
  • sideBarSectionHeader.background#171a1f
  • sideBarSectionHeader.border#00010a
  • sideBarSectionHeader.foreground#727272
  • sideBarTitle.foreground#727272
  • statusBar.background#131519
  • statusBar.border#00010a
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#0a0e14
  • statusBar.foreground#727272
  • statusBar.noFolderBackground#0e0e11
  • statusBarItem.activeBackground#0e0e11
  • statusBarItem.hoverBackground#0e0e11
  • statusBarItem.prominentBackground#0e0e11
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#0e0e11
  • tab.activeBorder#0e0e11
  • tab.activeBorderTop#9bbfbf
  • tab.activeForeground#9bbfbf
  • tab.border#00010a
  • tab.inactiveBackground#17191d
  • tab.inactiveForeground#727272
  • tab.unfocusedActiveBorderTop#727272
  • tab.unfocusedActiveForeground#727272
  • tab.unfocusedInactiveForeground#727272
  • terminal.ansiBlack#0e0e11
  • terminal.ansiBlue#53bdfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#59c2ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#b8bb26
  • terminal.ansiBrightMagenta#40ef4b
  • terminal.ansiBrightRed#f24732
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f24732
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#91b362
  • terminal.ansiMagenta#fae994
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#131519
  • terminal.foreground#727272
  • textBlockQuote.background#0e0e11
  • textLink.activeForeground#fabd2f
  • textLink.foreground#fabd2f
  • textPreformat.foreground#b3b1ad
  • titleBar.activeBackground#131519
  • titleBar.activeForeground#b3b1ad
  • titleBar.border#00010a
  • titleBar.inactiveBackground#131519
  • titleBar.inactiveForeground#727272
  • tree.indentGuidesStroke#727272b3
  • walkThrough.embeddedEditorBackground#0e0e11
  • widget.shadow#00010a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b3b1ad
comment#626a73italic
string, constant.other.symbol#b8bb26
string.regexp, constant.character, constant.other#95e6cb
constant.numeric#fabd2f
constant.language#fabd2f
variable#b3b1ad
variable.member#f24732
variable.language#39bae6italic
storage#fa25f9
keyword#fa25f9
keyword.operator#f29668
punctuation.separator, punctuation.terminator#b3b1adb3
punctuation.section#b3b1ad
punctuation.accessor#f29668
source.java storage.type, source.haskell storage.type, source.c storage.type#59c2ff
entity.other.inherited-class#39bae6
storage.type.function#fa25f9
source.java storage.type.primitive#39bae6
entity.name.function#fabd2f
variable.parameter, meta.parameter#40ef4b
variable.function, variable.annotation, meta.function-call.generic, support.function.go#fabd2f
support.function, support.macro#f24732
entity.name.import, entity.name.package#b8bb26
entity.name#59c2ff
entity.name.tag, meta.tag.sgml#39bae6
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#39bae680
entity.other.attribute-name#fabd2f
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#ff3333
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#fabd2f
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#626a73
support.type.property-name#39bae6normal
constant.numeric.line-number.find-in-files - match#626a73
constant.numeric.line-number.match#fa25f9
entity.name.filename.find-in-files#b8bb26
message.error#ff3333
markup.heading, markup.heading entity.name#b8bb26bold
markup.underline.link, string.other.link#39bae6
markup.italic#f24732italic
markup.bold#f24732bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#626a73bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#fabd2f
markup.inserted#91b362
markup.changed#6994bf
markup.deleted#d96c75
markup.strike#e6b673
markup.table#39bae6
text.html.markdown markup.inline.raw#f29668
text.html.markdown meta.dummy.line-break#626a73
punctuation.definition.markdown#626a73