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#6A9CFF
  • activityBar.background#F0EEFF
  • activityBar.foreground#FF6F91
  • activityBarBadge.background#FF6F91
  • activityBarBadge.foreground#FAF8FF
  • badge.background#FF6F91
  • badge.foreground#FAF8FF
  • button.background#6A9CFF
  • button.foreground#FAF8FF
  • button.hoverBackground#4F80CC
  • dropdown.background#F7F5FF
  • dropdown.border#6A9CFF
  • dropdown.foreground#2B2838
  • editor.background#FAF8FF
  • editor.findMatchBackground#FF6F9160
  • editor.findMatchHighlightBackground#FF6F9130
  • editor.foreground#2B2838
  • editor.lineHighlightBackground#EDE8FF
  • editor.lineHighlightBorder#6A9CFF
  • editor.selectionBackground#6A9CFF30
  • editor.selectionHighlightBackground#FF6F9120
  • editorBracketMatch.background#6A9CFF40
  • editorBracketMatch.border#FF6F91
  • editorCursor.foreground#FF6F91
  • editorGroupHeader.tabsBackground#FAF8FF
  • editorIndentGuide.activeBackground#FF6F91
  • editorIndentGuide.background#6A9CFF33
  • editorLineNumber.activeForeground#2B2838
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#9E9E9E
  • focusBorder#FF6F91
  • gitDecoration.conflictingResourceForeground#6A9CFF
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#FF6F91
  • gitDecoration.untrackedResourceForeground#FFB84D
  • input.background#F7F5FF
  • input.border#6A9CFF
  • input.foreground#2B2838
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FF6F91
  • list.activeSelectionBackground#6A9CFF20
  • list.activeSelectionForeground#2B2838
  • list.focusBackground#6A9CFF20
  • list.highlightForeground#FF6F91
  • list.hoverBackground#F0EDFF
  • minimap.background#FAF8FF
  • minimapSlider.activeBackground#FF6F9166
  • minimapSlider.background#FF6F9122
  • minimapSlider.hoverBackground#FF6F9144
  • panel.background#FAF8FF
  • panel.border#6A9CFF
  • panelTitle.activeBorder#FF6F91
  • panelTitle.activeForeground#2B2838
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#FF6F8888
  • scrollbarSlider.background#6A9CFF44
  • scrollbarSlider.hoverBackground#6A9CFF88
  • sideBar.background#F3F1FF
  • sideBar.foreground#2B2838
  • sideBarSectionHeader.background#F0EEFF
  • sideBarSectionHeader.foreground#FF6F91
  • sideBarTitle.foreground#FF6F91
  • statusBar.background#6A9CFF
  • statusBar.debuggingBackground#FF6F91
  • statusBar.foreground#FAF8FF
  • statusBar.noFolderBackground#F5F3FF
  • statusBarItem.hoverBackground#FF6F9133
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6F91
  • tab.activeForeground#2B2838
  • tab.border#6A9CFF
  • tab.inactiveBackground#FAF8FF
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#6A9CFF
  • terminal.ansiBrightBlue#8AB4FF
  • terminal.ansiBrightCyan#7FF0FF
  • terminal.ansiBrightGreen#B9E78E
  • terminal.ansiBrightMagenta#FF92B4
  • terminal.ansiBrightRed#FF8A90
  • terminal.ansiBrightYellow#FFCC80
  • terminal.ansiCyan#5FD0FF
  • terminal.ansiGreen#A5D977
  • terminal.ansiMagenta#FF6F91
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFB84D
  • terminal.background#FAF8FF
  • terminal.foreground#2B2838
  • titleBar.activeBackground#E6E2FF
  • titleBar.activeForeground#2B2838
  • titleBar.inactiveBackground#FAF8FF
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B0A090italic
string, string.quoted, string.template#A3E635
keyword, storage.type, storage.modifier#D84315bold
keyword.operator, punctuation.accessor#FF6F00
variable, variable.other#5D4037
variable.parameter#5D4037italic
entity.name.function, support.function#1976D2
meta.function-call#1976D2
entity.name.class, entity.name.type.class, support.class#5D4037bold
entity.name.type, support.type#5D4037
entity.name.type.interface#5D4037italic
constant.numeric#FF6F00
constant, constant.language, constant.character#FF6F00
constant.language.boolean#FF6F00bold
variable.other.property, support.variable.property#1976D2
meta.object-literal.key#1976D2
entity.name.tag, punctuation.definition.tag#D84315
entity.other.attribute-name#D84315italic
punctuation, meta.brace#212121
string.regexp#A3E635
constant.character.escape#D84315
meta.decorator, punctuation.decorator#E0C800
invalid, invalid.illegal#D84315strikethrough
markup.heading, entity.name.section#FF6F00bold
markup.bold#FF6F00bold
markup.italic#B0A090italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#A3E635
support.type.property-name.json#1976D2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E0C800
support.type.property-name.css#1976D2
support.constant.property-value.css#A3E635