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#1f2529
  • activityBar.foreground#a7c080
  • activityBar.inactiveForeground#77756c
  • activityBarBadge.background#a7c080
  • activityBarBadge.foreground#1a1a1a
  • badge.background#a7c080
  • badge.foreground#1a1a1a
  • button.background#a7c080
  • button.foreground#1a1a1a
  • button.hoverBackground#b2c88f
  • dropdown.background#1f2529
  • editor.background#2b3339
  • editor.findMatchBackground#a7c08066
  • editor.findMatchHighlightBackground#a7c08038
  • editor.foreground#d3c6aa
  • editor.lineHighlightBackground#383f45
  • editor.selectionBackground#a7c08042
  • editorBracketMatch.border#a7c080
  • editorCursor.foreground#a7c080
  • editorGroupHeader.tabsBackground#272e33
  • editorIndentGuide.activeBackground1#d3c6aa38
  • editorIndentGuide.background1#d3c6aa14
  • editorLineNumber.activeForeground#a7c080
  • editorLineNumber.foreground#77756c
  • editorSuggestWidget.selectedBackground#a7c08042
  • editorWhitespace.foreground#d3c6aa1a
  • editorWidget.background#1f2529
  • focusBorder#a7c080
  • input.background#1f2529
  • input.foreground#d3c6aa
  • input.placeholderForeground#77756c
  • list.activeSelectionBackground#a7c08042
  • list.activeSelectionForeground#d3c6aa
  • list.hoverBackground#383f45
  • list.inactiveSelectionBackground#a7c08024
  • panel.background#252c31
  • panelTitle.activeForeground#a7c080
  • scrollbarSlider.activeBackground#d3c6aa5c
  • scrollbarSlider.background#d3c6aa29
  • scrollbarSlider.hoverBackground#d3c6aa42
  • selection.background#a7c0804d
  • sideBar.background#252c31
  • sideBar.foreground#d3c6aa
  • sideBarSectionHeader.background#2b3339
  • sideBarTitle.foreground#a7c080
  • statusBar.background#1f2529
  • statusBar.foreground#d3c6aa
  • statusBar.noFolderBackground#1f2529
  • tab.activeBackground#2b3339
  • tab.activeBorderTop#a7c080
  • tab.activeForeground#a7c080
  • tab.border#272e33
  • tab.inactiveBackground#272e33
  • tab.inactiveForeground#77756c
  • terminal.background#2b3339
  • terminal.foreground#d3c6aa
  • titleBar.activeBackground#1f2529
  • titleBar.activeForeground#d3c6aa
  • titleBar.inactiveBackground#1f2529
  • titleBar.inactiveForeground#77756c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#859289italic
string, string.quoted, string.template#a7c080
constant.numeric, constant.language, constant.character#d699b6
keyword, keyword.control, storage, storage.type, storage.modifier#e67e80
entity.name.function, support.function, meta.function-call.generic#83c092
variable, meta.definition.variable.name, variable.other.readwrite#d3c6aa
variable.parameter, parameter#b5ac96
entity.name.type, support.type, support.class, entity.name.namespace#dbbc7f
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#7fbbb3
keyword.operator#e69875
entity.name.tag, punctuation.definition.tag#e67e80
entity.other.attribute-name#83c092
constant.other.color, support.constant#d699b6
entity.name.type.class#dbbc7fbold
markup.boldbold
markup.italicitalic
markup.heading#a7c080bold
invalid#2b3339
ThemePaint by Toqir Ahmad - VS Code Theme