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#FFFEFC
  • activityBar.foreground#3066BE
  • activityBarBadge.background#FF6F61
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5AC8FA
  • badge.foreground#FFFFFF
  • button.background#FF6F61
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8A70
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#2E2E2E
  • editor.background#FDF8F5
  • editor.findMatchBackground#FF6F6140
  • editor.findMatchHighlightBackground#FF6F6140
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#FFEBE6
  • editor.lineHighlightBorder#FF6F61
  • editor.selectionBackground#FFB84D40
  • editor.selectionHighlightBackground#FFB84D20
  • editorBracketMatch.background#FFB84D30
  • editorBracketMatch.border#FF6F61
  • editorCursor.foreground#3066BE
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorIndentGuide.activeBackground#3066BE
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#3066BE
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FF6F61
  • gitDecoration.conflictingResourceForeground#FF8A70
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#FFB84D
  • gitDecoration.untrackedResourceForeground#5AC8FA
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#2E2E2E
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#FF6F61
  • list.activeSelectionBackground#FFB84D40
  • list.activeSelectionForeground#2E2E2E
  • list.focusBackground#FFEBE6
  • list.highlightForeground#FF6F61
  • list.hoverBackground#FFEBE6
  • minimap.background#FDF8F5
  • minimapSlider.activeBackground#CCCCCC
  • minimapSlider.background#CCCCCC80
  • minimapSlider.hoverBackground#CCCCCCB0
  • panel.background#FFFEFC
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF6F61
  • panelTitle.activeForeground#3066BE
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#CCCCCC
  • scrollbarSlider.background#CCCCCC80
  • scrollbarSlider.hoverBackground#CCCCCCB0
  • sideBar.background#FFFEFC
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#FFFEFC
  • sideBarSectionHeader.foreground#3066BE
  • sideBarTitle.foreground#3066BE
  • statusBar.background#FF6F61
  • statusBar.debuggingBackground#FFB84D
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#5AC8FA
  • statusBarItem.hoverBackground#FFB84D80
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6F61
  • tab.activeForeground#3066BE
  • tab.border#E0E0E0
  • tab.inactiveBackground#F7F3F0
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#3066BE
  • terminal.ansiBrightBlue#5C8FFB
  • terminal.ansiBrightCyan#81D4FA
  • terminal.ansiBrightGreen#C5E1A5
  • terminal.ansiBrightMagenta#F48FB1
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFE082
  • terminal.ansiCyan#5AC8FA
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#D81B60
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFB84D
  • terminal.background#FDF8F5
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#FFFEFC
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#F7F3F0
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#5AC8FA
keyword, storage.type, storage.modifier#FF6F61bold
keyword.operator, punctuation.accessor#3066BE
variable, variable.other#2E2E2E
variable.parameter#7A7A7Aitalic
entity.name.function, support.function#FFB84D
meta.function-call#FF8A70
entity.name.class, entity.name.type.class, support.class#3066BEbold
entity.name.type, support.type#D81B60
entity.name.type.interface#5AC8FAitalic
constant.numeric#8BC34A
constant, constant.language, constant.character#FF8A70
constant.language.boolean#FF6F61bold
variable.other.property, support.variable.property#3066BE
meta.object-literal.key#FF6F61
entity.name.tag, punctuation.definition.tag#FF6F61
entity.other.attribute-name#5AC8FAitalic
punctuation, meta.brace#2E2E2E
string.regexp#FFB84D
constant.character.escape#FF6F61
meta.decorator, punctuation.decorator#D81B60
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#3066BEbold
markup.bold#FF6F61bold
markup.italic#5AC8FAitalic
markup.underline.link#3066BE
markup.inline.raw, markup.fenced_code#FFB84D
support.type.property-name.json#FF6F61
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3066BE
support.type.property-name.css#5AC8FA
support.constant.property-value.css#FFB84D