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#E8E0D0
  • activityBar.background#040404
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#3A3A3A
  • activityBarBadge.background#808080
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E8E0D0
  • badge.foreground#0A0A0A
  • button.background#808080
  • button.foreground#FFFFFF
  • button.hoverBackground#A0A0A0
  • dropdown.background#0A0A0A
  • dropdown.border#1A1A1A
  • dropdown.foreground#E8E0D0
  • editor.background#0A0A0A
  • editor.foreground#E8E0D0
  • editor.lineHighlightBackground#1A1A1A
  • editor.selectionBackground#80808080
  • editor.selectionHighlightBackground#80808040
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#080808
  • editorLineNumber.foreground#3A3A3A
  • gitDecoration.addedResourceForeground#808080
  • gitDecoration.conflictingResourceForeground#C792EA
  • gitDecoration.deletedResourceForeground#8B3A3A
  • gitDecoration.modifiedResourceForeground#6B5030
  • input.background#040404
  • input.border#1A1A1A
  • input.foreground#E8E0D0
  • input.placeholderForeground#3A3A3A
  • inputOption.activeBorder#E8E0D0
  • list.activeSelectionBackground#1A1A1A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A1A
  • list.hoverBackground#121212
  • list.hoverForeground#E8E0D0
  • list.inactiveSelectionBackground#121212
  • minimap.background#080808
  • minimap.findMatchHighlight#80808080
  • panel.background#060606
  • panel.border#1A1A1A
  • peekView.background#0A0A0A
  • peekView.border#E8E0D0
  • peekViewEditor.background#040404
  • peekViewResult.background#060606
  • quickInput.background#0A0A0A
  • quickInput.foreground#E8E0D0
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#E8E0D0AA
  • scrollbarSlider.background#1A1A1A80
  • scrollbarSlider.hoverBackground#1A1A1AAA
  • sideBar.background#060606
  • sideBar.foreground#C8C0B0
  • sideBarSectionHeader.background#0A0A0A
  • sideBarTitle.foreground#E8E0D0
  • statusBar.background#040404
  • statusBar.foreground#FFFFFF
  • statusBarItem.activeBackground#80808066
  • statusBarItem.hoverBackground#1A1A1A
  • tab.activeBackground#0A0A0A
  • tab.activeForeground#FFFFFF
  • tab.hoverBackground#1A1A1A
  • tab.inactiveBackground#080808
  • tab.inactiveForeground#3A3A3A
  • terminal.ansiBlack#2D2D2D
  • terminal.ansiBlue#7EC8E3
  • terminal.ansiBrightBlack#505050
  • terminal.ansiBrightBlue#8ED8F3
  • terminal.ansiBrightCyan#6AFFFF
  • terminal.ansiBrightGreen#A0A0A0
  • terminal.ansiBrightMagenta#D4A0FF
  • terminal.ansiBrightRed#A84A4A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#8B6B40
  • terminal.ansiCyan#4AE0E0
  • terminal.ansiGreen#808080
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#8B3A3A
  • terminal.ansiWhite#E8E0D0
  • terminal.ansiYellow#6B5030
  • terminal.background#040404
  • terminal.foreground#E8E0D0
  • titleBar.activeBackground#040404
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#040404
  • titleBar.inactiveForeground#3A3A3A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#505050italic
keyword, storage.type, storage.modifier#FFFFFF
string, string.quoted, string.regexp#E8E0D0
constant.numeric, constant.language#808080
entity.name.function, meta.function-call, support.function#FFFFFF
entity.name.type, entity.name.class, support.type#808080
variable, variable.parameter#E8E0D0
variable.other.constant#808080
support.type.property-name.css#FFFFFFitalic
meta.tag, entity.name.tag#FFFFFF
entity.other.attribute-name#E8E0D0
punctuation, meta.brace, meta.brace.round#3A3A3A
markup.heading, markup.heading entity.name#FFFFFFbold
markup.list#E8E0D0
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code.block#E8E0D0
constant.character.escape#4AE0E0
support.type.property-name.json#FFFFFF
constant.language.json#FFFFFF