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#141814
  • activityBar.foreground#7fbc8c
  • activityBar.inactiveForeground#5a6b5a
  • activityBarBadge.background#9fc08d
  • activityBarBadge.foreground#141814
  • button.background#2d5016
  • button.foreground#d3e4cd
  • button.hoverBackground#3d6520
  • diffEditor.insertedTextBackground#9fc08d20
  • diffEditor.removedTextBackground#d9797920
  • editor.background#1a1f1a
  • editor.foreground#d3e4cd
  • editor.inactiveSelectionBackground#2d3c2d40
  • editor.selectionBackground#3f514060
  • editorBracketMatch.background#3f514080
  • editorBracketMatch.border#7fbc8c
  • editorCursor.foreground#9fc08d
  • editorError.foreground#d97979
  • editorGroupHeader.tabsBackground#141814
  • editorHint.foreground#85c5a6
  • editorIndentGuide.activeBackground#3f5140
  • editorIndentGuide.background#2d3c2d
  • editorInfo.foreground#7fbc8c
  • editorLineNumber.activeForeground#7fbc8c
  • editorLineNumber.foreground#3f5140
  • editorRuler.foreground#2d3c2d
  • editorWarning.foreground#e0c080
  • editorWhitespace.foreground#2d3c2d
  • focusBorder#7fbc8c
  • input.background#2d3c2d
  • input.border#3f5140
  • input.foreground#d3e4cd
  • inputOption.activeBorder#7fbc8c
  • list.activeSelectionBackground#2d3c2d
  • list.activeSelectionForeground#d3e4cd
  • list.hoverBackground#2a342a
  • list.hoverForeground#d3e4cd
  • list.inactiveSelectionBackground#252d25
  • panel.background#1a1f1a
  • panel.border#2d3c2d
  • panelTitle.activeBorder#7fbc8c
  • panelTitle.activeForeground#d3e4cd
  • panelTitle.inactiveForeground#5a6b5a
  • scrollbarSlider.activeBackground#3f5140a0
  • scrollbarSlider.background#3f514060
  • scrollbarSlider.hoverBackground#3f514080
  • selection.background#3f514080
  • sideBar.background#141814
  • sideBar.foreground#d3e4cd
  • sideBarSectionHeader.background#1a1f1a
  • sideBarSectionHeader.foreground#c2d8a8
  • sideBarTitle.foreground#7fbc8c
  • statusBar.background#2d5016
  • statusBar.foreground#d3e4cd
  • statusBar.noFolderBackground#8b3a3a
  • statusBarItem.hoverBackground#3d6520
  • tab.activeBackground#1a1f1a
  • tab.activeForeground#d3e4cd
  • tab.border#141814
  • tab.inactiveBackground#141814
  • tab.inactiveForeground#5a6b5a
  • terminal.ansiBlack#2d3c2d
  • terminal.ansiBlue#7fbc8c
  • terminal.ansiBrightBlack#5a6b5a
  • terminal.ansiBrightBlue#96cca0
  • terminal.ansiBrightCyan#a0d8bb
  • terminal.ansiBrightGreen#b5d4a6
  • terminal.ansiBrightMagenta#c9b3e0
  • terminal.ansiBrightRed#e89999
  • terminal.ansiBrightWhite#e5f0e5
  • terminal.ansiBrightYellow#f0d49a
  • terminal.ansiCyan#85c5a6
  • terminal.ansiGreen#9fc08d
  • terminal.ansiMagenta#b8a0d0
  • terminal.ansiRed#d97979
  • terminal.ansiWhite#c7d7c7
  • terminal.ansiYellow#e0c080
  • terminal.background#1a1f1a
  • terminal.foreground#d3e4cd
  • titleBar.activeBackground#141814
  • titleBar.activeForeground#d3e4cd
  • titleBar.inactiveBackground#1a1f1a
  • titleBar.inactiveForeground#5a6b5a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a6b5aitalic
string, string.quoted#c2d8a8—
constant.numeric, constant.language#e0c080—
keyword, storage.type, storage.modifier#b8a0d0bold
entity.name.function, support.function#9fc08dbold
entity.name.type, entity.name.class, support.class#7fbc8c—
variable, variable.parameter#d3e4cd—
constant.character.escape#85c5a6—
keyword.operator#96cca0—
entity.name.tag#d97979—
entity.other.attribute-name#e0c080italic