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#E8C4B8
  • activityBar.border#DAC8A8
  • activityBar.foreground#3B2F2C
  • activityBar.inactiveForeground#8A6F63
  • activityBarBadge.background#B0654E
  • activityBarBadge.foreground#F5EFE2
  • badge.background#B0654E
  • badge.foreground#F5EFE2
  • button.background#B0654E
  • button.foreground#F5EFE2
  • button.hoverBackground#A15843
  • button.secondaryBackground#DAC8A8
  • button.secondaryForeground#3B2F2C
  • contrastBorder#DAC8A8
  • dropdown.background#F5EFE2
  • dropdown.border#DAC8A8
  • editor.background#F5EFE2
  • editor.findMatchBackground#E8998DA0
  • editor.findMatchHighlightBackground#E8998D50
  • editor.foreground#3B2F2C
  • editor.inactiveSelectionBackground#F0C98750
  • editor.lineHighlightBackground#EBE1CE
  • editor.selectionBackground#F0C987A0
  • editor.selectionHighlightBackground#F0C98760
  • editor.wordHighlightBackground#7C988540
  • editorBracketMatch.background#F0C98760
  • editorBracketMatch.border#B0654E
  • editorCursor.foreground#B0654E
  • editorGroup.border#DAC8A8
  • editorGroupHeader.tabsBackground#EFE3D0
  • editorGutter.addedBackground#7C9885
  • editorGutter.deletedBackground#C1666B
  • editorGutter.modifiedBackground#6B8CAE
  • editorHoverWidget.background#EFE3D0
  • editorHoverWidget.border#DAC8A8
  • editorIndentGuide.activeBackground1#B0654E80
  • editorIndentGuide.background1#DED1B8
  • editorLineNumber.activeForeground#B0654E
  • editorLineNumber.foreground#C9B8A0
  • editorRuler.foreground#DED1B8
  • editorSuggestWidget.background#EFE3D0
  • editorSuggestWidget.border#DAC8A8
  • editorSuggestWidget.selectedBackground#F0C98760
  • editorWhitespace.foreground#DED1B8
  • editorWidget.background#EFE3D0
  • editorWidget.border#DAC8A8
  • extensionButton.prominentBackground#B0654E
  • extensionButton.prominentHoverBackground#A15843
  • focusBorder#B0654E80
  • foreground#3B2F2C
  • input.background#F5EFE2
  • input.border#DAC8A8
  • input.foreground#3B2F2C
  • input.placeholderForeground#B0A28C
  • list.activeSelectionBackground#E8C4B8
  • list.activeSelectionForeground#3B2F2C
  • list.highlightForeground#B0654E
  • list.hoverBackground#EBE1CE
  • list.inactiveSelectionBackground#E8D9C0
  • notificationCenterHeader.background#EFE3D0
  • notifications.background#EFE3D0
  • notifications.border#DAC8A8
  • notifications.foreground#3B2F2C
  • panel.background#EFE3D0
  • panel.border#DAC8A8
  • panelTitle.activeForeground#3B2F2C
  • panelTitle.inactiveForeground#8A6F63
  • peekView.border#B0654E
  • peekViewEditor.background#F5EFE2
  • peekViewResult.background#EFE3D0
  • progressBar.background#B0654E
  • scrollbarSlider.activeBackground#B0654E80
  • scrollbarSlider.background#DAC8A870
  • scrollbarSlider.hoverBackground#DAC8A8A0
  • sideBar.background#EFE3D0
  • sideBar.border#DAC8A8
  • sideBar.foreground#5A4A42
  • sideBarSectionHeader.background#E8D9C0
  • sideBarSectionHeader.foreground#3B2F2C
  • sideBarTitle.foreground#3B2F2C
  • statusBar.background#C97B63
  • statusBar.debuggingBackground#A15843
  • statusBar.foreground#F5EFE2
  • statusBar.noFolderBackground#C97B63
  • statusBarItem.hoverBackground#B0654E
  • tab.activeBackground#F5EFE2
  • tab.activeBorderTop#B0654E
  • tab.activeForeground#3B2F2C
  • tab.border#DAC8A8
  • tab.inactiveBackground#E8D9C0
  • tab.inactiveForeground#8A6F63
  • terminal.ansiBlack#3B2F2C
  • terminal.ansiBlue#6B8CAE
  • terminal.ansiBrightBlack#8A6F63
  • terminal.ansiBrightBlue#8FADCC
  • terminal.ansiBrightCyan#7CA8A1
  • terminal.ansiBrightGreen#9BB5A0
  • terminal.ansiBrightMagenta#C97B63
  • terminal.ansiBrightRed#E8998D
  • terminal.ansiBrightWhite#3B2F2C
  • terminal.ansiBrightYellow#E3C97C
  • terminal.ansiCyan#5B8C85
  • terminal.ansiGreen#7C9885
  • terminal.ansiMagenta#A15843
  • terminal.ansiRed#C1666B
  • terminal.ansiWhite#5A4A42
  • terminal.ansiYellow#D9A441
  • terminal.background#F5EFE2
  • terminal.foreground#3B2F2C
  • titleBar.activeBackground#E8C4B8
  • titleBar.activeForeground#3B2F2C
  • titleBar.inactiveBackground#EFE3D0
  • titleBar.inactiveForeground#8A6F63

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#3B2F2C
comment, punctuation.definition.comment#A99985italic
keyword, keyword.control, storage.type, storage.modifier#7C9885bold
string, string.quoted#C97B63
constant.numeric, constant.language, constant.character#6B8CAE
entity.name.function, support.function, meta.function-call#B0654E
variable, variable.parameter#3B2F2C
entity.name.type, entity.name.class, support.class, support.type#A15843bold
entity.name.tag#7C9885
entity.other.attribute-name#D9A441
keyword.operator, punctuation#8A6F63
variable.other.property, meta.object-literal.key#5B8C85
markup.heading#B0654Ebold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#F5EFE2