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—