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#191d25
  • activityBar.border#272c3a
  • activityBar.foreground#626a7acc
  • activityBar.inactiveForeground#707a8c99
  • activityBarBadge.background#85d2fffb
  • activityBarBadge.foreground#272c3a
  • badge.background#85d2fffb
  • badge.foreground#1f2430
  • button.background#85d2fffb
  • button.foreground#20242F
  • button.hoverBackground#61b7e9fb
  • debugExceptionWidget.background#232834
  • debugExceptionWidget.border#191e2a
  • debugToolBar.background#232834
  • descriptionForeground#707a8c
  • diffEditor.insertedTextBackground#bae67e26
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#232834
  • dropdown.border#434957
  • dropdown.foreground#707a8c
  • editor.background#191d25
  • editor.findMatchBackground#478ab1fb
  • editor.findMatchBorder#85d2fffb
  • editor.findMatchHighlightBackground#24b6fa0d
  • editor.findMatchHighlightBorder#85d2fffb
  • editor.findRangeHighlightBackground#323a4c
  • editor.findRangeHighlightBorder#1f243000
  • editor.foreground#cbccc6
  • editor.inactiveSelectionBackground#323a4c
  • editor.lineHighlightBackground#191e2a
  • editor.rangeHighlightBackground#191e2a
  • editor.selectionBackground#33415e
  • editor.selectionHighlightBackground#323a4c
  • editor.selectionHighlightBorder#323a4c
  • editor.wordHighlightBackground#77a8d912
  • editor.wordHighlightBorder#77a8d980
  • editor.wordHighlightStrongBackground#a6cc7012
  • editor.wordHighlightStrongBorder#a6cc7080
  • editorBracketMatch.background#707a8c4d
  • editorBracketMatch.border#707a8c99
  • editorCodeLens.foreground#5c6773
  • editorCursor.foreground#FAC124
  • editorError.foreground#EF4444
  • editorGroup.border#2b303f
  • editorGroup.emptyBackground#232834
  • editorGroupHeader.noTabsBackground#1f2430
  • editorGroupHeader.tabsBackground#1f2430
  • editorGroupHeader.tabsBorder#1f2430
  • editorGutter.addedBackground#ade95999
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#85d2ff99
  • editorHoverWidget.background#232834
  • editorHoverWidget.border#101521
  • editorIndentGuide.activeBackground#707a8cb3
  • editorIndentGuide.background#707a8c4d
  • editorLineNumber.activeForeground#707a8ccc
  • editorLineNumber.foreground#707a8c66
  • editorLink.activeForeground#85d2fffb
  • editorMarkerNavigation.background#232834
  • editorOverviewRuler.addedForeground#ade95999
  • editorOverviewRuler.border#191e2a
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#EF4444
  • editorOverviewRuler.modifiedForeground#85d2ff99
  • editorOverviewRuler.warningForeground#FAC124
  • editorRuler.foreground#707a8c4d
  • editorSuggestWidget.background#232834
  • editorSuggestWidget.border#101521
  • editorSuggestWidget.highlightForeground#85d2fffb
  • editorSuggestWidget.selectedBackground#191e2a
  • editorWarning.foreground#FAC124
  • editorWhitespace.foreground#707a8c66
  • editorWidget.background#232834
  • errorForeground#EF4444
  • extensionButton.prominentBackground#85d2fffb
  • extensionButton.prominentForeground#1f2430
  • extensionButton.prominentHoverBackground#5aa0c9fb
  • focusBorder#20242F
  • foreground#707a8c
  • gitDecoration.conflictingResourceForeground#ef6b73
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#525a69
  • gitDecoration.modifiedResourceForeground#85d2fffb
  • gitDecoration.submoduleResourceForeground#d4bfffb3
  • gitDecoration.untrackedResourceForeground#ade959e8
  • icon.foreground#707a8c
  • input.background#181c25
  • input.border#282e3d
  • input.foreground#cbccc6
  • input.placeholderForeground#5f6878
  • inputOption.activeBorder#61b7e9fb
  • inputValidation.errorBackground#1f2430
  • inputValidation.errorBorder#EF4444
  • inputValidation.infoBackground#1f2430
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#1f2430
  • inputValidation.warningBorder#e06656fb
  • list.activeSelectionBackground#191e2a
  • list.activeSelectionForeground#707a8c
  • list.errorForeground#f27983
  • list.filterMatchBackground#85d2fffb
  • list.filterMatchBorder#85d2fffb
  • list.focusBackground#191e2a
  • list.focusForeground#707a8c
  • list.highlightForeground#85d2fffb
  • list.hoverBackground#191e2a
  • list.hoverForeground#707a8c
  • list.inactiveSelectionBackground#191e2a
  • list.inactiveSelectionForeground#707a8c
  • list.invalidItemForeground#5f6878
  • listFilterWidget.background#232834
  • listFilterWidget.noMatchesOutline#EF4444
  • listFilterWidget.outline#85d2fffb
  • panel.background#1f2430
  • panel.border#191e2a
  • panelTitle.activeBorder#85d2fffb
  • panelTitle.activeForeground#cbccc6
  • panelTitle.inactiveForeground#707a8c
  • peekView.border#191e2a
  • peekViewEditor.background#232834
  • peekViewEditor.matchHighlightBackground#85d2fffb
  • peekViewResult.background#232834
  • peekViewResult.fileForeground#707a8c
  • peekViewResult.matchHighlightBackground#85d2fffb
  • peekViewTitle.background#232834
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#707a8c
  • pickerGroup.border#191e2a
  • pickerGroup.foreground#525a69
  • progressBar.background#85d2fffb
  • scrollbar.shadow#191e2a
  • scrollbarSlider.activeBackground#707a8cb3
  • scrollbarSlider.background#707a8c66
  • scrollbarSlider.hoverBackground#707a8c99
  • selection.background#33415efd
  • settings.headerForeground#cbccc6
  • settings.modifiedItemIndicator#77a8d9
  • sideBar.background#12151b
  • sideBar.border#20242F
  • sideBarSectionHeader.background#191d25
  • sideBarSectionHeader.border#191d25
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#12151b
  • statusBar.border#1f2430
  • statusBar.debuggingBackground#85d2fffb
  • statusBar.debuggingForeground#1f2430
  • statusBar.foreground#707a8c
  • statusBar.noFolderBackground#232834
  • statusBarItem.activeBackground#191e2a
  • statusBarItem.hoverBackground#191e2a
  • statusBarItem.prominentBackground#191e2a
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#161922
  • tab.activeBorder#FAC124
  • tab.activeForeground#cbccc6
  • tab.border#1f2430
  • tab.inactiveBackground#242a38
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorder#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#191e2a
  • terminal.ansiBlue#5ba5ca
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FAC124
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#ade959
  • terminal.ansiMagenta#cfbafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#FAC124
  • terminal.background#191d25
  • terminal.foreground#cbccc6
  • textBlockQuote.background#232834
  • textLink.activeForeground#5eb5e7fb
  • textLink.foreground#85d2fffb
  • textPreformat.foreground#cbccc6
  • titleBar.activeBackground#1f2430
  • titleBar.activeForeground#cbccc6
  • titleBar.border#1f2430
  • titleBar.inactiveBackground#1f2430
  • titleBar.inactiveForeground#707a8c
  • tree.indentGuidesStroke#707a8cb3
  • walkThrough.embeddedEditorBackground#232834
  • widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cbccc6
comment#5c6773italic
string, constant.other.symbol#bae67e
string.regexp, constant.character, constant.other#95e6cb
constant.numeric#ffcc66
constant.language#ffcc66
variable#9ee8f7
variable.member#f28779
variable.language#5ccfe6italic
storage#ffa759
keyword#59afff
keyword.operator#cf8661e3
punctuation.separator, punctuation.terminator#cbccc6b3
punctuation.section#cbccc6
punctuation.accessor#f29e74
source.java storage.type, source.haskell storage.type, source.c storage.type#73d0ff
entity.other.inherited-class#5ce6b1
storage.type.function#ffa759
source.java storage.type.primitive#5ccfe6
entity.name.function#ffd580
variable.parameter, meta.parameter#a5e2faf5
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffd580
support.function, support.macro#f28779
entity.name.import, entity.name.package#bae67e
entity.name#73d0ff
entity.name.tag, meta.tag.sgml#3ec994
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#3ec994bb
entity.other.attribute-name#ffd580
support.constant#f29e74italic
support.type, support.class, source.go storage.type#7abfff
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#ffe6b3
invalid#ff3333
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#ffd580
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#73d0ff
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#5c6773
support.type.property-name#5ccfe6normal
constant.numeric.line-number.find-in-files - match#5c6773
constant.numeric.line-number.match#ffa759
entity.name.filename.find-in-files#bae67e
message.error#ff3333
markup.heading, markup.heading entity.name#bae67ebold
markup.underline.link, string.other.link#5ccfe6
markup.italic#f28779italic
markup.bold#f28779bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#5c6773bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffd580
markup.inserted#a6cc70
markup.changed#77a8d9
markup.deleted#f27983
markup.strike#ffe6b3
markup.table#5ccfe6
text.html.markdown markup.inline.raw#f29e74
text.html.markdown meta.dummy.line-break#5c6773
punctuation.definition.markdown#5c6773