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#4CAF50
  • activityBar.background#EAE2D5
  • activityBar.foreground#D4AF37
  • activityBarBadge.background#4CAF50
  • activityBarBadge.foreground#FAF4E6
  • badge.background#4CAF50
  • badge.foreground#FAF4E6
  • button.background#D9D0C4
  • button.foreground#2E2A24
  • button.hoverBackground#C7BBB0
  • dropdown.background#EAE2D5
  • dropdown.border#C0B5A8
  • dropdown.foreground#2E2A24
  • editor.background#FAF4E6
  • editor.findMatchBackground#D4AF3744
  • editor.findMatchHighlightBackground#D4AF3722
  • editor.foreground#2E2A24
  • editor.lineHighlightBackground#E5DDCF80
  • editor.lineHighlightBorder#4CAF5040
  • editor.selectionBackground#4CAF5033
  • editor.selectionHighlightBackground#4CAF5022
  • editorBracketMatch.background#4CAF5033
  • editorBracketMatch.border#4CAF50
  • editorCursor.foreground#4CAF50
  • editorGroupHeader.tabsBackground#FAF4E6
  • editorIndentGuide.activeBackground#8C7A6B
  • editorIndentGuide.background#C0B5A8
  • editorLineNumber.activeForeground#4CAF50
  • editorLineNumber.foreground#8C7A6B
  • editorWhitespace.foreground#C0B5A8
  • focusBorder#4CAF50
  • gitDecoration.conflictingResourceForeground#FFD54F
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#81C784
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#EAE2D5
  • input.border#C0B5A8
  • input.foreground#2E2A24
  • input.placeholderForeground#8C7A6B
  • inputOption.activeBorder#4CAF50
  • list.activeSelectionBackground#D9D0C4
  • list.activeSelectionForeground#2E2A24
  • list.focusBackground#D9D0C4
  • list.highlightForeground#4CAF50
  • list.hoverBackground#D9D0C466
  • minimap.background#FAF4E6
  • minimapSlider.activeBackground#4CAF5066
  • minimapSlider.background#4CAF5022
  • minimapSlider.hoverBackground#4CAF5044
  • panel.background#FAF4E6
  • panel.border#EAE2D5
  • panelTitle.activeBorder#4CAF50
  • panelTitle.activeForeground#2E2A24
  • panelTitle.inactiveForeground#8C7A6B
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#4CAF5088
  • scrollbarSlider.background#C0B5A844
  • scrollbarSlider.hoverBackground#C0B5A888
  • sideBar.background#F2EDE4
  • sideBar.foreground#2E2A24
  • sideBarSectionHeader.background#F2EDE4
  • sideBarSectionHeader.foreground#4CAF50
  • sideBarTitle.foreground#D4AF37
  • statusBar.background#F2EDE4
  • statusBar.debuggingBackground#4CAF50
  • statusBar.foreground#2E2A24
  • statusBar.noFolderBackground#EAE2D5
  • statusBarItem.hoverBackground#D9D0C4
  • tab.activeBackground#FAF4E6
  • tab.activeBorder#4CAF50
  • tab.activeForeground#2E2A24
  • tab.border#D9D0C4
  • tab.inactiveBackground#EAE2D5
  • tab.inactiveForeground#8C7A6B
  • terminal.ansiBlue#4CAF50
  • terminal.ansiBrightBlue#66BB6A
  • terminal.ansiBrightCyan#A5D6A7
  • terminal.ansiBrightGreen#A5D6A7
  • terminal.ansiBrightMagenta#FFEA00
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFF59D
  • terminal.ansiCyan#81C784
  • terminal.ansiGreen#81C784
  • terminal.ansiMagenta#D4AF37
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFD54F
  • terminal.background#FAF4E6
  • terminal.foreground#2E2A24
  • titleBar.activeBackground#EAE2D5
  • titleBar.activeForeground#2E2A24
  • titleBar.inactiveBackground#FAF4E6
  • titleBar.inactiveForeground#8C7A6B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A89F94italic
string, string.quoted, string.template#3A7D44
keyword, storage.type, storage.modifier#4CAF50bold
keyword.operator, punctuation.accessor#D4AF37
variable, variable.other#2E2A24
variable.parameter#D4AF37italic
entity.name.function, support.function#6D9E3E
meta.function-call#4CAF50
entity.name.class, entity.name.type.class, support.class#D4AF37bold
entity.name.type, support.type#6D9E3E
entity.name.type.interface#D4AF37italic
constant.numeric#D4AF37
constant, constant.language, constant.character#D4AF37
constant.language.boolean#4CAF50bold
variable.other.property, support.variable.property#4CAF50
meta.object-literal.key#4CAF50
entity.name.tag, punctuation.definition.tag#4CAF50
entity.other.attribute-name#D4AF37italic
punctuation, meta.brace#8C7A6B
string.regexp#4CAF50
constant.character.escape#D4AF37
meta.decorator, punctuation.decorator#FFD54F
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#4CAF50bold
markup.bold#D4AF37bold
markup.italic#4CAF50italic
markup.underline.link#4CAF50
markup.inline.raw, markup.fenced_code#3A7D44
support.type.property-name.json#4CAF50
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D4AF37
support.type.property-name.css#4CAF50
support.constant.property-value.css#D4AF37