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#FF00C8
  • activityBar.background#15142B
  • activityBar.foreground#00E5FF
  • activityBarBadge.background#00E5FF
  • activityBarBadge.foreground#0D0C1F
  • badge.background#FF00C8
  • badge.foreground#0D0C1F
  • button.background#00E5FF
  • button.foreground#0D0C1F
  • button.hoverBackground#00E5FF88
  • dropdown.background#15142B
  • dropdown.border#00E5FF
  • dropdown.foreground#E0E0FF
  • editor.background#0D0C1F
  • editor.findMatchBackground#FF00C844
  • editor.findMatchHighlightBackground#FF00C822
  • editor.foreground#E0E0FF
  • editor.lineHighlightBackground#00E5FF10
  • editor.lineHighlightBorder#00E5FF30
  • editor.selectionBackground#00E5FF33
  • editor.selectionHighlightBackground#00E5FF22
  • editorBracketMatch.background#00E5FF33
  • editorBracketMatch.border#00E5FF
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#0D0C1F
  • editorIndentGuide.activeBackground#00E5FF55
  • editorIndentGuide.background#8A8ABF33
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#8A8ABF
  • editorWhitespace.foreground#8A8ABF55
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FF00C8
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#7CFF00
  • input.background#15142B
  • input.border#00E5FF
  • input.foreground#E0E0FF
  • input.placeholderForeground#8A8ABF
  • inputOption.activeBorder#FF00C8
  • list.activeSelectionBackground#00E5FF33
  • list.activeSelectionForeground#E0E0FF
  • list.focusBackground#00E5FF44
  • list.highlightForeground#FF00C8
  • list.hoverBackground#00E5FF22
  • minimap.background#0D0C1F
  • minimapSlider.activeBackground#00E5FF66
  • minimapSlider.background#00E5FF22
  • minimapSlider.hoverBackground#00E5FF44
  • panel.background#0D0C1F
  • panel.border#15142B
  • panelTitle.activeBorder#FF00C8
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#8A8ABF
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00E5FF88
  • scrollbarSlider.background#8A8ABF44
  • scrollbarSlider.hoverBackground#8A8ABF88
  • sideBar.background#181734
  • sideBar.foreground#E0E0FF
  • sideBarSectionHeader.background#1F1E3A
  • sideBarSectionHeader.foreground#FF00C8
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#15142B
  • statusBar.debuggingBackground#FF00C8
  • statusBar.foreground#00E5FF
  • statusBar.noFolderBackground#0D0C1F
  • statusBarItem.hoverBackground#00E5FF33
  • tab.activeBackground#0D0C1F
  • tab.activeBorder#FF00C8
  • tab.activeForeground#E0E0FF
  • tab.border#0D0C1F
  • tab.inactiveBackground#15142B
  • tab.inactiveForeground#8A8ABF
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#00E5FF
  • terminal.ansiBrightCyan#66FFEE
  • terminal.ansiBrightGreen#A0FF66
  • terminal.ansiBrightMagenta#FF00C8
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFF777
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#7CFF00
  • terminal.ansiMagenta#FF00C8
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFEE33
  • terminal.background#0D0C1F
  • terminal.foreground#E0E0FF
  • titleBar.activeBackground#0D0C1F
  • titleBar.activeForeground#E0E0FF
  • titleBar.inactiveBackground#15142B
  • titleBar.inactiveForeground#8A8ABF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8ABFitalic
string, string.quoted, string.template#7CFF00—
keyword, storage.type, storage.modifier#FF00C8bold
keyword.operator, punctuation.accessor#00E5FF—
variable, variable.other#E0E0FF—
variable.parameter#FF00C8italic
entity.name.function, support.function#00E5FF—
meta.function-call#00E5FF—
entity.name.class, entity.name.type.class, support.class#FF00C8bold
entity.name.type, support.type#00E5FF—
entity.name.type.interface#FF00C8italic
constant.numeric#FF5555—
constant, constant.language, constant.character#FF5555—
constant.language.boolean#FF00C8bold
variable.other.property, support.variable.property#00E5FF—
meta.object-literal.key#00E5FF—
entity.name.tag, punctuation.definition.tag#FF00C8—
entity.other.attribute-name#FF00C8italic
punctuation, meta.brace#00E5FF—
string.regexp#FF00C8—
constant.character.escape#FF00C8—
meta.decorator, punctuation.decorator#FF00C8—
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#FF00C8bold
markup.bold#FF00C8bold
markup.italic#FF00C8italic
markup.underline.link#00E5FF—
markup.inline.raw, markup.fenced_code#7CFF00—
support.type.property-name.json#00E5FF—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF00C8—
support.type.property-name.css#00E5FF—
support.constant.property-value.css#7CFF00—