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#FF6F61
  • activityBar.background#E8E8E8
  • activityBar.foreground#6C8EBF
  • activityBarBadge.background#FF6F61
  • activityBarBadge.foreground#212121
  • badge.background#FF6F61
  • badge.foreground#FAFAFA
  • button.background#D0E0FF
  • button.foreground#212121
  • button.hoverBackground#B0C0FF
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FF6F6144
  • editor.findMatchHighlightBackground#FF6F6122
  • editor.foreground#212121
  • editor.lineHighlightBackground#B3D4FF33
  • editor.lineHighlightBorder#B3D4FF80
  • editor.selectionBackground#6C8EBF33
  • editor.selectionHighlightBackground#6C8EBF55
  • editorBracketMatch.background#FF6F6133
  • editorBracketMatch.border#FF6F61
  • editorCursor.foreground#FF6F61
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#6C8EBF
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FF6F61
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#6C8EBF
  • gitDecoration.untrackedResourceForeground#3A8F4F
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#212121
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF6F61
  • list.activeSelectionBackground#D0E0FF
  • list.activeSelectionForeground#212121
  • list.focusBackground#D0E0FF
  • list.highlightForeground#FF6F61
  • list.hoverBackground#E0E0E0
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#CCCCCC66
  • minimapSlider.background#CCCCCC22
  • minimapSlider.hoverBackground#CCCCCC44
  • panel.background#FAFAFA
  • panel.border#CCCCCC
  • panelTitle.activeBorder#FF6F61
  • panelTitle.activeForeground#6C8EBF
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#CCCCCCCC
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.foreground#6C8EBF
  • sideBarTitle.foreground#6C8EBF
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#FF6F61
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#CFCFCF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6F61
  • tab.activeForeground#212121
  • tab.border#CCCCCC
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#6C8EBF
  • terminal.ansiBrightBlue#A2C6FF
  • terminal.ansiBrightCyan#8AE6E6
  • terminal.ansiBrightGreen#71D991
  • terminal.ansiBrightMagenta#E495FF
  • terminal.ansiBrightRed#FF8F78
  • terminal.ansiBrightYellow#FFE78A
  • terminal.ansiCyan#5FD7D7
  • terminal.ansiGreen#3A8F4F
  • terminal.ansiMagenta#D466E5
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#E6C34C
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#E8E8E8
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#DADADA
  • titleBar.inactiveForeground#555555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#3A8F4F
keyword, storage.type, storage.modifier#FF6F61bold
keyword.operator, punctuation.accessor#6C8EBF
variable, variable.other#212121
variable.parameter#7A7A7Aitalic
entity.name.function, support.function#6C8EBF
meta.function-call#FF6F61
entity.name.class, entity.name.type.class, support.class#6C8EBFbold
entity.name.type, support.type#6C8EBF
entity.name.type.interface#3A8F4Fitalic
constant.numeric#FFB96A
constant, constant.language, constant.character#6C8EBF
constant.language.boolean#FF6F61bold
variable.other.property, support.variable.property#3A8F4F
meta.object-literal.key#6C8EBF
entity.name.tag, punctuation.definition.tag#FF6F61
entity.other.attribute-name#7CA87Citalic
punctuation, meta.brace#212121
string.regexp#FFB96A
constant.character.escape#D466E5
meta.decorator, punctuation.decorator#6C8EBF
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#6C8EBFbold
markup.bold#FF6F61bold
markup.italic#3A8F4Fitalic
markup.underline.link#6C8EBF
markup.inline.raw, markup.fenced_code#3A8F4F
support.type.property-name.json#6C8EBF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6C8EBF
support.type.property-name.css#3A8F4F
support.constant.property-value.css#FF6F61