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#5C9E7F
  • activityBar.background#F8F8F5
  • activityBar.foreground#333333
  • activityBarBadge.background#5C9E7F
  • activityBarBadge.foreground#FCFCF8
  • badge.background#5C9E7F
  • badge.foreground#FCFCF8
  • button.background#5C9E7F
  • button.foreground#FCFCF8
  • button.hoverBackground#5C9E7F66
  • dropdown.background#F9F9F6
  • dropdown.border#E0E0E0
  • dropdown.foreground#333333
  • editor.background#FCFCF8
  • editor.findMatchBackground#3B7D5C22
  • editor.findMatchHighlightBackground#3B7D5C11
  • editor.foreground#333333
  • editor.lineHighlightBackground#5C9E7F33
  • editor.lineHighlightBorder#5C9E7F66
  • editor.selectionBackground#5C9E7F33
  • editor.selectionHighlightBackground#5C9E7F22
  • editorBracketMatch.background#5C9E7F22
  • editorBracketMatch.border#3B7D5C
  • editorCursor.foreground#3B7D5C
  • editorGroupHeader.tabsBackground#FCFCF8
  • editorIndentGuide.activeBackground#5C9E7F
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#3B7D5C
  • editorLineNumber.foreground#8C9A8F
  • editorWhitespace.foreground#8C9A8F
  • focusBorder#5C9E7F
  • gitDecoration.conflictingResourceForeground#D9972B
  • gitDecoration.deletedResourceForeground#C74646
  • gitDecoration.modifiedResourceForeground#5C9E7F
  • gitDecoration.untrackedResourceForeground#8C9A8F
  • input.background#F9F9F6
  • input.border#E0E0E0
  • input.foreground#333333
  • input.placeholderForeground#8C9A8F
  • inputOption.activeBorder#5C9E7F
  • list.activeSelectionBackground#5C9E7F
  • list.activeSelectionForeground#FCFCF8
  • list.focusBackground#5C9E7F55
  • list.highlightForeground#3B7D5C
  • list.hoverBackground#5C9E7F33
  • minimap.background#FCFCF8
  • minimapSlider.activeBackground#5C9E7F66
  • minimapSlider.background#5C9E7F22
  • minimapSlider.hoverBackground#5C9E7F44
  • panel.background#FCFCF8
  • panel.border#E0E0E0
  • panelTitle.activeBorder#5C9E7F
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#8C9A8F
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#5C9E7F88
  • scrollbarSlider.background#E0E0E0
  • scrollbarSlider.hoverBackground#5C9E7F55
  • sideBar.background#F9F9F6
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#F2F2EF
  • sideBarSectionHeader.foreground#333333
  • sideBarTitle.foreground#333333
  • statusBar.background#5C9E7F
  • statusBar.debuggingBackground#3B7D5C
  • statusBar.foreground#FCFCF8
  • statusBar.noFolderBackground#5C9E7F
  • statusBarItem.hoverBackground#5C9E7F99
  • tab.activeBackground#FCFCF8
  • tab.activeBorder#5C9E7F
  • tab.activeForeground#333333
  • tab.border#E0E0E0
  • tab.inactiveBackground#F2F2EF
  • tab.inactiveForeground#8C9A8F
  • terminal.ansiBlue#3B7D5C
  • terminal.ansiBrightBlue#2E684E
  • terminal.ansiBrightCyan#8ABF9F
  • terminal.ansiBrightGreen#4A9A68
  • terminal.ansiBrightMagenta#7A8B86
  • terminal.ansiBrightRed#E75454
  • terminal.ansiBrightYellow#F4B860
  • terminal.ansiCyan#5C9E7F
  • terminal.ansiGreen#6FAE89
  • terminal.ansiMagenta#8C9A8F
  • terminal.ansiRed#C74646
  • terminal.ansiYellow#D9972B
  • terminal.background#FCFCF8
  • terminal.foreground#333333
  • titleBar.activeBackground#F8F8F5
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#FCFCF8
  • titleBar.inactiveForeground#8C9A8F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8C9A8Fitalic
string, string.quoted, string.template#3B7D5C
keyword, storage.type, storage.modifier#5C9E7Fbold
keyword.operator, punctuation.accessor#333333
variable, variable.other#333333
variable.parameter#4A9A68italic
entity.name.function, support.function#5C9E7F
meta.function-call#333333
entity.name.class, entity.name.type.class, support.class#5C9E7Fbold
entity.name.type, support.type#333333
entity.name.type.interface#8C9A8Fitalic
constant.numeric#4A9A68
constant, constant.language, constant.character#5C9E7F
constant.language.boolean#5C9E7Fbold
variable.other.property, support.variable.property#333333
meta.object-literal.key#5C9E7F
entity.name.tag, punctuation.definition.tag#5C9E7F
entity.other.attribute-name#4A9A68italic
punctuation, meta.brace#333333
string.regexp#3B7D5C
constant.character.escape#4A9A68
meta.decorator, punctuation.decorator#8C9A8F
invalid, invalid.illegal#C74646strikethrough
markup.heading, entity.name.section#5C9E7Fbold
markup.bold#5C9E7Fbold
markup.italic#8C9A8Fitalic
markup.underline.link#5C9E7F
markup.inline.raw, markup.fenced_code#3B7D5C
support.type.property-name.json#5C9E7F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8C9A8F
support.type.property-name.css#5C9E7F
support.constant.property-value.css#8C9A8F