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—