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.background#2F343E
  • activityBar.border#363C46
  • debugExceptionWidget.background#2F343E
  • debugExceptionWidget.border#464B57
  • editor.background#282C33
  • editor.findMatchBackground#74ADE866
  • editor.findMatchHighlightBackground#74ADE81A
  • editor.foreground#ABB2BF
  • editor.inactiveSelectionBackground#B477CF3D
  • editor.lineHighlightBackground#2F343EBF
  • editor.selectionBackground#74ADE83D
  • editorBracketMatch.background#74ADE81A
  • editorBracketMatch.border#74ADE8
  • editorCursor.foreground#74ADE8
  • editorGroup.border#363C46
  • editorGroupHeader.tabsBorder#363C46
  • editorHoverWidget.background#2F343E
  • editorHoverWidget.border#464B57
  • editorLineNumber.activeForeground#D0D4DA
  • editorLineNumber.foreground#4E5A5F
  • editorSuggestWidget.background#2F343E
  • editorSuggestWidget.border#464B57
  • editorWhitespace.foreground#C8CCD40D
  • editorWidget.background#2F343E
  • editorWidget.border#464B57
  • focusBorder#47679E
  • input.background#2E343E
  • input.border#363C46
  • input.foreground#DCE0E5
  • notifications.background#2F343E
  • notifications.border#464B57
  • notifications.foreground#DCE0E5
  • panel.background#2F343E
  • panel.border#363C46
  • quickInput.background#2F343E
  • quickInput.foreground#DCE0E5
  • sideBar.background#2F343E
  • sideBar.border#363C46
  • statusBar.background#3B414D
  • statusBar.border#363C46
  • tab.activeBackground#282C33
  • tab.activeBorder#74ADE8
  • tab.activeForeground#DCE0E5
  • tab.border#363C46
  • tab.inactiveBackground#2F343E
  • tab.inactiveForeground#878A98
  • tab.lastPinnedBorder#363C46
  • tab.unfocusedActiveBorder#74ADE880
  • terminal.ansiBlack#282c34
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#636d83
  • terminal.ansiBrightBlue#85C1FF
  • terminal.ansiBrightCyan#6ED5DE
  • terminal.ansiBrightGreen#AAD581
  • terminal.ansiBrightMagenta#D398EB
  • terminal.ansiBrightRed#EA858B
  • terminal.ansiBrightWhite#fafafa
  • terminal.ansiBrightYellow#FFD885
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#abb2bf
  • terminal.ansiYellow#e5c07b
  • terminal.background#282C34
  • terminal.foreground#ABB2BF
  • titleBar.activeBackground#3B414D
  • titleBar.border#363C46
  • titleBar.inactiveBackground#2E343E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control.import, storage.modifier, storage.type, keyword.control#B477CF
string, text.literal, string.quoted.double#A1C181
variable, variable.language, variable.parameter#a9afbcff
constant.numeric, constant.language, constant.character#BF956A
entity.name.function#74ADE8
meta.function-call, meta.method-call#D07277
entity.name.class, entity.name.type, support.class#6EB4BF
punctuation.bracket, punctuation.definition.block, punctuation.definition.bracket, punctuation.definition.parameters#6EB4BF
comment#5D636Fitalic
punctuation.definition.tag, entity.name.tag#74ADE8
meta.decorator, entity.name.function.decorator#74ADE8
storage.type.function, keyword.operator#6EB4BF