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#E83D3D
  • activityBar.background#04040C
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#3A2A3A
  • activityBarBadge.background#E83D3D
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E83D3D
  • badge.foreground#FFFFFF
  • button.background#E83D3D
  • button.foreground#FFFFFF
  • button.hoverBackground#FF5A5A
  • dropdown.background#0A0A14
  • dropdown.border#1A1A2E
  • dropdown.foreground#D0C8D0
  • editor.background#0A0A14
  • editor.foreground#D0C8D0
  • editor.lineHighlightBackground#1A1A2E
  • editor.selectionBackground#E83D3D80
  • editor.selectionHighlightBackground#E83D3D40
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#08081A
  • editorLineNumber.foreground#3A2A3A
  • gitDecoration.addedResourceForeground#4AE0A0
  • gitDecoration.conflictingResourceForeground#C792EA
  • gitDecoration.deletedResourceForeground#E83D3D
  • gitDecoration.modifiedResourceForeground#4AE0E0
  • input.background#04040C
  • input.border#1A1A2E
  • input.foreground#D0C8D0
  • input.placeholderForeground#3A2A3A
  • inputOption.activeBorder#E83D3D
  • list.activeSelectionBackground#1A1A2E
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A2E
  • list.hoverBackground#12122A
  • list.hoverForeground#D0C8D0
  • list.inactiveSelectionBackground#12122A
  • minimap.background#08081A
  • minimap.findMatchHighlight#E83D3D80
  • panel.background#060610
  • panel.border#1A1A2E
  • peekView.background#0A0A14
  • peekView.border#E83D3D
  • peekViewEditor.background#04040C
  • peekViewResult.background#060610
  • quickInput.background#0A0A14
  • quickInput.foreground#D0C8D0
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#E83D3DAA
  • scrollbarSlider.background#1A1A2E80
  • scrollbarSlider.hoverBackground#1A1A2EAA
  • sideBar.background#060610
  • sideBar.foreground#B8B0B8
  • sideBarSectionHeader.background#0A0A14
  • sideBarTitle.foreground#D0C8D0
  • statusBar.background#04040C
  • statusBar.foreground#FFFFFF
  • statusBarItem.activeBackground#E83D3D66
  • statusBarItem.hoverBackground#1A1A2E
  • tab.activeBackground#0A0A14
  • tab.activeForeground#FFFFFF
  • tab.hoverBackground#1A1A2E
  • tab.inactiveBackground#08081A
  • tab.inactiveForeground#3A2A3A
  • terminal.ansiBlack#2D2D2D
  • terminal.ansiBlue#7EC8E3
  • terminal.ansiBrightBlack#505050
  • terminal.ansiBrightBlue#8ED8F3
  • terminal.ansiBrightCyan#8AFFFF
  • terminal.ansiBrightGreen#7AFFB0
  • terminal.ansiBrightMagenta#D4A0FF
  • terminal.ansiBrightRed#FF5A5A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#6AFFFF
  • terminal.ansiCyan#6AFFFF
  • terminal.ansiGreen#4AE0A0
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#E83D3D
  • terminal.ansiWhite#D0C8D0
  • terminal.ansiYellow#4AE0E0
  • terminal.background#04040C
  • terminal.foreground#D0C8D0
  • titleBar.activeBackground#04040C
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#04040C
  • titleBar.inactiveForeground#3A2A3A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3A2A4Aitalic
keyword, storage.type, storage.modifier#E83D3D
string, string.quoted, string.regexp#E0E0E0
constant.numeric, constant.language#4AE0E0
entity.name.function, meta.function-call, support.function#E83D3D
entity.name.type, entity.name.class, support.type#4AE0E0
variable, variable.parameter#D0C8D0
variable.other.constant#4AE0E0
support.type.property-name.css#E83D3Ditalic
meta.tag, entity.name.tag#E83D3D
entity.other.attribute-name#E0E0E0
punctuation, meta.brace, meta.brace.round#3A2A3A
markup.heading, markup.heading entity.name#E83D3Dbold
markup.list#E0E0E0
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code.block#E0E0E0
constant.character.escape#6AFFFF
support.type.property-name.json#E83D3D
constant.language.json#E83D3D