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#ff6f91
  • activityBar.background#e6f7ff
  • activityBar.foreground#2c3e50
  • activityBarBadge.background#ff6f91
  • activityBarBadge.foreground#ffffff
  • badge.background#ff6f91
  • badge.foreground#ffffff
  • button.background#ff6f91
  • button.foreground#ffffff
  • button.hoverBackground#ff8fa3
  • dropdown.background#ffffff
  • dropdown.border#a0e7e5
  • dropdown.foreground#2c3e50
  • editor.background#f0faff
  • editor.findMatchBackground#ff6f9188
  • editor.findMatchHighlightBackground#ff6f8844
  • editor.foreground#2c3e50
  • editor.lineHighlightBackground#6dd5ed33
  • editor.lineHighlightBorder#6dd5ed66
  • editor.selectionBackground#6dd5ed80
  • editor.selectionHighlightBackground#6dd5ed40
  • editorBracketMatch.background#ff6f9933
  • editorBracketMatch.border#ff6f99
  • editorCursor.foreground#ff6f91
  • editorGroupHeader.tabsBackground#f5fbff
  • editorIndentGuide.activeBackground#a0e7e580
  • editorIndentGuide.background#a0e7e540
  • editorLineNumber.activeForeground#ff6f91
  • editorLineNumber.foreground#8a9ba8
  • editorWhitespace.foreground#a0e7e580
  • focusBorder#ff6f91
  • gitDecoration.conflictingResourceForeground#ffb74d
  • gitDecoration.deletedResourceForeground#ff5252
  • gitDecoration.modifiedResourceForeground#ff6f91
  • gitDecoration.untrackedResourceForeground#a0e7e5
  • input.background#ffffff
  • input.border#a0e7e5
  • input.foreground#2c3e50
  • input.placeholderForeground#8a9ba8
  • inputOption.activeBorder#ff6f91
  • list.activeSelectionBackground#ff6f91
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ff6f91
  • list.highlightForeground#ff6f91
  • list.hoverBackground#ff6f9188
  • minimap.background#f0faff
  • minimapSlider.activeBackground#a0e7e566
  • minimapSlider.background#a0e7e522
  • minimapSlider.hoverBackground#a0e7e544
  • panel.background#f0faff
  • panel.border#a0e7e5
  • panelTitle.activeBorder#ff6f91
  • panelTitle.activeForeground#ff6f91
  • panelTitle.inactiveForeground#8a9ba8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#a0e7e5cc
  • scrollbarSlider.background#a0e7e544
  • scrollbarSlider.hoverBackground#a0e7e588
  • sideBar.background#e6f7ff
  • sideBar.foreground#2c3e50
  • sideBarSectionHeader.background#e6f7ff
  • sideBarSectionHeader.foreground#ff6f91
  • sideBarTitle.foreground#ff6f91
  • statusBar.background#ff6f91
  • statusBar.debuggingBackground#a0e7e5
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#e6f7ff
  • statusBarItem.hoverBackground#ff6f9188
  • tab.activeBackground#ffffff
  • tab.activeBorder#ff6f91
  • tab.activeForeground#2c3e50
  • tab.border#a0e7e5
  • tab.inactiveBackground#f5fbff
  • tab.inactiveForeground#8a9ba8
  • terminal.ansiBlue#6dd5ed
  • terminal.ansiBrightBlue#b3e5fc
  • terminal.ansiBrightCyan#81d4fa
  • terminal.ansiBrightGreen#c8e6c9
  • terminal.ansiBrightMagenta#ff80ab
  • terminal.ansiBrightRed#ff8a80
  • terminal.ansiBrightYellow#ffe082
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#a0e7e5
  • terminal.ansiMagenta#ff6f91
  • terminal.ansiRed#ff5252
  • terminal.ansiYellow#ffb74d
  • terminal.background#f0faff
  • terminal.foreground#2c3e50
  • titleBar.activeBackground#e6f7ff
  • titleBar.activeForeground#2c3e50
  • titleBar.inactiveBackground#f5fbff
  • titleBar.inactiveForeground#8a9ba8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a9ba8italic
string, string.quoted, string.template#00bcd4
keyword, storage.type, storage.modifier#ff6f91bold
keyword.operator, punctuation.accessor#6dd5ed
variable, variable.other#2c3e50
variable.parameter#6dd5editalic
entity.name.function, support.function#ff6f91
meta.function-call#00bcd4
entity.name.class, entity.name.type.class, support.class#2c3e50bold
entity.name.type, support.type#2c3e50
entity.name.type.interface#6dd5editalic
constant.numeric#ff6f91
constant, constant.language, constant.character#ff6f91
constant.language.boolean#ff6f91bold
variable.other.property, support.variable.property#2c3e50
meta.object-literal.key#ff6f91
entity.name.tag, punctuation.definition.tag#ff6f91
entity.other.attribute-name#6dd5editalic
punctuation, meta.brace#6dd5ed
string.regexp#ff6f91
constant.character.escape#6dd5ed
meta.decorator, punctuation.decorator#00bcd4
invalid, invalid.illegal#ff5252strikethrough
markup.heading, entity.name.section#ff6f91bold
markup.bold#ff6f91bold
markup.italic#6dd5editalic
markup.underline.link#ff6f91
markup.inline.raw, markup.fenced_code#00bcd4
support.type.property-name.json#ff6f91
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff6f91
support.type.property-name.css#2c3e50
support.constant.property-value.css#00bcd4