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#FF7EBB
  • activityBar.background#15181F
  • activityBar.foreground#00E6FF
  • activityBarBadge.background#00E6FF
  • activityBarBadge.foreground#1B1F2E
  • badge.background#00E6FF
  • badge.foreground#1B1F2E
  • button.background#242A3C
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2F45
  • dropdown.background#161A24
  • dropdown.border#242A3C
  • dropdown.foreground#D0D5E3
  • editor.background#1B1F2E
  • editor.findMatchBackground#00E6FF44
  • editor.findMatchHighlightBackground#00E6FF22
  • editor.foreground#D0D5E3
  • editor.lineHighlightBackground#242A3C66
  • editor.lineHighlightBorder#242A3C99
  • editor.selectionBackground#2A2F45AA
  • editor.selectionHighlightBackground#2A2F4555
  • editorBracketMatch.background#00E6FF33
  • editorBracketMatch.border#00E6FF
  • editorCursor.foreground#00E6FF
  • editorGroupHeader.tabsBackground#1B1F2E
  • editorIndentGuide.activeBackground#2A2F4566
  • editorIndentGuide.background#2A2F4533
  • editorLineNumber.activeForeground#00E6FF
  • editorLineNumber.foreground#5A657E
  • editorWhitespace.foreground#2A2F45
  • focusBorder#00E6FF
  • gitDecoration.conflictingResourceForeground#FFB84D
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#00E6FF
  • gitDecoration.untrackedResourceForeground#6CFF9C
  • input.background#161A24
  • input.border#242A3C
  • input.foreground#D0D5E3
  • input.placeholderForeground#5A657E
  • inputOption.activeBorder#00E6FF
  • list.activeSelectionBackground#242A3C
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#242A3C
  • list.highlightForeground#00E6FF
  • list.hoverBackground#242A3C66
  • minimap.background#1B1F2E
  • minimapSlider.activeBackground#00E6FF66
  • minimapSlider.background#00E6FF22
  • minimapSlider.hoverBackground#00E6FF44
  • panel.background#1B1F2E
  • panel.border#242A3C
  • panelTitle.activeBorder#00E6FF
  • panelTitle.activeForeground#00E6FF
  • panelTitle.inactiveForeground#A8B2D1
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00E6FF88
  • scrollbarSlider.background#2A2F4533
  • scrollbarSlider.hoverBackground#2A2F4566
  • sideBar.background#161A24
  • sideBar.foreground#B0B8D1
  • sideBarSectionHeader.background#15181F
  • sideBarSectionHeader.foreground#00E6FF
  • sideBarTitle.foreground#00E6FF
  • statusBar.background#242A3C
  • statusBar.debuggingBackground#FF7EBB
  • statusBar.foreground#D0D5E3
  • statusBar.noFolderBackground#15181F
  • statusBarItem.hoverBackground#2A2F45
  • tab.activeBackground#242A3C
  • tab.activeBorder#00E6FF
  • tab.activeForeground#FFFFFF
  • tab.border#1B1F2E
  • tab.inactiveBackground#161A24
  • tab.inactiveForeground#A8B2D1
  • terminal.ansiBlue#00E6FF
  • terminal.ansiBrightBlue#6BD5FF
  • terminal.ansiBrightCyan#A8C5FF
  • terminal.ansiBrightGreen#9EF8C3
  • terminal.ansiBrightMagenta#FF8FD4
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFE68B
  • terminal.ansiCyan#7ADFFF
  • terminal.ansiGreen#6CFF9C
  • terminal.ansiMagenta#FF7EBB
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFB84D
  • terminal.background#1B1F2E
  • terminal.foreground#D0D5E3
  • titleBar.activeBackground#15181F
  • titleBar.activeForeground#D0D5E3
  • titleBar.inactiveBackground#1B1F2E
  • titleBar.inactiveForeground#A8B2D1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A657Eitalic
string, string.quoted, string.template#FF7EBB
keyword, storage.type, storage.modifier#00E6FFbold
keyword.operator, punctuation.accessor#00E6FF
variable, variable.other#D0D5E3
variable.parameter#FFB84Ditalic
entity.name.function, support.function#6CFF9C
meta.function-call#7ADFFF
entity.name.class, entity.name.type.class, support.class#FF8FD4bold
entity.name.type, support.type#7ADFFF
entity.name.type.interface#FFB84Ditalic
constant.numeric#FFB84D
constant, constant.language, constant.character#FF9F43
constant.language.boolean#FFB84Dbold
variable.other.property, support.variable.property#A8B2D1
meta.object-literal.key#00E6FF
entity.name.tag, punctuation.definition.tag#00E6FF
entity.other.attribute-name#FF7EBBitalic
punctuation, meta.brace#A8B2D1
string.regexp#FF9F43
constant.character.escape#FF7EBB
meta.decorator, punctuation.decorator#FFB84D
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#00E6FFbold
markup.bold#FF7EBBbold
markup.italic#FF7EBBitalic
markup.underline.link#6CFF9C
markup.inline.raw, markup.fenced_code#6CFF9C
support.type.property-name.json#00E6FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB84D
support.type.property-name.css#00E6FF
support.constant.property-value.css#6CFF9C