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#F0F0F0
  • activityBar.foreground#2B2B2B
  • activityBarBadge.background#FF6F61
  • activityBarBadge.foreground#FAFAFA
  • badge.background#FF6F61
  • badge.foreground#FFFFFF
  • button.background#FF6F61
  • button.foreground#FFFFFF
  • button.hoverBackground#FF6F61CC
  • dropdown.background#F7F7F7
  • dropdown.border#E0E0E0
  • dropdown.foreground#2B2B2B
  • editor.background#FAFAFA
  • editor.findMatchBackground#FF6F61A0
  • editor.findMatchHighlightBackground#FF6F6140
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#E5F7FF20
  • editor.lineHighlightBorder#E5F7FF
  • editor.selectionBackground#FF6F6120
  • editor.selectionHighlightBackground#FF6F6130
  • editorBracketMatch.background#FF6F6120
  • editorBracketMatch.border#FF6F61
  • editorCursor.foreground#FF6F61
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#FF6F61
  • editorLineNumber.foreground#8A8A8A
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#FF6F61
  • gitDecoration.conflictingResourceForeground#FFB400
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#0077CC
  • gitDecoration.untrackedResourceForeground#00A5A5
  • input.background#F7F7F7
  • input.border#E0E0E0
  • input.foreground#2B2B2B
  • input.placeholderForeground#9A9A9A
  • inputOption.activeBorder#FF6F61
  • list.activeSelectionBackground#FF6F6030
  • list.activeSelectionForeground#000000
  • list.focusBackground#FF6F6030
  • list.highlightForeground#FF6F61
  • list.hoverBackground#FF6F6030
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#0077CC66
  • minimapSlider.background#0077CC22
  • minimapSlider.hoverBackground#0077CC44
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF6F61
  • panelTitle.activeForeground#1F1F1F
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#CCCCCCCC
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#F5F5F5
  • sideBar.foreground#3A3A3A
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.foreground#0077CC
  • sideBarTitle.foreground#2B2B2B
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#FF6F61
  • statusBar.foreground#1F1F1F
  • statusBar.noFolderBackground#F5F5F5
  • statusBarItem.hoverBackground#DADADAAA
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6F61
  • tab.activeForeground#000000
  • tab.border#CCCCCC
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#6A6A6A
  • terminal.ansiBlue#0077CC
  • terminal.ansiBrightBlue#66B3FF
  • terminal.ansiBrightCyan#66EDE6
  • terminal.ansiBrightGreen#66FF99
  • terminal.ansiBrightMagenta#FF66C2
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFDA66
  • terminal.ansiCyan#00A5A5
  • terminal.ansiGreen#00B050
  • terminal.ansiMagenta#C20078
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFB400
  • terminal.background#FAFAFA
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#E8E8E8
  • titleBar.activeForeground#1F1F1F
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#00A5A5
keyword, storage.type, storage.modifier#FF6F61bold
keyword.operator, punctuation.accessor#0077CC
variable, variable.other#2B2B2B
variable.parameter#FF6F61italic
entity.name.function, support.function#00B050
meta.function-call#66FF99
entity.name.class, entity.name.type.class, support.class#FF6F61bold
entity.name.type, support.type#FFB400
entity.name.type.interface#0077CCitalic
constant.numeric#00B050
constant, constant.language, constant.character#0077CC
constant.language.boolean#FF6F61bold
variable.other.property, support.variable.property#00A5A5
meta.object-literal.key#00A5A5
entity.name.tag, punctuation.definition.tag#0077CC
entity.other.attribute-name#C20078italic
punctuation, meta.brace#2B2B2B
string.regexp#FF9500
constant.character.escape#C20078
meta.decorator, punctuation.decorator#FFB400
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#FF6F61bold
markup.bold#FF6F61bold
markup.italic#0077CCitalic
markup.underline.link#00A5A5
markup.inline.raw, markup.fenced_code#00B050
support.type.property-name.json#0077CC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C20078
support.type.property-name.css#FFB400
support.constant.property-value.css#00A5A5