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#181d16
  • activityBar.foreground#9bbf65
  • activityBar.inactiveForeground#6e7667
  • activityBarBadge.background#9bbf65
  • activityBarBadge.foreground#1a1a1a
  • badge.background#9bbf65
  • badge.foreground#1a1a1a
  • button.background#9bbf65
  • button.foreground#1a1a1a
  • button.hoverBackground#a7c777
  • dropdown.background#181d16
  • editor.background#21281f
  • editor.findMatchBackground#9bbf6566
  • editor.findMatchHighlightBackground#9bbf6538
  • editor.foreground#cdd6c0
  • editor.lineHighlightBackground#2e352c
  • editor.selectionBackground#9bbf6542
  • editorBracketMatch.border#9bbf65
  • editorCursor.foreground#9bbf65
  • editorGroupHeader.tabsBackground#1e241c
  • editorIndentGuide.activeBackground1#cdd6c038
  • editorIndentGuide.background1#cdd6c014
  • editorLineNumber.activeForeground#9bbf65
  • editorLineNumber.foreground#6e7667
  • editorSuggestWidget.selectedBackground#9bbf6542
  • editorWhitespace.foreground#cdd6c01a
  • editorWidget.background#181d16
  • focusBorder#9bbf65
  • input.background#181d16
  • input.foreground#cdd6c0
  • input.placeholderForeground#6e7667
  • list.activeSelectionBackground#9bbf6542
  • list.activeSelectionForeground#cdd6c0
  • list.hoverBackground#2e352c
  • list.inactiveSelectionBackground#9bbf6524
  • panel.background#1c221b
  • panelTitle.activeForeground#9bbf65
  • scrollbarSlider.activeBackground#cdd6c05c
  • scrollbarSlider.background#cdd6c029
  • scrollbarSlider.hoverBackground#cdd6c042
  • selection.background#9bbf654d
  • sideBar.background#1c221b
  • sideBar.foreground#cdd6c0
  • sideBarSectionHeader.background#21281f
  • sideBarTitle.foreground#9bbf65
  • statusBar.background#181d16
  • statusBar.foreground#cdd6c0
  • statusBar.noFolderBackground#181d16
  • tab.activeBackground#21281f
  • tab.activeBorderTop#9bbf65
  • tab.activeForeground#9bbf65
  • tab.border#1e241c
  • tab.inactiveBackground#1e241c
  • tab.inactiveForeground#6e7667
  • terminal.background#21281f
  • terminal.foreground#cdd6c0
  • titleBar.activeBackground#181d16
  • titleBar.activeForeground#cdd6c0
  • titleBar.inactiveBackground#181d16
  • titleBar.inactiveForeground#6e7667

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6a7560italic
string, string.quoted, string.template#a3c585
constant.numeric, constant.language, constant.character#e0b15c
keyword, keyword.control, storage, storage.type, storage.modifier#c5d86d
entity.name.function, support.function, meta.function-call.generic#9bbf65
variable, meta.definition.variable.name, variable.other.readwrite#cdd6c0
variable.parameter, parameter#aeb7a3
entity.name.type, support.type, support.class, entity.name.namespace#7fb685
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#d97e6a
keyword.operator#8cc084
entity.name.tag, punctuation.definition.tag#c5d86d
entity.other.attribute-name#9bbf65
constant.other.color, support.constant#e0b15c
entity.name.type.class#7fb685bold
markup.boldbold
markup.italicitalic
markup.heading#9bbf65bold
invalid#21281f
ThemePaint by Toqir Ahmad - VS Code Theme