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#ff6ec7
  • activityBar.background#0b1025
  • activityBar.foreground#ff6ec7
  • activityBarBadge.background#ff6ec7
  • activityBarBadge.foreground#0a0f2b
  • badge.background#ff6ec7
  • badge.foreground#0a0f2b
  • button.background#11173f
  • button.foreground#e0f0ff
  • button.hoverBackground#004f66
  • dropdown.background#0c1235
  • dropdown.border#11173f
  • dropdown.foreground#e0f0ff
  • editor.background#0a0f2b
  • editor.findMatchBackground#ff6ec744
  • editor.findMatchHighlightBackground#ff6ec722
  • editor.foreground#e0f0ff
  • editor.lineHighlightBackground#11173f80
  • editor.lineHighlightBorder#11173f
  • editor.selectionBackground#004f66
  • editor.selectionHighlightBackground#004f6688
  • editorBracketMatch.background#ff6ec733
  • editorBracketMatch.border#ff6ec7
  • editorCursor.foreground#ff6ec7
  • editorGroupHeader.tabsBackground#0a0f2b
  • editorIndentGuide.activeBackground#6a7b9e88
  • editorIndentGuide.background#6a7b9e44
  • editorLineNumber.activeForeground#ff6ec7
  • editorLineNumber.foreground#6a7b9e
  • editorWhitespace.foreground#6a7b9e
  • focusBorder#ff6ec7
  • gitDecoration.conflictingResourceForeground#ff6ec7
  • gitDecoration.deletedResourceForeground#ff6ec7
  • gitDecoration.modifiedResourceForeground#ff6ec7
  • gitDecoration.untrackedResourceForeground#aaff00
  • input.background#0c1235
  • input.border#11173f
  • input.foreground#e0f0ff
  • input.placeholderForeground#6a7b9e
  • inputOption.activeBorder#ff6ec7
  • list.activeSelectionBackground#11173f
  • list.activeSelectionForeground#e0f0ff
  • list.focusBackground#11173f
  • list.highlightForeground#ff6ec7
  • list.hoverBackground#11173f66
  • minimap.background#0a0f2b
  • minimapSlider.activeBackground#ff6ec766
  • minimapSlider.background#ff6ec722
  • minimapSlider.hoverBackground#ff6ec744
  • panel.background#0a0f2b
  • panel.border#11173f
  • panelTitle.activeBorder#ff6ec7
  • panelTitle.activeForeground#e0f0ff
  • panelTitle.inactiveForeground#6a7b9e
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff6ec788
  • scrollbarSlider.background#6a7b9e44
  • scrollbarSlider.hoverBackground#6a7b9e88
  • sideBar.background#0c1235
  • sideBar.foreground#e0f0ff
  • sideBarSectionHeader.background#0a0f2b
  • sideBarSectionHeader.foreground#40e7ff
  • sideBarTitle.foreground#ff6ec7
  • statusBar.background#11173f
  • statusBar.debuggingBackground#ff6ec7
  • statusBar.foreground#e0f0ff
  • statusBar.noFolderBackground#0a0f2b
  • statusBarItem.hoverBackground#004f66
  • tab.activeBackground#11173f
  • tab.activeBorder#ff6ec7
  • tab.activeForeground#e0f0ff
  • tab.border#0a0f2b
  • tab.inactiveBackground#0a0f2b
  • tab.inactiveForeground#6a7b9e
  • terminal.ansiBlue#40e7ff
  • terminal.ansiBrightBlue#66f0ff
  • terminal.ansiBrightCyan#66f0ff
  • terminal.ansiBrightGreen#ccff33
  • terminal.ansiBrightMagenta#ff8fe0
  • terminal.ansiBrightRed#ff8fe0
  • terminal.ansiBrightYellow#ffd060
  • terminal.ansiCyan#40e7ff
  • terminal.ansiGreen#aaff00
  • terminal.ansiMagenta#ff6ec7
  • terminal.ansiRed#ff6ec7
  • terminal.ansiYellow#ffb84d
  • terminal.background#0a0f2b
  • terminal.foreground#e0f0ff
  • titleBar.activeBackground#0a0f2b
  • titleBar.activeForeground#e0f0ff
  • titleBar.inactiveBackground#0b1025
  • titleBar.inactiveForeground#6a7b9e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a7b9eitalic
string, string.quoted, string.template#aaff00
keyword, storage.type, storage.modifier#ff6ec7bold
keyword.operator, punctuation.accessor#40e7ff
variable, variable.other#e0f0ff
variable.parameter#aaff00italic
entity.name.function, support.function#40e7ff
meta.function-call#e0f0ff
entity.name.class, entity.name.type.class, support.class#ff6ec7bold
entity.name.type, support.type#e0f0ff
entity.name.type.interface#40e7ffitalic
constant.numeric#ff6ec7
constant, constant.language, constant.character#ff6ec7
constant.language.boolean#ff6ec7bold
variable.other.property, support.variable.property#e0f0ff
meta.object-literal.key#ff6ec7
entity.name.tag, punctuation.definition.tag#ff6ec7
entity.other.attribute-name#40e7ffitalic
punctuation, meta.brace#e0f0ff
string.regexp#ff6ec7
constant.character.escape#40e7ff
meta.decorator, punctuation.decorator#ff6ec7
invalid, invalid.illegal#ff6ec7strikethrough
markup.heading, entity.name.section#ff6ec7bold
markup.bold#ff6ec7bold
markup.italic#40e7ffitalic
markup.underline.link#40e7ff
markup.inline.raw, markup.fenced_code#aaff00
support.type.property-name.json#ff6ec7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#40e7ff
support.type.property-name.css#e0f0ff
support.constant.property-value.css#aaff00