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—