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.activeBorder#D4A373
  • activityBar.background#F3E8E0
  • activityBar.foreground#5A463A
  • activityBarBadge.background#D4A373
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D4A373
  • badge.foreground#FFFFFF
  • button.background#D4A373
  • button.foreground#FFFFFF
  • button.hoverBackground#CFA574
  • dropdown.background#FFFFFF
  • dropdown.border#E2D8D0
  • dropdown.foreground#5A463A
  • editor.background#FAF5EF
  • editor.findMatchBackground#D4A373
  • editor.findMatchHighlightBackground#E7D8C7
  • editor.foreground#3B2E2A
  • editor.lineHighlightBackground#FFF4E1
  • editor.lineHighlightBorder#FFF4E1
  • editor.selectionBackground#E5D5BF
  • editor.selectionHighlightBackground#F2E9DD
  • editorBracketMatch.background#FFF4E1
  • editorBracketMatch.border#D4A373
  • editorCursor.foreground#5A463A
  • editorGroupHeader.tabsBackground#F9F2EC
  • editorIndentGuide.activeBackground#D4A373
  • editorIndentGuide.background#E2D8D0
  • editorLineNumber.activeForeground#5A463A
  • editorLineNumber.foreground#A89F97
  • editorWhitespace.foreground#C8BFB5
  • focusBorder#D4A373
  • gitDecoration.conflictingResourceForeground#C89FA5
  • gitDecoration.deletedResourceForeground#C96E5E
  • gitDecoration.modifiedResourceForeground#8AB7A9
  • gitDecoration.untrackedResourceForeground#A6C18F
  • input.background#FFFFFF
  • input.border#E2D8D0
  • input.foreground#5A463A
  • input.placeholderForeground#A89F97
  • inputOption.activeBorder#D4A373
  • list.activeSelectionBackground#D4A373
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#E7D8C7
  • list.highlightForeground#C96E5E
  • list.hoverBackground#E7D8C7
  • minimap.background#FAF5EF
  • minimapSlider.activeBackground#D4A37399
  • minimapSlider.background#E2D8D066
  • minimapSlider.hoverBackground#D4A37366
  • panel.background#F9F2EC
  • panel.border#E2D8D0
  • panelTitle.activeBorder#D4A373
  • panelTitle.activeForeground#5A463A
  • panelTitle.inactiveForeground#A89F97
  • scrollbar.shadow#C8BFB5
  • scrollbarSlider.activeBackground#D4A37399
  • scrollbarSlider.background#E2D8D066
  • scrollbarSlider.hoverBackground#D4A37366
  • sideBar.background#F9F2EC
  • sideBar.foreground#5A463A
  • sideBarSectionHeader.background#F3E8E0
  • sideBarSectionHeader.foreground#5A463A
  • sideBarTitle.foreground#5A463A
  • statusBar.background#D4A373
  • statusBar.debuggingBackground#C96E5E
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#A89F97
  • statusBarItem.hoverBackground#CFA574
  • tab.activeBackground#FAF5EF
  • tab.activeBorder#D4A373
  • tab.activeForeground#5A463A
  • tab.border#E2D8D0
  • tab.inactiveBackground#F9F2EC
  • tab.inactiveForeground#A89F97
  • terminal.ansiBlue#6A9FB5
  • terminal.ansiBrightBlue#8BBEDC
  • terminal.ansiBrightCyan#A5D1BE
  • terminal.ansiBrightGreen#B7D9A9
  • terminal.ansiBrightMagenta#D5A9AF
  • terminal.ansiBrightRed#E08A79
  • terminal.ansiBrightYellow#E5B78A
  • terminal.ansiCyan#8AB7A9
  • terminal.ansiGreen#A6C18F
  • terminal.ansiMagenta#C89FA5
  • terminal.ansiRed#C96E5E
  • terminal.ansiYellow#D4A373
  • terminal.background#FAF5EF
  • terminal.foreground#5A463A
  • titleBar.activeBackground#F3E8E0
  • titleBar.activeForeground#5A463A
  • titleBar.inactiveBackground#FAF5EF
  • titleBar.inactiveForeground#A89F97

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8AB7A9italic
string, string.quoted, string.template#C89FA5
keyword, storage.type, storage.modifier#C96E5Ebold
keyword.operator, punctuation.accessor#5A463A
variable, variable.other#5A463A
variable.parameter#6A9FB5italic
entity.name.function, support.function#D4A373
meta.function-call#D4A373
entity.name.class, entity.name.type.class, support.class#CFA574bold
entity.name.type, support.type#A6C18F
entity.name.type.interface#8AB7A9italic
constant.numeric#6A9FB5
constant, constant.language, constant.character#C89FA5
constant.language.boolean#C96E5Ebold
variable.other.property, support.variable.property#5A463A
meta.object-literal.key#6A9FB5
entity.name.tag, punctuation.definition.tag#C96E5E
entity.other.attribute-name#A6C18Fitalic
punctuation, meta.brace#5A463A
string.regexp#CFA574
constant.character.escape#C96E5E
meta.decorator, punctuation.decorator#8AB7A9
invalid, invalid.illegal#C96E5Estrikethrough
markup.heading, entity.name.section#D4A373bold
markup.bold#D4A373bold
markup.italic#C96E5Eitalic
markup.underline.link#6A9FB5
markup.inline.raw, markup.fenced_code#C89FA5
support.type.property-name.json#6A9FB5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#CFA574
support.type.property-name.css#A6C18F
support.constant.property-value.css#C96E5E