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#2C7B7E
  • activityBar.background#F3E2C7
  • activityBar.foreground#D2691E
  • activityBarBadge.background#D2691E
  • activityBarBadge.foreground#FFF8E6
  • badge.background#2C7B7E
  • badge.foreground#FFF8E6
  • button.background#D2691E
  • button.foreground#FFF8E6
  • button.hoverBackground#D2691E88
  • dropdown.background#FFFFFF
  • dropdown.border#E5D5B5
  • dropdown.foreground#5A4635
  • editor.background#FFF8E6
  • editor.findMatchBackground#2C7B7E44
  • editor.findMatchHighlightBackground#2C7B7E22
  • editor.foreground#5A4635
  • editor.lineHighlightBackground#FFF2D880
  • editor.lineHighlightBorder#E5D5B5
  • editor.selectionBackground#D2691E44
  • editor.selectionHighlightBackground#D2691E33
  • editorBracketMatch.background#2C7B7E33
  • editorBracketMatch.border#2C7B7E
  • editorCursor.foreground#D2691E
  • editorGroupHeader.tabsBackground#FFF8E6
  • editorIndentGuide.activeBackground#A89F9188
  • editorIndentGuide.background#A89F9144
  • editorLineNumber.activeForeground#2C7B7E
  • editorLineNumber.foreground#A89F91
  • editorWhitespace.foreground#A89F91
  • focusBorder#2C7B7E
  • gitDecoration.conflictingResourceForeground#E5D5B5
  • gitDecoration.deletedResourceForeground#C0432B
  • gitDecoration.modifiedResourceForeground#2C7B7E
  • gitDecoration.untrackedResourceForeground#6FAF9A
  • input.background#FFFFFF
  • input.border#E5D5B5
  • input.foreground#5A4635
  • input.placeholderForeground#A89F91
  • inputOption.activeBorder#2C7B7E
  • list.activeSelectionBackground#D2691E
  • list.activeSelectionForeground#FFF8E6
  • list.focusBackground#D2691E
  • list.highlightForeground#2C7B7E
  • list.hoverBackground#D2691E44
  • minimap.background#FFF8E6
  • minimapSlider.activeBackground#A89F91AA
  • minimapSlider.background#A89F9144
  • minimapSlider.hoverBackground#A89F9188
  • panel.background#FFF8E6
  • panel.border#E5D5B5
  • panelTitle.activeBorder#2C7B7E
  • panelTitle.activeForeground#5A4635
  • panelTitle.inactiveForeground#A89F91
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#A89F91AA
  • scrollbarSlider.background#A89F9144
  • scrollbarSlider.hoverBackground#A89F9188
  • sideBar.background#FAF2DE
  • sideBar.foreground#5A4635
  • sideBarSectionHeader.background#F3E2C7
  • sideBarSectionHeader.foreground#5A4635
  • sideBarTitle.foreground#5A4635
  • statusBar.background#D2691E
  • statusBar.debuggingBackground#2C7B7E
  • statusBar.foreground#FFF8E6
  • statusBar.noFolderBackground#F3E2C7
  • statusBarItem.hoverBackground#D2691E88
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#2C7B7E
  • tab.activeForeground#5A4635
  • tab.border#E5D5B5
  • tab.inactiveBackground#FAF2DE
  • tab.inactiveForeground#A89F91
  • terminal.ansiBlue#2C7B7E
  • terminal.ansiBrightBlue#3AA9A2
  • terminal.ansiBrightCyan#8ECFA5
  • terminal.ansiBrightGreen#8ECFA5
  • terminal.ansiBrightMagenta#E09C3B
  • terminal.ansiBrightRed#D56357
  • terminal.ansiBrightYellow#F2D38F
  • terminal.ansiCyan#6FAF9A
  • terminal.ansiGreen#6FAF9A
  • terminal.ansiMagenta#D2691E
  • terminal.ansiRed#C0432B
  • terminal.ansiYellow#E8C07A
  • terminal.background#FFF8E6
  • terminal.foreground#5A4635
  • titleBar.activeBackground#F3E2C7
  • titleBar.activeForeground#5A4635
  • titleBar.inactiveBackground#FFF8E6
  • titleBar.inactiveForeground#A89F91

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A89F91italic
string, string.quoted, string.template#7FAE5C
keyword, storage.type, storage.modifier#D97706bold
keyword.operator, punctuation.accessor#2A9D8F
variable, variable.other#3B3028
variable.parameter#2A9D8Fitalic
entity.name.function, support.function#D97706
meta.function-call#2A9D8F
entity.name.class, entity.name.type.class, support.class#D97706bold
entity.name.type, support.type#2A9D8F
entity.name.type.interface#2A9D8Fitalic
constant.numeric#D97706
constant, constant.language, constant.character#2A9D8F
constant.language.boolean#D97706bold
variable.other.property, support.variable.property#7FAE5C
meta.object-literal.key#2A9D8F
entity.name.tag, punctuation.definition.tag#D97706
entity.other.attribute-name#2A9D8Fitalic
punctuation, meta.brace#3B3028
string.regexp#2A9D8F
constant.character.escape#D97706
meta.decorator, punctuation.decorator#2A9D8F
invalid, invalid.illegal#C74E39strikethrough
markup.heading, entity.name.section#D97706bold
markup.bold#D97706bold
markup.italic#2A9D8Fitalic
markup.underline.link#2A9D8F
markup.inline.raw, markup.fenced_code#7FAE5C
support.type.property-name.json#2A9D8F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2A9D8F
support.type.property-name.css#7FAE5C
support.constant.property-value.css#D97706