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#0c0604
  • activityBar.border#201008
  • activityBar.foreground#c87d3a
  • activityBar.inactiveForeground#3c1e0c
  • activityBarBadge.background#c87d3a
  • activityBarBadge.foreground#140a04
  • badge.background#8a5020
  • badge.foreground#f0e0c0
  • breadcrumb.activeSelectionForeground#e8d5b0
  • breadcrumb.focusForeground#c87d3a
  • breadcrumb.foreground#5a3018
  • breadcrumbPicker.background#180c06
  • button.background#8a5020
  • button.foreground#f0e0c0
  • button.hoverBackground#a86830
  • button.secondaryBackground#382010
  • button.secondaryForeground#c87d3a
  • descriptionForeground#7a4820
  • dropdown.background#180c06
  • dropdown.border#382010
  • dropdown.foreground#e8d5b0
  • editor.background#140a04
  • editor.findMatchBackground#7a4a18
  • editor.findMatchHighlightBackground#4c2c0c
  • editor.foreground#e8d5b0
  • editor.inactiveSelectionBackground#281606
  • editor.lineHighlightBackground#1c1008
  • editor.rangeHighlightBackground#1e1008
  • editor.selectionBackground#4a2c10
  • editor.selectionHighlightBackground#341e08
  • editor.wordHighlightBackground#3c2410
  • editor.wordHighlightStrongBackground#503018
  • editorBracketMatch.background#4a2c10
  • editorBracketMatch.border#c87d3a
  • editorCursor.foreground#c87d3a
  • editorGroupHeader.tabsBackground#0e0804
  • editorGroupHeader.tabsBorder#201008
  • editorGutter.addedBackground#4a6820
  • editorGutter.background#140a04
  • editorGutter.deletedBackground#7a2c18
  • editorGutter.modifiedBackground#a06020
  • editorIndentGuide.activeBackground1#503020
  • editorIndentGuide.background1#382010
  • editorLineNumber.activeForeground#9a6838
  • editorLineNumber.foreground#604028
  • editorWhitespace.foreground#281408
  • focusBorder#c87d3a
  • gitDecoration.addedResourceForeground#7a9838
  • gitDecoration.conflictingResourceForeground#784840
  • gitDecoration.deletedResourceForeground#8a3018
  • gitDecoration.ignoredResourceForeground#3c2010
  • gitDecoration.modifiedResourceForeground#a07020
  • gitDecoration.untrackedResourceForeground#90b040
  • input.background#180c06
  • input.border#382010
  • input.foreground#e8d5b0
  • input.placeholderForeground#3c1e0c
  • inputOption.activeBackground#382010
  • inputOption.activeBorder#c87d3a
  • list.activeSelectionBackground#382010
  • list.activeSelectionForeground#e8d5b0
  • list.focusBackground#382010
  • list.highlightForeground#c87d3a
  • list.hoverBackground#1c1008
  • list.hoverForeground#e8d5b0
  • list.inactiveSelectionBackground#201008
  • list.inactiveSelectionForeground#9a7040
  • notificationLink.foreground#c87d3a
  • notifications.background#180c06
  • notifications.border#382010
  • notifications.foreground#e8d5b0
  • panel.background#100804
  • panel.border#201008
  • panelTitle.activeBorder#c87d3a
  • panelTitle.activeForeground#c87d3a
  • panelTitle.inactiveForeground#3c1e0c
  • peekView.border#c87d3a
  • peekViewEditor.background#120a04
  • peekViewEditor.matchHighlightBackground#4a2c10
  • peekViewResult.background#100804
  • peekViewResult.fileForeground#c87d3a
  • peekViewResult.lineForeground#9a7040
  • peekViewResult.matchHighlightBackground#4a2c10
  • peekViewResult.selectionBackground#382010
  • peekViewResult.selectionForeground#e8d5b0
  • peekViewTitle.background#180c06
  • peekViewTitleDescription.foreground#7a4820
  • peekViewTitleLabel.foreground#e8d5b0
  • progressBar.background#c87d3a
  • scrollbarSlider.activeBackground#5a3820ee
  • scrollbarSlider.background#382010aa
  • scrollbarSlider.hoverBackground#482c18cc
  • selection.background#4a2c10
  • sideBar.background#100804
  • sideBar.border#201008
  • sideBar.foreground#9a7040
  • sideBarSectionHeader.background#180c06
  • sideBarSectionHeader.border#2a1808
  • sideBarSectionHeader.foreground#a86830
  • sideBarTitle.foreground#c87d3a
  • statusBar.background#0c0604
  • statusBar.border#201008
  • statusBar.debuggingBackground#5a3010
  • statusBar.foreground#c87d3a
  • statusBar.noFolderBackground#2a1408
  • statusBarItem.activeBackground#382010
  • statusBarItem.hoverBackground#201008
  • statusBarItem.remoteBackground#c87d3a
  • statusBarItem.remoteForeground#140a04
  • tab.activeBackground#140a04
  • tab.activeBorder#c87d3a
  • tab.activeForeground#e8d5b0
  • tab.border#201008
  • tab.hoverBackground#1c1008
  • tab.inactiveBackground#100804
  • tab.inactiveForeground#5a3018
  • terminal.ansiBlack#201008
  • terminal.ansiBlue#486080
  • terminal.ansiBrightBlack#3c2010
  • terminal.ansiBrightBlue#6880a0
  • terminal.ansiBrightCyan#608878
  • terminal.ansiBrightGreen#7a9838
  • terminal.ansiBrightMagenta#986858
  • terminal.ansiBrightRed#b04828
  • terminal.ansiBrightWhite#f0e0c0
  • terminal.ansiBrightYellow#c89030
  • terminal.ansiCyan#406858
  • terminal.ansiGreen#5a7828
  • terminal.ansiMagenta#784840
  • terminal.ansiRed#8a3018
  • terminal.ansiWhite#c8a870
  • terminal.ansiYellow#a07020
  • terminal.background#100804
  • terminal.foreground#e8d5b0
  • terminalCursor.foreground#c87d3a
  • textLink.activeForeground#e09850
  • textLink.foreground#c87d3a
  • titleBar.activeBackground#0c0604
  • titleBar.activeForeground#c87d3a
  • titleBar.border#201008
  • titleBar.inactiveBackground#100804
  • titleBar.inactiveForeground#3c1e0c
  • widget.shadow#060302cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a4028italic
string, string.quoted#d4a870
constant.character.escape, string.regexp#e8c890
constant.numeric#c8a050
constant.language#c87d3abold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#a05828bold
keyword.operator#7a4820
entity.name.function, meta.function-call entity.name.function, support.function#c87d3a
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#b07848bold
variable, variable.other#e8d5b0
variable.language#c87d3aitalic
variable.parameter#d8c098
variable.other.property, support.variable.property, meta.object-literal.key#b09060
entity.name.tag, meta.tag#a05828
entity.other.attribute-name#906040
entity.other.attribute-name.class, entity.other.attribute-name.id#d4a870
support.type.property-name#c87d3a
support.constant.property-value#d4a870
keyword.control.import, keyword.control.from#a05828bold
punctuation.separator, punctuation.terminator, punctuation.accessor#5a3018
punctuation.definition.parameters, punctuation.definition.block, meta.brace#7a4820
markup.heading, entity.name.section#c87d3abold
markup.bold#d4a870bold
markup.italic#b09060italic
markup.inline.raw, markup.fenced_code#c87d3a
markup.underline.link#c87d3a
invalid#b04020underline
invalid.deprecated#5a2c10strikethrough