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#080406
  • activityBar.border#1e0c10
  • activityBar.foreground#c7b7a3
  • activityBar.inactiveForeground#3c1420
  • activityBarBadge.background#6d2932
  • activityBarBadge.foreground#e8d8c4
  • badge.background#561c24
  • badge.foreground#e8d8c4
  • breadcrumb.activeSelectionForeground#e8d8c4
  • breadcrumb.focusForeground#c7b7a3
  • breadcrumb.foreground#4a2030
  • breadcrumbPicker.background#120608
  • button.background#561c24
  • button.foreground#e8d8c4
  • button.hoverBackground#6d2932
  • button.secondaryBackground#3a1820
  • button.secondaryForeground#c7b7a3
  • descriptionForeground#704050
  • dropdown.background#120608
  • dropdown.border#3a1820
  • dropdown.foreground#e8d8c4
  • editor.background#0e0608
  • editor.findMatchBackground#6d2932
  • editor.findMatchHighlightBackground#441820
  • editor.foreground#e8d8c4
  • editor.inactiveSelectionBackground#2a0c12
  • editor.lineHighlightBackground#160a0c
  • editor.rangeHighlightBackground#180a0e
  • editor.selectionBackground#561c24
  • editor.selectionHighlightBackground#3a1018
  • editor.wordHighlightBackground#44141c
  • editor.wordHighlightStrongBackground#5e2028
  • editorBracketMatch.background#561c24
  • editorBracketMatch.border#c7b7a3
  • editorCursor.foreground#c7b7a3
  • editorGroupHeader.tabsBackground#090506
  • editorGroupHeader.tabsBorder#1e0c10
  • editorGutter.addedBackground#3a5828
  • editorGutter.background#0e0608
  • editorGutter.deletedBackground#6d2932
  • editorGutter.modifiedBackground#8a4830
  • editorIndentGuide.activeBackground1#522030
  • editorIndentGuide.background1#381624
  • editorLineNumber.activeForeground#9a5868
  • editorLineNumber.foreground#6a3040
  • editorWhitespace.foreground#281018
  • focusBorder#6d2932
  • gitDecoration.addedResourceForeground#6a9848
  • gitDecoration.conflictingResourceForeground#784860
  • gitDecoration.deletedResourceForeground#8a2830
  • gitDecoration.ignoredResourceForeground#401420
  • gitDecoration.modifiedResourceForeground#9a7840
  • gitDecoration.untrackedResourceForeground#7ab050
  • input.background#120608
  • input.border#3a1820
  • input.foreground#e8d8c4
  • input.placeholderForeground#3c1420
  • inputOption.activeBackground#3a1820
  • inputOption.activeBorder#6d2932
  • list.activeSelectionBackground#3a1820
  • list.activeSelectionForeground#e8d8c4
  • list.focusBackground#3a1820
  • list.highlightForeground#c7b7a3
  • list.hoverBackground#160a0c
  • list.hoverForeground#e8d8c4
  • list.inactiveSelectionBackground#1e0c10
  • list.inactiveSelectionForeground#9a7870
  • notificationLink.foreground#c7b7a3
  • notifications.background#120608
  • notifications.border#3a1820
  • notifications.foreground#e8d8c4
  • panel.background#0a0406
  • panel.border#1e0c10
  • panelTitle.activeBorder#6d2932
  • panelTitle.activeForeground#c7b7a3
  • panelTitle.inactiveForeground#3c1420
  • peekView.border#6d2932
  • peekViewEditor.background#0c0508
  • peekViewEditor.matchHighlightBackground#561c24
  • peekViewResult.background#0a0406
  • peekViewResult.fileForeground#c7b7a3
  • peekViewResult.lineForeground#9a7870
  • peekViewResult.matchHighlightBackground#561c24
  • peekViewResult.selectionBackground#3a1820
  • peekViewResult.selectionForeground#e8d8c4
  • peekViewTitle.background#120608
  • peekViewTitleDescription.foreground#704050
  • peekViewTitleLabel.foreground#e8d8c4
  • progressBar.background#6d2932
  • scrollbarSlider.activeBackground#5a2838ee
  • scrollbarSlider.background#3a1820aa
  • scrollbarSlider.hoverBackground#482030cc
  • selection.background#561c24
  • sideBar.background#0a0406
  • sideBar.border#1e0c10
  • sideBar.foreground#9a7870
  • sideBarSectionHeader.background#120608
  • sideBarSectionHeader.border#280e14
  • sideBarSectionHeader.foreground#b0988a
  • sideBarTitle.foreground#c7b7a3
  • statusBar.background#080406
  • statusBar.border#1e0c10
  • statusBar.debuggingBackground#561c24
  • statusBar.foreground#c7b7a3
  • statusBar.noFolderBackground#3a1018
  • statusBarItem.activeBackground#3a1820
  • statusBarItem.hoverBackground#1e0c10
  • statusBarItem.remoteBackground#6d2932
  • statusBarItem.remoteForeground#e8d8c4
  • tab.activeBackground#0e0608
  • tab.activeBorder#6d2932
  • tab.activeForeground#e8d8c4
  • tab.border#1e0c10
  • tab.hoverBackground#140810
  • tab.inactiveBackground#0a0406
  • tab.inactiveForeground#4a2030
  • terminal.ansiBlack#1e0c10
  • terminal.ansiBlue#486080
  • terminal.ansiBrightBlack#401420
  • terminal.ansiBrightBlue#6888a0
  • terminal.ansiBrightCyan#609088
  • terminal.ansiBrightGreen#6a9848
  • terminal.ansiBrightMagenta#986880
  • terminal.ansiBrightRed#aa3840
  • terminal.ansiBrightWhite#e8d8c4
  • terminal.ansiBrightYellow#c09858
  • terminal.ansiCyan#407068
  • terminal.ansiGreen#4a7830
  • terminal.ansiMagenta#784860
  • terminal.ansiRed#8a2830
  • terminal.ansiWhite#c7b7a3
  • terminal.ansiYellow#9a7840
  • terminal.background#0a0406
  • terminal.foreground#e8d8c4
  • terminalCursor.foreground#c7b7a3
  • textLink.activeForeground#e8d8c4
  • textLink.foreground#c7b7a3
  • titleBar.activeBackground#080406
  • titleBar.activeForeground#c7b7a3
  • titleBar.border#1e0c10
  • titleBar.inactiveBackground#0a0406
  • titleBar.inactiveForeground#3c1420
  • widget.shadow#040204cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a3848italic
string, string.quoted#c7b7a3
constant.character.escape, string.regexp#e8d8c4
constant.numeric#b09080
constant.language#8a4858bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#6d2932bold
keyword.operator#785060
entity.name.function, meta.function-call entity.name.function, support.function#a87868
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#8a5868bold
variable, variable.other#e8d8c4
variable.language#c7b7a3italic
variable.parameter#d8c8b0
variable.other.property, support.variable.property, meta.object-literal.key#b89880
entity.name.tag, meta.tag#6d2932
entity.other.attribute-name#8a5060
entity.other.attribute-name.class, entity.other.attribute-name.id#c7b7a3
support.type.property-name#a87868
support.constant.property-value#c7b7a3
keyword.control.import, keyword.control.from#6d2932bold
punctuation.separator, punctuation.terminator, punctuation.accessor#4a2030
punctuation.definition.parameters, punctuation.definition.block, meta.brace#704050
markup.heading, entity.name.section#c7b7a3bold
markup.bold#e8d8c4bold
markup.italic#b89880italic
markup.inline.raw, markup.fenced_code#a87868
markup.underline.link#c7b7a3
invalid#aa2030underline
invalid.deprecated#5a2030strikethrough