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#B22222
  • activityBar.background#E5DED0
  • activityBar.foreground#5D4B3F
  • activityBarBadge.background#B22222
  • activityBarBadge.foreground#FAF5E4
  • badge.background#B22222
  • badge.foreground#FFFFFF
  • button.background#B22222
  • button.foreground#FFFFFF
  • button.hoverBackground#C53131
  • dropdown.background#F2EBDE
  • dropdown.border#C5B9A8
  • dropdown.foreground#5D4B3F
  • editor.background#FAF5E4
  • editor.findMatchBackground#B2222244
  • editor.findMatchHighlightBackground#B2222222
  • editor.foreground#5D4B3F
  • editor.lineHighlightBackground#FFF9E6
  • editor.lineHighlightBorder#E0D5C3
  • editor.selectionBackground#B2222250
  • editor.selectionHighlightBackground#B2222233
  • editorBracketMatch.background#B2222233
  • editorBracketMatch.border#B22222
  • editorCursor.foreground#B22222
  • editorGroupHeader.tabsBackground#FAF5E4
  • editorIndentGuide.activeBackground#C5B9A888
  • editorIndentGuide.background#C5B9A844
  • editorLineNumber.activeForeground#B22222
  • editorLineNumber.foreground#A89B8F
  • editorWhitespace.foreground#C5B9A8
  • focusBorder#B22222
  • gitDecoration.conflictingResourceForeground#AA6C39
  • gitDecoration.deletedResourceForeground#B22222
  • gitDecoration.modifiedResourceForeground#527A5C
  • gitDecoration.untrackedResourceForeground#3A8E7F
  • input.background#F2EBDE
  • input.border#C5B9A8
  • input.foreground#5D4B3F
  • input.placeholderForeground#A89B8F
  • inputOption.activeBorder#B22222
  • list.activeSelectionBackground#D4C5A9
  • list.activeSelectionForeground#5D4B3F
  • list.focusBackground#D4C5A9
  • list.highlightForeground#B22222
  • list.hoverBackground#D4C5A960
  • minimap.background#FAF5E4
  • minimapSlider.activeBackground#C5B9A866
  • minimapSlider.background#C5B9A822
  • minimapSlider.hoverBackground#C5B9A844
  • panel.background#FAF5E4
  • panel.border#D4C5A9
  • panelTitle.activeBorder#B22222
  • panelTitle.activeForeground#5D4B3F
  • panelTitle.inactiveForeground#A89B8F
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#B2228888
  • scrollbarSlider.background#C5B9A844
  • scrollbarSlider.hoverBackground#C5B9A888
  • sideBar.background#F2EBDE
  • sideBar.foreground#5D4B3F
  • sideBarSectionHeader.background#F2EBDE
  • sideBarSectionHeader.foreground#B22222
  • sideBarTitle.foreground#5D4B3F
  • statusBar.background#E0D5C3
  • statusBar.debuggingBackground#B22222
  • statusBar.foreground#5D4B3F
  • statusBar.noFolderBackground#E0D5C3
  • statusBarItem.hoverBackground#D4C5A9
  • tab.activeBackground#E0D5C3
  • tab.activeBorder#B22222
  • tab.activeForeground#5D4B3F
  • tab.border#D4C5A9
  • tab.inactiveBackground#FAF5E4
  • tab.inactiveForeground#A89B8F
  • terminal.ansiBlue#4A708B
  • terminal.ansiBrightBlue#7FAFC9
  • terminal.ansiBrightCyan#6AB9A5
  • terminal.ansiBrightGreen#78C090
  • terminal.ansiBrightMagenta#B37FA1
  • terminal.ansiBrightRed#D04B4B
  • terminal.ansiBrightYellow#DFA85A
  • terminal.ansiCyan#3A8E7F
  • terminal.ansiGreen#527A5C
  • terminal.ansiMagenta#8B5C7E
  • terminal.ansiRed#B22222
  • terminal.ansiYellow#AA6C39
  • terminal.background#FAF5E4
  • terminal.foreground#5D4B3F
  • titleBar.activeBackground#E0D5C3
  • titleBar.activeForeground#5D4B3F
  • titleBar.inactiveBackground#E5DED0
  • titleBar.inactiveForeground#A89B8F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7A73italic
string, string.quoted, string.template#3A8E7F
keyword, storage.type, storage.modifier#B22222bold
keyword.operator, punctuation.accessor#A0522D
variable, variable.other#5D4B3F
variable.parameter#8A7A73italic
entity.name.function, support.function#527A5C
meta.function-call#6B8E23
entity.name.class, entity.name.type.class, support.class#A0522Dbold
entity.name.type, support.type#4A708B
entity.name.type.interface#4A708Bitalic
constant.numeric#AA6C39
constant, constant.language, constant.character#AA6C39
constant.language.boolean#B22222bold
variable.other.property, support.variable.property#527A5C
meta.object-literal.key#4A708B
entity.name.tag, punctuation.definition.tag#B22222
entity.other.attribute-name#8B5C7Eitalic
punctuation, meta.brace#5D4B3F
string.regexp#AA6C39
constant.character.escape#8B5C7E
meta.decorator, punctuation.decorator#C09040
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#B22222bold
markup.bold#B22222bold
markup.italic#527A5Citalic
markup.underline.link#4A708B
markup.inline.raw, markup.fenced_code#3A8E7F
support.type.property-name.json#4A708B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C09040
support.type.property-name.css#4A708B
support.constant.property-value.css#3A8E7F