Skip to main content
Coding Theme

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#1d2129
  • activityBar.foreground#948979
  • activityBar.inactiveForeground#5a5e66
  • activityBarBadge.background#948979
  • activityBarBadge.foreground#1d2129
  • badge.background#948979
  • badge.foreground#1d2129
  • button.background#948979
  • button.foreground#1d2129
  • button.hoverBackground#a89d88
  • dropdown.background#181c22
  • dropdown.border#3a3e46
  • dropdown.foreground#dfd0b8
  • editor.background#21252b
  • editor.findMatchBackground#948979c0
  • editor.findMatchHighlightBackground#94897960
  • editor.foreground#dfd0b8
  • editor.inactiveSelectionBackground#94897950
  • editor.lineHighlightBackground#262a32
  • editor.selectionBackground#948979a0
  • editor.wordHighlightBackground#94897940
  • editor.wordHighlightStrongBackground#94897970
  • editorBracketMatch.background#94897960
  • editorBracketMatch.border#948979c0
  • editorCursor.foreground#a89d88
  • editorError.foreground#e85d5d
  • editorGroupHeader.tabsBackground#1d2129
  • editorGutter.addedBackground#6a9979
  • editorGutter.background#21252b
  • editorGutter.deletedBackground#d86868
  • editorGutter.modifiedBackground#948979
  • editorHoverWidget.background#181c22
  • editorHoverWidget.border#3a3e46
  • editorIndentGuide.activeBackground#5a5e66
  • editorIndentGuide.background#3a3e46
  • editorInfo.foreground#7aa89d
  • editorLineNumber.activeForeground#948979
  • editorLineNumber.foreground#4a4e56
  • editorSuggestWidget.background#181c22
  • editorSuggestWidget.border#3a3e46
  • editorSuggestWidget.foreground#dfd0b8
  • editorSuggestWidget.selectedBackground#393e46
  • editorWarning.foreground#e8a86f
  • editorWhitespace.foreground#3a3e46
  • editorWidget.background#181c22
  • editorWidget.border#3a3e46
  • input.background#181c22
  • input.border#3a3e46
  • input.foreground#dfd0b8
  • input.placeholderForeground#6a6e76
  • inputOption.activeBackground#94897960
  • inputOption.activeBorder#948979
  • list.activeSelectionBackground#393e46
  • list.activeSelectionForeground#dfd0b8
  • list.focusBackground#393e46
  • list.hoverBackground#2e333c
  • list.inactiveSelectionBackground#32373f
  • panel.background#1f242a
  • panel.border#3a3e46
  • panelTitle.activeBorder#948979
  • panelTitle.activeForeground#dfd0b8
  • panelTitle.inactiveForeground#7a7e86
  • scrollbarSlider.activeBackground#948979
  • scrollbarSlider.background#3a3e4680
  • scrollbarSlider.hoverBackground#4a4e56a0
  • sideBar.background#1f242a
  • sideBar.foreground#c4b6a1
  • sideBarSectionHeader.background#1d2129
  • sideBarSectionHeader.foreground#dfd0b8
  • sideBarTitle.foreground#dfd0b8
  • statusBar.background#393e46
  • statusBar.foreground#dfd0b8
  • statusBar.noFolderBackground#393e46
  • tab.activeBackground#21252b
  • tab.activeBorder#948979
  • tab.activeBorderTop#948979
  • tab.activeForeground#dfd0b8
  • tab.border#181c22
  • tab.inactiveBackground#1d2129
  • tab.inactiveForeground#8a8e96
  • terminal.ansiBlack#1d2129
  • terminal.ansiBlue#7a9dad
  • terminal.ansiBrightBlack#4a4e56
  • terminal.ansiBrightBlue#9abdcd
  • terminal.ansiBrightCyan#9abdbd
  • terminal.ansiBrightGreen#a8bd9a
  • terminal.ansiBrightMagenta#c8adbd
  • terminal.ansiBrightRed#f88d8d
  • terminal.ansiBrightWhite#f8f0d8
  • terminal.ansiBrightYellow#e8d8b8
  • terminal.ansiCyan#7a9d9d
  • terminal.ansiGreen#8a9d7a
  • terminal.ansiMagenta#a88d9d
  • terminal.ansiRed#e85d5d
  • terminal.ansiWhite#dfd0b8
  • terminal.ansiYellow#c8b898
  • terminal.background#1f242a
  • terminal.foreground#dfd0b8
  • titleBar.activeBackground#1d2129
  • titleBar.activeForeground#dfd0b8
  • titleBar.inactiveBackground#181c22
  • titleBar.inactiveForeground#6a6e76

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a6a72italic
keyword, keyword.control, keyword.control.import, keyword.control.export, keyword.control.from#a89d88
storage.type, storage.modifier#ebcb8b
entity.name.function, support.function, meta.function-call#a88d9dbold
entity.name.type, entity.name.class, support.class, support.type, entity.name.interface, entity.name.namespace#dfd0b8
string, string.quoted, string.template, string.interpolated#9a9e96
constant.numeric, constant.language, constant.character#d4a574
variable, variable.other.readwrite, variable.parameter#c1c5cc
variable.other.property, variable.other.object.property, support.type.property-name.json, meta.structure.dictionary.key.json#d4a574
meta.structure.dictionary.value.json constant.language.json, meta.structure.dictionary.value.json constant.numeric.json#bf616a
keyword.operator, keyword.operator.logical, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.assignment#c48977
entity.name.tag#8ab99a
sleepy-nights by saurabh jainwal - VS Code Theme