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#0b0e14
  • activityBar.foreground#59c2ff
  • activityBar.inactiveForeground#626a73
  • activityBarBadge.background#ffb454
  • activityBarBadge.foreground#0b0e14
  • button.background#0f4c81
  • button.foreground#bfbdb6
  • button.hoverBackground#0a3a64
  • diffEditor.insertedTextBackground#c2d94c20
  • diffEditor.removedTextBackground#ff333320
  • editor.background#0f1419
  • editor.foreground#bfbdb6
  • editor.inactiveSelectionBackground#1f243040
  • editor.selectionBackground#3e4b5960
  • editorBracketMatch.background#3e4b5980
  • editorBracketMatch.border#59c2ff
  • editorCursor.foreground#ffb454
  • editorError.foreground#ff3333
  • editorGroupHeader.tabsBackground#0b0e14
  • editorHint.foreground#95e6cb
  • editorIndentGuide.activeBackground#3e4b59
  • editorIndentGuide.background#1f2430
  • editorInfo.foreground#59c2ff
  • editorLineNumber.activeForeground#59c2ff
  • editorLineNumber.foreground#3e4b59
  • editorRuler.foreground#1f2430
  • editorWarning.foreground#ffb454
  • editorWhitespace.foreground#1f2430
  • focusBorder#59c2ff
  • input.background#1f2430
  • input.border#3e4b59
  • input.foreground#bfbdb6
  • inputOption.activeBorder#59c2ff
  • list.activeSelectionBackground#1f2430
  • list.activeSelectionForeground#bfbdb6
  • list.hoverBackground#232834
  • list.hoverForeground#bfbdb6
  • list.inactiveSelectionBackground#191e2a
  • panel.background#0f1419
  • panel.border#1f2430
  • panelTitle.activeBorder#59c2ff
  • panelTitle.activeForeground#bfbdb6
  • panelTitle.inactiveForeground#626a73
  • scrollbarSlider.activeBackground#3e4b59a0
  • scrollbarSlider.background#3e4b5960
  • scrollbarSlider.hoverBackground#3e4b5980
  • selection.background#3e4b5980
  • sideBar.background#0b0e14
  • sideBar.foreground#bfbdb6
  • sideBarSectionHeader.background#0f1419
  • sideBarSectionHeader.foreground#ffb454
  • sideBarTitle.foreground#59c2ff
  • statusBar.background#0f4c81
  • statusBar.foreground#bfbdb6
  • statusBar.noFolderBackground#ff3333
  • statusBarItem.hoverBackground#0a3a64
  • tab.activeBackground#0f1419
  • tab.activeForeground#bfbdb6
  • tab.border#0b0e14
  • tab.inactiveBackground#0b0e14
  • tab.inactiveForeground#626a73
  • terminal.ansiBlack#1f2430
  • terminal.ansiBlue#59c2ff
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#b8f0df
  • terminal.ansiBrightGreen#d5f770
  • terminal.ansiBrightMagenta#ffffb8
  • terminal.ansiBrightRed#ff6565
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd173
  • terminal.ansiCyan#95e6cb
  • terminal.ansiGreen#c2d94c
  • terminal.ansiMagenta#ffee99
  • terminal.ansiRed#ff3333
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#ffb454
  • terminal.background#0f1419
  • terminal.foreground#bfbdb6
  • titleBar.activeBackground#0b0e14
  • titleBar.activeForeground#bfbdb6
  • titleBar.inactiveBackground#0f1419
  • titleBar.inactiveForeground#626a73

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6773italic
string, string.quoted#c2d94c—
constant.numeric, constant.language#ffb454—
keyword, storage.type, storage.modifier#ff8f40bold
entity.name.function, support.function#ffb454bold
entity.name.type, entity.name.class, support.class#59c2ff—
variable, variable.parameter#bfbdb6—
constant.character.escape#95e6cb—
keyword.operator#f29668—
entity.name.tag#ff8f40—
entity.other.attribute-name#ffb454italic