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#ff5eaa
  • activityBar.background#e8e0ff
  • activityBar.foreground#ff5eaa
  • activityBarBadge.background#ff5eaa
  • activityBarBadge.foreground#f5f0ff
  • badge.background#ff5eaa
  • badge.foreground#f5f0ff
  • button.background#d0c4ff
  • button.foreground#2e2e2e
  • button.hoverBackground#ff5eaa30
  • dropdown.background#e8e0ff
  • dropdown.border#d0c4ff
  • dropdown.foreground#2e2e2e
  • editor.background#f5f0ff
  • editor.findMatchBackground#ff5eaa44
  • editor.findMatchHighlightBackground#ff5eaa22
  • editor.foreground#2e2e2e
  • editor.lineHighlightBackground#ff5eaa20
  • editor.lineHighlightBorder#ff5eaa80
  • editor.selectionBackground#ff5eaa55
  • editor.selectionHighlightBackground#ff5eaa33
  • editorBracketMatch.background#ff5eaa33
  • editorBracketMatch.border#ff5eaa
  • editorCursor.foreground#ff5eaa
  • editorGroupHeader.tabsBackground#f5f0ff
  • editorIndentGuide.activeBackground#ff5eaa
  • editorIndentGuide.background#c0c0c0
  • editorLineNumber.activeForeground#ff5eaa
  • editorLineNumber.foreground#a0a0a0
  • editorWhitespace.foreground#c0c0c0
  • focusBorder#ff5eaa
  • gitDecoration.conflictingResourceForeground#ffdd00
  • gitDecoration.deletedResourceForeground#ff5eaa
  • gitDecoration.modifiedResourceForeground#ff5eaa
  • gitDecoration.untrackedResourceForeground#39ff14
  • input.background#e8e0ff
  • input.border#d0c4ff
  • input.foreground#2e2e2e
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBorder#ff5eaa
  • list.activeSelectionBackground#d0c4ff
  • list.activeSelectionForeground#2e2e2e
  • list.focusBackground#d0c4ff
  • list.highlightForeground#ff5eaa
  • list.hoverBackground#d0c4ffaa
  • minimap.background#f5f0ff
  • minimapSlider.activeBackground#ff5eaa66
  • minimapSlider.background#ff5eaa22
  • minimapSlider.hoverBackground#ff5eaa44
  • panel.background#f5f0ff
  • panel.border#d0c4ff
  • panelTitle.activeBorder#ff5eaa
  • panelTitle.activeForeground#ff5eaa
  • panelTitle.inactiveForeground#7a7a7a
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff5eaa88
  • scrollbarSlider.background#a0a0a044
  • scrollbarSlider.hoverBackground#a0a0a088
  • sideBar.background#e8e0ff
  • sideBar.foreground#4a4a4a
  • sideBarSectionHeader.background#e8e0ff
  • sideBarSectionHeader.foreground#ff5eaa
  • sideBarTitle.foreground#ff5eaa
  • statusBar.background#d0c4ff
  • statusBar.debuggingBackground#ff5eaa
  • statusBar.foreground#2e2e2e
  • statusBar.noFolderBackground#e8e0ff
  • statusBarItem.hoverBackground#ff5eaa30
  • tab.activeBackground#d0c4ff
  • tab.activeBorder#ff5eaa
  • tab.activeForeground#2e2e2e
  • tab.border#c0b4e0
  • tab.inactiveBackground#e8e0ff
  • tab.inactiveForeground#7a7a7a
  • terminal.ansiBlue#0066ff
  • terminal.ansiBrightBlue#3399ff
  • terminal.ansiBrightCyan#66ffff
  • terminal.ansiBrightGreen#66ff66
  • terminal.ansiBrightMagenta#ff66ff
  • terminal.ansiBrightRed#ff8fb3
  • terminal.ansiBrightYellow#ffee66
  • terminal.ansiCyan#00e5e5
  • terminal.ansiGreen#39ff14
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff5eaa
  • terminal.ansiYellow#ffdd00
  • terminal.background#f5f0ff
  • terminal.foreground#2e2e2e
  • titleBar.activeBackground#e0d4ff
  • titleBar.activeForeground#2e2e2e
  • titleBar.inactiveBackground#f5f0ff
  • titleBar.inactiveForeground#7a7a7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A8A8italic
string, string.quoted, string.template#FF00FF
keyword, storage.type, storage.modifier#FF5E5Ebold
keyword.operator, punctuation.accessor#00BFFF
variable, variable.other#A0D0FF
variable.parameter#00BFFFitalic
entity.name.function, support.function#5FEEFF
meta.function-call#5FEEFF
entity.name.class, entity.name.type.class, support.class#FF5E5Ebold
entity.name.type, support.type#00BFFF
entity.name.type.interface#00BFFFitalic
constant.numeric#FFD700
constant, constant.language, constant.character#FF5E5E
constant.language.boolean#FF5E5Ebold
variable.other.property, support.variable.property#A0D0FF
meta.object-literal.key#5FDFFF
entity.name.tag, punctuation.definition.tag#FF5E5E
entity.other.attribute-name#FF00FFitalic
punctuation, meta.brace#A8A8A8
string.regexp#FF5E5E
constant.character.escape#FF00FF
meta.decorator, punctuation.decorator#FFD700
invalid, invalid.illegal#FF5E5Estrikethrough
markup.heading, entity.name.section#FF5E5Ebold
markup.bold#FF5E5Ebold
markup.italic#FF00FFitalic
markup.underline.link#00BFFF
markup.inline.raw, markup.fenced_code#5FEEFF
support.type.property-name.json#00BFFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF00FF
support.type.property-name.css#5FDFFF
support.constant.property-value.css#5FEEFF