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—