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#E3F2FF
  • activityBar.foreground#2C3E50
  • activityBarBadge.background#FF6F61
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F61
  • badge.foreground#FFFFFF
  • button.background#FF6F61
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8555
  • dropdown.background#E8F5FF
  • dropdown.border#A0B4C3
  • dropdown.foreground#2C3E50
  • editor.background#F0F9FF
  • editor.findMatchBackground#C0D0FF88
  • editor.findMatchHighlightBackground#C0D0FF55
  • editor.foreground#2C3E50
  • editor.lineHighlightBackground#FFFFFF40
  • editor.lineHighlightBorder#FF6F61
  • editor.selectionBackground#FF6F6166
  • editor.selectionHighlightBackground#FF6F6144
  • editorBracketMatch.background#C0D0FF55
  • editorBracketMatch.border#C0D0FF
  • editorCursor.foreground#FF6F61
  • editorGroupHeader.tabsBackground#F5FAFF
  • editorIndentGuide.activeBackground#A0B4C3FF
  • editorIndentGuide.background#A0B4C366
  • editorLineNumber.activeForeground#FF6F61
  • editorLineNumber.foreground#A0B4C3
  • editorWhitespace.foreground#A0B4C3
  • focusBorder#FF6F61
  • gitDecoration.conflictingResourceForeground#FFB86B
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#FF6F61
  • gitDecoration.untrackedResourceForeground#7ED957
  • input.background#E8F5FF
  • input.border#A0B4C3
  • input.foreground#2C3E50
  • input.placeholderForeground#A0B4C3
  • inputOption.activeBorder#FF6F61
  • list.activeSelectionBackground#FF6F61
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF6F6144
  • list.highlightForeground#C0D0FF
  • list.hoverBackground#FF6F6166
  • minimap.background#F0F9FF
  • minimapSlider.activeBackground#FF6F6066
  • minimapSlider.background#FF6F6022
  • minimapSlider.hoverBackground#FF6F6044
  • panel.background#F0F9FF
  • panel.border#C0D0FF
  • panelTitle.activeBorder#FF6F61
  • panelTitle.activeForeground#2C3E50
  • panelTitle.inactiveForeground#7A8B9A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6F61
  • scrollbarSlider.background#A0B4C366
  • scrollbarSlider.hoverBackground#A0B4C388
  • sideBar.background#E8F5FF
  • sideBar.foreground#2C3E50
  • sideBarSectionHeader.background#E3F2FF
  • sideBarSectionHeader.foreground#FF6F61
  • sideBarTitle.foreground#FF6F61
  • statusBar.background#C7DAFF
  • statusBar.debuggingBackground#FF6F61
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#E3F2FF
  • statusBarItem.hoverBackground#FF6F6188
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6F61
  • tab.activeForeground#2C3E50
  • tab.border#C0D0FF
  • tab.inactiveBackground#F5FAFF
  • tab.inactiveForeground#7A8B9A
  • terminal.ansiBlue#5B6CFF
  • terminal.ansiBrightBlue#7699FF
  • terminal.ansiBrightCyan#5DD9C9
  • terminal.ansiBrightGreen#9AEF8C
  • terminal.ansiBrightMagenta#D6C0FF
  • terminal.ansiBrightRed#FF9A85
  • terminal.ansiBrightYellow#FFD587
  • terminal.ansiCyan#39C5BB
  • terminal.ansiGreen#7ED957
  • terminal.ansiMagenta#C0A3FF
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFB86B
  • terminal.background#F0F9FF
  • terminal.foreground#2C3E50
  • titleBar.activeBackground#E3F2FF
  • titleBar.activeForeground#2C3E50
  • titleBar.inactiveBackground#F5FAFF
  • titleBar.inactiveForeground#7A8B9A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0B4C3italic
string, string.quoted, string.template#39C5BB
keyword, storage.type, storage.modifier#FF6F61bold
keyword.operator, punctuation.accessor#5B6CFF
variable, variable.other#2C3E50
variable.parameter#FF6F61italic
entity.name.function, support.function#5B6CFF
meta.function-call#FF6F61
entity.name.class, entity.name.type.class, support.class#5B6CFFbold
entity.name.type, support.type#5B6CFF
entity.name.type.interface#FF6F61italic
constant.numeric#FFB86B
constant, constant.language, constant.character#FF6F61
constant.language.boolean#FF6F61bold
variable.other.property, support.variable.property#7ED957
meta.object-literal.key#FF6F61
entity.name.tag, punctuation.definition.tag#5B6CFF
entity.other.attribute-name#5B6CFFitalic
punctuation, meta.brace#2C3E50
string.regexp#FFB86B
constant.character.escape#FF6F61
meta.decorator, punctuation.decorator#5B6CFF
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#FF6F61bold
markup.bold#FF6F61bold
markup.italic#5B6CFFitalic
markup.underline.link#FF6F61
markup.inline.raw, markup.fenced_code#7ED957
support.type.property-name.json#FF6F61
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5B6CFF
support.type.property-name.css#7ED957
support.constant.property-value.css#FF6F61