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#0FFFD5
  • activityBar.background#0A0014
  • activityBar.foreground#FF3EF5
  • activityBarBadge.background#FF3EF5
  • activityBarBadge.foreground#0F0A13
  • badge.background#FF3EF5
  • badge.foreground#0F0A13
  • button.background#1A001F
  • button.foreground#FFFFFF
  • button.hoverBackground#33002A
  • dropdown.background#120B18
  • dropdown.border#1A001F
  • dropdown.foreground#E6E6E6
  • editor.background#0F0A13
  • editor.findMatchBackground#0FFFD540
  • editor.findMatchHighlightBackground#0FFFD520
  • editor.foreground#E6E6E6
  • editor.lineHighlightBackground#1A001F80
  • editor.lineHighlightBorder#FF3EF580
  • editor.selectionBackground#FF3EF540
  • editor.selectionHighlightBackground#FF3EF520
  • editorBracketMatch.background#FF3EF540
  • editorBracketMatch.border#0FFFD5
  • editorCursor.foreground#0FFFD5
  • editorGroupHeader.tabsBackground#0F0A13
  • editorIndentGuide.activeBackground#FF3EF580
  • editorIndentGuide.background#33002A44
  • editorLineNumber.activeForeground#FF3EF5
  • editorLineNumber.foreground#55002A
  • editorWhitespace.foreground#33002A
  • focusBorder#0FFFD5
  • gitDecoration.conflictingResourceForeground#FFEE58
  • gitDecoration.deletedResourceForeground#FF5F5F
  • gitDecoration.modifiedResourceForeground#5FAAFF
  • gitDecoration.untrackedResourceForeground#5FFF8E
  • input.background#120B18
  • input.border#1A001F
  • input.foreground#E6E6E6
  • input.placeholderForeground#555555
  • inputOption.activeBorder#0FFFD5
  • list.activeSelectionBackground#1A001F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A001F
  • list.highlightForeground#0FFFD5
  • list.hoverBackground#1A001F66
  • minimap.background#0F0A13
  • minimapSlider.activeBackground#0FFFD566
  • minimapSlider.background#FF3EF522
  • minimapSlider.hoverBackground#FF3EF544
  • panel.background#0F0A13
  • panel.border#1A001F
  • panelTitle.activeBorder#0FFFD5
  • panelTitle.activeForeground#FF3EF5
  • panelTitle.inactiveForeground#BBBBBB
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0FFFD588
  • scrollbarSlider.background#FF3EF544
  • scrollbarSlider.hoverBackground#FF3EF588
  • sideBar.background#120B18
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#0A0014
  • sideBarSectionHeader.foreground#FF3EF5
  • sideBarTitle.foreground#FF3EF5
  • statusBar.background#1A001F
  • statusBar.debuggingBackground#3F001F
  • statusBar.foreground#FF3EF5
  • statusBar.noFolderBackground#0A0014
  • statusBarItem.hoverBackground#33002A
  • tab.activeBackground#1A001F
  • tab.activeBorder#0FFFD5
  • tab.activeForeground#FFFFFF
  • tab.border#0F0A13
  • tab.inactiveBackground#120B18
  • tab.inactiveForeground#BBBBBB
  • terminal.ansiBlue#5FAAFF
  • terminal.ansiBrightBlue#9FC9FF
  • terminal.ansiBrightCyan#5FFFFF
  • terminal.ansiBrightGreen#9FFFBB
  • terminal.ansiBrightMagenta#FF9EFF
  • terminal.ansiBrightRed#FF8080
  • terminal.ansiBrightYellow#FFFF80
  • terminal.ansiCyan#0FFFD5
  • terminal.ansiGreen#5FFF8E
  • terminal.ansiMagenta#FF3EF5
  • terminal.ansiRed#FF5F5F
  • terminal.ansiYellow#FFEE58
  • terminal.background#0F0A13
  • terminal.foreground#E6E6E6
  • titleBar.activeBackground#0A0014
  • titleBar.activeForeground#E6E6E6
  • titleBar.inactiveBackground#0F0A13
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#0FFFD5
keyword, storage.type, storage.modifier#FF3EF5bold
keyword.operator, punctuation.accessor#0FFFD5
variable, variable.other#E6E6E6
variable.parameter#FF8080italic
entity.name.function, support.function#5FAAFF
meta.function-call#CCCCCC
entity.name.class, entity.name.type.class, support.class#FF9FA0bold
entity.name.type, support.type#5FAAFF
entity.name.type.interface#5FFFFFitalic
constant.numeric#FF9FA0
constant, constant.language, constant.character#FF5F5F
constant.language.boolean#FF5F5Fbold
variable.other.property, support.variable.property#CCCCCC
meta.object-literal.key#5FAAFF
entity.name.tag, punctuation.definition.tag#FF5F5F
entity.other.attribute-name#FF3EF5italic
punctuation, meta.brace#FF3EF5
string.regexp#FF9FA0
constant.character.escape#FF3EF5
meta.decorator, punctuation.decorator#FFEE58
invalid, invalid.illegal#FF5F5Fstrikethrough
markup.heading, entity.name.section#FF5F5Fbold
markup.bold#FF9FA0bold
markup.italic#0FFFD5italic
markup.underline.link#5FAAFF
markup.inline.raw, markup.fenced_code#5FFF8E
support.type.property-name.json#5FAAFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEE58
support.type.property-name.css#5FAAFF
support.constant.property-value.css#0FFFD5