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#A23E48
  • activityBar.background#F5E9D3
  • activityBar.foreground#3B7A57
  • activityBarBadge.background#D4A85A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D4A85A
  • badge.foreground#FFFFFF
  • button.background#A23E48
  • button.foreground#FFFFFF
  • button.hoverBackground#C75D5D
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#FAFAF8
  • editor.findMatchBackground#D4A85A
  • editor.findMatchHighlightBackground#FFE5B4
  • editor.foreground#333333
  • editor.lineHighlightBackground#FFF9E6
  • editor.lineHighlightBorder#FFFFFF00
  • editor.selectionBackground#B3D4C9
  • editor.selectionHighlightBackground#B3D4C9
  • editorBracketMatch.background#FFF2CC
  • editorBracketMatch.border#D4A85A
  • editorCursor.foreground#3B7A57
  • editorGroupHeader.tabsBackground#FAFAF8
  • editorIndentGuide.activeBackground#6A8A7B
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#3B7A57
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#3B7A57
  • gitDecoration.conflictingResourceForeground#D4A85A
  • gitDecoration.deletedResourceForeground#C75D5D
  • gitDecoration.modifiedResourceForeground#6A8A7B
  • gitDecoration.untrackedResourceForeground#3B7A57
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#999999
  • inputOption.activeBorder#A23E48
  • list.activeSelectionBackground#B3D4C9
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#E8F5E9
  • list.highlightForeground#A23E48
  • list.hoverBackground#E8F5E9
  • minimap.background#FAFAF8
  • minimapSlider.activeBackground#AAAAAA
  • minimapSlider.background#CCCCCC
  • minimapSlider.hoverBackground#BBBBBB
  • panel.background#FAFAF8
  • panel.border#E0E0E0
  • panelTitle.activeBorder#A23E48
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000010
  • scrollbarSlider.activeBackground#AAAAAA
  • scrollbarSlider.background#CCCCCC
  • scrollbarSlider.hoverBackground#BBBBBB
  • sideBar.background#FAFAF8
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#F5E9D3
  • sideBarSectionHeader.foreground#333333
  • sideBarTitle.foreground#333333
  • statusBar.background#A23E48
  • statusBar.debuggingBackground#D4A85A
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#6A8A7B
  • statusBarItem.hoverBackground#C75D5D
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#A23E48
  • tab.activeForeground#333333
  • tab.border#E0E0E0
  • tab.inactiveBackground#FAFAF8
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#6A8A7B
  • terminal.ansiBrightBlue#8FB2A7
  • terminal.ansiBrightCyan#8FB2A7
  • terminal.ansiBrightGreen#A5D6A7
  • terminal.ansiBrightMagenta#C75D5D
  • terminal.ansiBrightRed#E07070
  • terminal.ansiBrightYellow#E8C27C
  • terminal.ansiCyan#6A8A7B
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#A23E48
  • terminal.ansiRed#C75D5D
  • terminal.ansiYellow#D4A85A
  • terminal.background#FAFAF8
  • terminal.foreground#333333
  • titleBar.activeBackground#F5E9D3
  • titleBar.activeForeground#3B7A57
  • titleBar.inactiveBackground#EDEDED
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#999999italic
string, string.quoted, string.template#6A8A7B
keyword, storage.type, storage.modifier#A23E48bold
keyword.operator, punctuation.accessor#3B7A57
variable, variable.other#333333
variable.parameter#3B7A57italic
entity.name.function, support.function#3B7A57
meta.function-call#3B7A57
entity.name.class, entity.name.type.class, support.class#A23E48bold
entity.name.type, support.type#6A8A7B
entity.name.type.interface#3B7A57italic
constant.numeric#D4A85A
constant, constant.language, constant.character#D4A85A
constant.language.boolean#A23E48bold
variable.other.property, support.variable.property#333333
meta.object-literal.key#6A8A7B
entity.name.tag, punctuation.definition.tag#A23E48
entity.other.attribute-name#3B7A57italic
punctuation, meta.brace#999999
string.regexp#6A8A7B
constant.character.escape#D4A85A
meta.decorator, punctuation.decorator#A23E48
invalid, invalid.illegal#C75D5Dstrikethrough
markup.heading, entity.name.section#A23E48bold
markup.bold#A23E48bold
markup.italic#3B7A57italic
markup.underline.link#6A8A7B
markup.inline.raw, markup.fenced_code#333333
support.type.property-name.json#6A8A7B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A23E48
support.type.property-name.css#6A8A7B
support.constant.property-value.css#D4A85A