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#070906
  • activityBar.border#181c0e
  • activityBar.foreground#a07830
  • activityBar.inactiveForeground#302e18
  • activityBarBadge.background#c07820
  • activityBarBadge.foreground#0d100a
  • badge.background#6a5818
  • badge.foreground#e8d8a8
  • breadcrumb.activeSelectionForeground#c8b898
  • breadcrumb.focusForeground#a07830
  • breadcrumb.foreground#4a4828
  • breadcrumbPicker.background#0e110a
  • button.background#6a5818
  • button.foreground#e8d8a8
  • button.hoverBackground#807020
  • button.secondaryBackground#282810
  • button.secondaryForeground#a07830
  • descriptionForeground#5a5830
  • dropdown.background#0e110a
  • dropdown.border#282810
  • dropdown.foreground#c8b898
  • editor.background#0d100a
  • editor.findMatchBackground#6a4808
  • editor.findMatchHighlightBackground#402c06
  • editor.foreground#c8b898
  • editor.inactiveSelectionBackground#1c240e
  • editor.lineHighlightBackground#131610
  • editor.rangeHighlightBackground#181c0e
  • editor.selectionBackground#2e3a18
  • editor.selectionHighlightBackground#222c10
  • editor.wordHighlightBackground#283014
  • editor.wordHighlightStrongBackground#34401a
  • editorBracketMatch.background#2e3a18
  • editorBracketMatch.border#8a9a30
  • editorCursor.foreground#c07820
  • editorGroupHeader.tabsBackground#080b07
  • editorGroupHeader.tabsBorder#181c0e
  • editorGutter.addedBackground#3a6020
  • editorGutter.background#0d100a
  • editorGutter.deletedBackground#7a2c18
  • editorGutter.modifiedBackground#906020
  • editorIndentGuide.activeBackground1#3e4a24
  • editorIndentGuide.background1#2a3018
  • editorLineNumber.activeForeground#9a9040
  • editorLineNumber.foreground#5a6030
  • editorWhitespace.foreground#1e2210
  • focusBorder#c07820
  • gitDecoration.addedResourceForeground#5a8828
  • gitDecoration.conflictingResourceForeground#904828
  • gitDecoration.deletedResourceForeground#8a2818
  • gitDecoration.ignoredResourceForeground#38401e
  • gitDecoration.modifiedResourceForeground#a07020
  • gitDecoration.untrackedResourceForeground#6a9030
  • input.background#0e110a
  • input.border#282810
  • input.foreground#c8b898
  • input.placeholderForeground#302e18
  • inputOption.activeBackground#282810
  • inputOption.activeBorder#c07820
  • list.activeSelectionBackground#282810
  • list.activeSelectionForeground#c8b898
  • list.focusBackground#282810
  • list.highlightForeground#c07820
  • list.hoverBackground#131610
  • list.hoverForeground#c8b898
  • list.inactiveSelectionBackground#181c0e
  • list.inactiveSelectionForeground#7a7858
  • notificationLink.foreground#c07820
  • notifications.background#0e110a
  • notifications.border#282810
  • notifications.foreground#c8b898
  • panel.background#090c08
  • panel.border#181c0e
  • panelTitle.activeBorder#c07820
  • panelTitle.activeForeground#a07830
  • panelTitle.inactiveForeground#302e18
  • peekView.border#c07820
  • peekViewEditor.background#0b0e09
  • peekViewEditor.matchHighlightBackground#2e3a18
  • peekViewResult.background#090c08
  • peekViewResult.fileForeground#a07830
  • peekViewResult.lineForeground#7a7858
  • peekViewResult.matchHighlightBackground#2e3a18
  • peekViewResult.selectionBackground#282810
  • peekViewResult.selectionForeground#c8b898
  • peekViewTitle.background#0e110a
  • peekViewTitleDescription.foreground#5a5830
  • peekViewTitleLabel.foreground#c8b898
  • progressBar.background#c07820
  • scrollbarSlider.activeBackground#404520ee
  • scrollbarSlider.background#282810aa
  • scrollbarSlider.hoverBackground#343618cc
  • selection.background#2e3a18
  • sideBar.background#090c08
  • sideBar.border#181c0e
  • sideBar.foreground#7a7858
  • sideBarSectionHeader.background#0e110a
  • sideBarSectionHeader.border#1e2210
  • sideBarSectionHeader.foreground#887848
  • sideBarTitle.foreground#a07830
  • statusBar.background#070906
  • statusBar.border#181c0e
  • statusBar.debuggingBackground#4a2c08
  • statusBar.foreground#a07830
  • statusBar.noFolderBackground#1e1808
  • statusBarItem.activeBackground#282810
  • statusBarItem.hoverBackground#181c0e
  • statusBarItem.remoteBackground#c07820
  • statusBarItem.remoteForeground#0d100a
  • tab.activeBackground#0d100a
  • tab.activeBorder#c07820
  • tab.activeForeground#c8b898
  • tab.border#181c0e
  • tab.hoverBackground#111410
  • tab.inactiveBackground#090c08
  • tab.inactiveForeground#4a4828
  • terminal.ansiBlack#181c0e
  • terminal.ansiBlue#486080
  • terminal.ansiBrightBlack#38401e
  • terminal.ansiBrightBlue#6880a0
  • terminal.ansiBrightCyan#609880
  • terminal.ansiBrightGreen#789830
  • terminal.ansiBrightMagenta#906840
  • terminal.ansiBrightRed#b03820
  • terminal.ansiBrightWhite#e0d0a8
  • terminal.ansiBrightYellow#c89030
  • terminal.ansiCyan#407860
  • terminal.ansiGreen#5a7820
  • terminal.ansiMagenta#704828
  • terminal.ansiRed#8a2818
  • terminal.ansiWhite#a89878
  • terminal.ansiYellow#a07020
  • terminal.background#090c08
  • terminal.foreground#c8b898
  • terminalCursor.foreground#c07820
  • textLink.activeForeground#d89030
  • textLink.foreground#c07820
  • titleBar.activeBackground#070906
  • titleBar.activeForeground#a07830
  • titleBar.border#181c0e
  • titleBar.inactiveBackground#090c08
  • titleBar.inactiveForeground#302e18
  • widget.shadow#040503cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#587038italic
string, string.quoted#b09030
constant.character.escape, string.regexp#c07820
constant.numeric#a08028
constant.language#c06030bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#c86030bold
keyword.operator#706040
entity.name.function, meta.function-call entity.name.function, support.function#8a9a30
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#6a8828bold
variable, variable.other#c8b898
variable.language#c07820italic
variable.parameter#c0a878
variable.other.property, support.variable.property, meta.object-literal.key#9a8858
entity.name.tag, meta.tag#c86030
entity.other.attribute-name#887848
entity.other.attribute-name.class, entity.other.attribute-name.id#b09030
support.type.property-name#8a9a30
support.constant.property-value#b09030
keyword.control.import, keyword.control.from#c86030bold
punctuation.separator, punctuation.terminator, punctuation.accessor#4a4828
punctuation.definition.parameters, punctuation.definition.block, meta.brace#5a5830
markup.heading, entity.name.section#c07820bold
markup.bold#b09030bold
markup.italic#9a8858italic
markup.inline.raw, markup.fenced_code#8a9a30
markup.underline.link#c07820
invalid#b03020underline
invalid.deprecated#604020strikethrough