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#131f18
  • activityBar.foreground#6abf69
  • activityBar.inactiveForeground#697869
  • activityBarBadge.background#6abf69
  • activityBarBadge.foreground#1a1a1a
  • badge.background#6abf69
  • badge.foreground#1a1a1a
  • button.background#6abf69
  • button.foreground#1a1a1a
  • button.hoverBackground#7cc77b
  • dropdown.background#131f18
  • editor.background#1a2b22
  • editor.findMatchBackground#6abf6966
  • editor.findMatchHighlightBackground#6abf6938
  • editor.foreground#c9d6c0
  • editor.lineHighlightBackground#28382f
  • editor.selectionBackground#6abf6942
  • editorBracketMatch.border#6abf69
  • editorCursor.foreground#6abf69
  • editorGroupHeader.tabsBackground#17271f
  • editorIndentGuide.activeBackground1#c9d6c038
  • editorIndentGuide.background1#c9d6c014
  • editorLineNumber.activeForeground#6abf69
  • editorLineNumber.foreground#697869
  • editorSuggestWidget.selectedBackground#6abf6942
  • editorWhitespace.foreground#c9d6c01a
  • editorWidget.background#131f18
  • focusBorder#6abf69
  • input.background#131f18
  • input.foreground#c9d6c0
  • input.placeholderForeground#697869
  • list.activeSelectionBackground#6abf6942
  • list.activeSelectionForeground#c9d6c0
  • list.hoverBackground#28382f
  • list.inactiveSelectionBackground#6abf6924
  • panel.background#16251d
  • panelTitle.activeForeground#6abf69
  • scrollbarSlider.activeBackground#c9d6c05c
  • scrollbarSlider.background#c9d6c029
  • scrollbarSlider.hoverBackground#c9d6c042
  • selection.background#6abf694d
  • sideBar.background#16251d
  • sideBar.foreground#c9d6c0
  • sideBarSectionHeader.background#1a2b22
  • sideBarTitle.foreground#6abf69
  • statusBar.background#131f18
  • statusBar.foreground#c9d6c0
  • statusBar.noFolderBackground#131f18
  • tab.activeBackground#1a2b22
  • tab.activeBorderTop#6abf69
  • tab.activeForeground#6abf69
  • tab.border#17271f
  • tab.inactiveBackground#17271f
  • tab.inactiveForeground#697869
  • terminal.background#1a2b22
  • terminal.foreground#c9d6c0
  • titleBar.activeBackground#131f18
  • titleBar.activeForeground#c9d6c0
  • titleBar.inactiveBackground#131f18
  • titleBar.inactiveForeground#697869

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5f7a64italic
string, string.quoted, string.template#a3d977
constant.numeric, constant.language, constant.character#e0a458
keyword, keyword.control, storage, storage.type, storage.modifier#8fbf5f
entity.name.function, support.function, meta.function-call.generic#6abf69
variable, meta.definition.variable.name, variable.other.readwrite#c9d6c0
variable.parameter, parameter#aab7a4
entity.name.type, support.type, support.class, entity.name.namespace#bfd97f
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#e0876f
keyword.operator#79c2a3
entity.name.tag, punctuation.definition.tag#8fbf5f
entity.other.attribute-name#6abf69
constant.other.color, support.constant#e0a458
entity.name.type.class#bfd97fbold
markup.boldbold
markup.italicitalic
markup.heading#6abf69bold
invalid#1a2b22
ThemePaint by Toqir Ahmad - VS Code Theme