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#00FFC8
  • activityBar.background#0A0A0A
  • activityBar.foreground#00FFC8
  • activityBarBadge.background#00FFC8
  • activityBarBadge.foreground#0B0C0E
  • badge.background#00FFC8
  • badge.foreground#0B0C0E
  • button.background#15161A
  • button.foreground#FFFFFF
  • button.hoverBackground#202124
  • dropdown.background#0A0A0A
  • dropdown.border#15161A
  • dropdown.foreground#D0D4DC
  • editor.background#0B0C0E
  • editor.findMatchBackground#FF5FDE44
  • editor.findMatchHighlightBackground#FF5FDE22
  • editor.foreground#D0D4DC
  • editor.lineHighlightBackground#1F2128
  • editor.lineHighlightBorder#00FFC820
  • editor.selectionBackground#00FFC84D
  • editor.selectionHighlightBackground#00FFC822
  • editorBracketMatch.background#00FFC844
  • editorBracketMatch.border#00FFC8
  • editorCursor.foreground#00FFC8
  • editorGroupHeader.tabsBackground#0B0C0E
  • editorIndentGuide.activeBackground#00FFC844
  • editorIndentGuide.background#33384266
  • editorLineNumber.activeForeground#00FFC8
  • editorLineNumber.foreground#555A63
  • editorWhitespace.foreground#333842
  • focusBorder#00FFC8
  • gitDecoration.conflictingResourceForeground#FFE740
  • gitDecoration.deletedResourceForeground#FF6E8A
  • gitDecoration.modifiedResourceForeground#00FFC8
  • gitDecoration.untrackedResourceForeground#A4FF33
  • input.background#0A0A0A
  • input.border#15161A
  • input.foreground#D0D4DC
  • input.placeholderForeground#555A63
  • inputOption.activeBorder#00FFC8
  • list.activeSelectionBackground#15161A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#15161A
  • list.highlightForeground#00FFC8
  • list.hoverBackground#15161A66
  • minimap.background#0B0C0E
  • minimapSlider.activeBackground#00FFC866
  • minimapSlider.background#00FFC822
  • minimapSlider.hoverBackground#00FFC844
  • panel.background#0B0C0E
  • panel.border#15161A
  • panelTitle.activeBorder#00FFC8
  • panelTitle.activeForeground#00FFC8
  • panelTitle.inactiveForeground#B0B4BC
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00FFC888
  • scrollbarSlider.background#555A6344
  • scrollbarSlider.hoverBackground#555A6388
  • sideBar.background#0A0A0A
  • sideBar.foreground#B0B4BC
  • sideBarSectionHeader.background#0B0C0E
  • sideBarSectionHeader.foreground#00FFC8
  • sideBarTitle.foreground#00FFC8
  • statusBar.background#15161A
  • statusBar.debuggingBackground#FF5FDE
  • statusBar.foreground#D0D4DC
  • statusBar.noFolderBackground#0A0A0A
  • statusBarItem.hoverBackground#202124
  • tab.activeBackground#15161A
  • tab.activeBorder#00FFC8
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C0E
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#B0B4BC
  • terminal.ansiBlue#00FFC8
  • terminal.ansiBrightBlue#5CFFFF
  • terminal.ansiBrightCyan#70FFFF
  • terminal.ansiBrightGreen#C5FF66
  • terminal.ansiBrightMagenta#FF9FFF
  • terminal.ansiBrightRed#FF8BAA
  • terminal.ansiBrightYellow#FFF280
  • terminal.ansiCyan#00D4E6
  • terminal.ansiGreen#A4FF33
  • terminal.ansiMagenta#FF5FDE
  • terminal.ansiRed#FF6E8A
  • terminal.ansiYellow#FFE740
  • terminal.background#0B0C0E
  • terminal.foreground#D0D4DC
  • titleBar.activeBackground#0A0A0A
  • titleBar.activeForeground#D0D4DC
  • titleBar.inactiveBackground#0B0C0E
  • titleBar.inactiveForeground#A0A4AC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555A63italic
string, string.quoted, string.template#A4FF33
keyword, storage.type, storage.modifier#00FFC8bold
keyword.operator, punctuation.accessor#FF5FDE
variable, variable.other#D0D4DC
variable.parameter#FF5FDEitalic
entity.name.function, support.function#00FFC8
meta.function-call#D0D4DC
entity.name.class, entity.name.type.class, support.class#FF5FDEbold
entity.name.type, support.type#00FFC8
entity.name.type.interface#A4FF33italic
constant.numeric#FFE740
constant, constant.language, constant.character#FFE740
constant.language.boolean#FFE740bold
variable.other.property, support.variable.property#D0D4DC
meta.object-literal.key#00FFC8
entity.name.tag, punctuation.definition.tag#FF5FDE
entity.other.attribute-name#A4FF33italic
punctuation, meta.brace#D0D4DC
string.regexp#FF6E8A
constant.character.escape#A4FF33
meta.decorator, punctuation.decorator#FFE740
invalid, invalid.illegal#FF6E8Astrikethrough
markup.heading, entity.name.section#00FFC8bold
markup.bold#FFE740bold
markup.italic#A4FF33italic
markup.underline.link#00FFC8
markup.inline.raw, markup.fenced_code#A4FF33
support.type.property-name.json#00FFC8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE740
support.type.property-name.css#00FFC8
support.constant.property-value.css#A4FF33