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#202020
  • activityBar.border#202020
  • activityBar.foreground#ffffff
  • activityBarBadge.background#e6b450c2
  • activityBarBadge.foreground#202020
  • badge.background#e6b450c2
  • badge.foreground#202020
  • button.background#e6b450c2
  • button.foreground#202020
  • button.hoverBackground#e1af4b
  • debugExceptionWidget.background#0d1016
  • debugExceptionWidget.border#01060e
  • debugToolBar.background#0d1016
  • diffEditor.insertedTextBackground#c2d94c26
  • diffEditor.removedTextBackground#f29668c226
  • dropdown.background#0d1016
  • dropdown.border#191e25
  • dropdown.foreground#3d424d
  • editor.background#202020
  • editor.findMatchBackground#e6b450c20d
  • editor.findMatchBorder#e6b450c2
  • editor.findMatchHighlightBackground#e6b450c20d
  • editor.findMatchHighlightBorder#e6b450c259
  • editor.findRangeHighlightBackground#121922
  • editor.findRangeHighlightBorder#00000
  • editor.foreground#b3b1ad
  • editor.inactiveSelectionBackground#121922
  • editor.lineHighlightBackground#01060e
  • editor.rangeHighlightBackground#01060e
  • editor.selectionBackground#161f2a
  • editor.selectionHighlightBackground#121922
  • editor.selectionHighlightBorder#1d2936
  • editor.wordHighlightBackground#121922
  • editor.wordHighlightStrongBackground#e6b450c233
  • editorBracketMatch.background#3d424d4d
  • editorBracketMatch.border#3d424d99
  • editorCodeLens.foreground#626a73
  • editorCursor.foreground#e6b450c2
  • editorError.foreground#ff3333a1
  • editorGroup.background#0d1016
  • editorGroup.border#01060e
  • editorGroupHeader.noTabsBackground#202020
  • editorGroupHeader.tabsBackground#202020
  • editorGroupHeader.tabsBorder#202020
  • editorGutter.addedBackground#91b36299
  • editorGutter.deletedBackground#d96c7599
  • editorGutter.modifiedBackground#6994bf99
  • editorHoverWidget.background#0d1016
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#3d424db3
  • editorIndentGuide.background#3d424d66
  • editorLineNumber.activeForeground#3d424de6
  • editorLineNumber.foreground#ffffff8d
  • editorLink.activeForeground#e6b450c2
  • editorMarkerNavigation.background#0d1016
  • editorOverviewRuler.addedForeground#91b36299
  • editorOverviewRuler.border#01060e
  • editorOverviewRuler.deletedForeground#d96c7599
  • editorOverviewRuler.errorForeground#ff3333a1
  • editorOverviewRuler.modifiedForeground#6994bf99
  • editorOverviewRuler.warningForeground#e6b450c2
  • editorRuler.foreground#3d424d66
  • editorSuggestWidget.background#0d1016
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.highlightForeground#e6b450c2
  • editorSuggestWidget.selectedBackground#01060e
  • editorWarning.foreground#e6b450c2
  • editorWhitespace.foreground#3d424d99
  • editorWidget.background#0d1016
  • extensionButton.prominentBackground#e6b450c2
  • extensionButton.prominentForeground#202020
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#292d36
  • foreground#d7dceca8
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#d96c75b3
  • gitDecoration.ignoredResourceForeground#242831
  • gitDecoration.modifiedResourceForeground#6994bfb3
  • gitDecoration.submoduleResourceForeground#ffee99b3
  • gitDecoration.untrackedResourceForeground#91b362b3
  • input.background#0d1016
  • input.border#191e25
  • input.foreground#b3b1ad
  • input.placeholderForeground#2e323c
  • inputOption.activeBorder#e6b450c2
  • inputValidation.errorBackground#202020
  • inputValidation.errorBorder#ff3333a1
  • inputValidation.infoBackground#202020
  • inputValidation.infoBorder#39bae6c2
  • inputValidation.warningBackground#202020
  • inputValidation.warningBorder#ffb454c2
  • list.activeSelectionBackground#ffffff28
  • list.activeSelectionForeground#b7bece
  • list.focusBackground#01060e
  • list.focusForeground#3d424d
  • list.highlightForeground#e6b450c2
  • list.hoverBackground#01060e
  • list.hoverForeground#3d424d
  • list.inactiveSelectionBackground#76809062
  • list.inactiveSelectionForeground#ffffffc7
  • list.invalidItemForeground#2e323c
  • menu.foreground#b3b1ad
  • panel.background#202020
  • panel.border#01060e
  • panelTitle.activeBorder#e6b450c2
  • panelTitle.activeForeground#b3b1ad
  • panelTitle.inactiveForeground#3d424d
  • peekView.border#01060e
  • peekViewEditor.background#0d1016
  • peekViewEditor.matchHighlightBackground#e6b450c233
  • peekViewResult.background#0d1016
  • peekViewResult.fileForeground#3d424d
  • peekViewResult.matchHighlightBackground#e6b450c233
  • peekViewTitle.background#0d1016
  • peekViewTitleDescription.foreground#3d424d
  • peekViewTitleLabel.foreground#3d424d
  • pickerGroup.border#01060e
  • pickerGroup.foreground#242831
  • progressBar.background#e6b450c2
  • scrollbar.shadow#01060e
  • scrollbarSlider.activeBackground#3d424db3
  • scrollbarSlider.background#3d424d66
  • scrollbarSlider.hoverBackground#3d424d99
  • selection.background#161f2afd
  • settings.headerForeground#b3b1ad
  • settings.modifiedItemIndicator#6994bf
  • sideBar.background#202020
  • sideBar.border#202020
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.foreground#b8c5e2
  • sideBarTitle.foreground#ffffff
  • statusBar.background#202020
  • statusBar.border#202020
  • statusBar.debuggingBackground#f29668c2
  • statusBar.debuggingForeground#202020
  • statusBar.foreground#ffffff8d
  • statusBar.noFolderBackground#0d1016
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#01060e
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#ffffff31
  • tab.activeBorder#e6b450c2
  • tab.activeForeground#b3b1ad
  • tab.border#202020
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#3d424d
  • tab.unfocusedActiveBorder#3d424d
  • tab.unfocusedActiveForeground#3d424d
  • tab.unfocusedInactiveForeground#3d424d
  • terminal.ansiBlack#01060e
  • terminal.ansiBlue#53bdfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#59c2ffc2
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#c2d94cc2
  • terminal.ansiBrightMagenta#ffee99c2
  • terminal.ansiBrightRed#f07178c2
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb454c2
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#91b362
  • terminal.ansiMagenta#fae994
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#202020
  • terminal.foreground#b3b1ad
  • textBlockQuote.background#0d1016
  • textLink.activeForeground#e6b450c2
  • textLink.foreground#e6b450c2
  • textPreformat.foreground#b3b1ad
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#b3b1ad
  • titleBar.border#202020
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#3d424d
  • walkThrough.embeddedEditorBackground#0d1016
  • widget.shadow#00010a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b3b1ad
comment#626a73italic
string, constant.other.symbol#c2d94cc2
string.regexp, constant.character, constant.other#95e6cb
constant.numeric#e6b450c2
constant.language#e6b450c2
variable#b3b1ad
variable.member#f07178c2
variable.language#39bae6c2italic
storage#ff8f40c2
keyword#ff8f40c2
keyword.operator#f29668c2
punctuation.separator, punctuation.terminator#b3b1adb3
punctuation.section#b3b1ad
punctuation.accessor#f29668c2
source.java storage.type, source.haskell storage.type, source.c storage.type#59c2ffc2
entity.other.inherited-class#39bae6c2
storage.type.function#ff8f40c2
source.java storage.type.primitive#39bae6c2
entity.name.function#ffb454c2
variable.parameter, meta.parameter#ffee99c2
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffb454c2
support.function, support.macro#f07178c2
entity.name.import, entity.name.package#c2d94cc2
entity.name#59c2ffc2
entity.name.tag, meta.tag.sgml#39bae6c2
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#39bae680
entity.other.attribute-name#ffb454c2
support.constant#f29668c2italic
support.type, support.class, source.go storage.type#39bae6c2
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#e6b673
invalid#ff3333a1
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#ffb454c2
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#59c2ffc2
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#39bae6c2normal
constant.numeric.line-number.find-in-files - match#626a73
constant.numeric.line-number.match#ff8f40c2
entity.name.filename.find-in-files#c2d94cc2
message.error#ff3333a1
markup.heading, markup.heading entity.name#c2d94cc2bold
markup.underline.link, string.other.link#39bae6c2
markup.italic#f07178c2italic
markup.bold#f07178c2bold
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#ffb454c2
markup.inserted#91b362
markup.changed#6994bf
markup.deleted#d96c75
markup.strike#e6b673
markup.table#39bae6c2
text.html.markdown markup.inline.raw#f29668c2
text.html.markdown meta.dummy.line-break#626a73
punctuation.definition.markdown#626a73