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#191b21
  • activityBar.foreground#00e8c6
  • activityBar.inactiveForeground#73727b
  • activityBarBadge.background#00e8c6
  • activityBarBadge.foreground#1a1a1a
  • badge.background#00e8c6
  • badge.foreground#1a1a1a
  • button.background#00e8c6
  • button.foreground#1a1a1a
  • button.hoverBackground#1febcd
  • dropdown.background#191b21
  • editor.background#23262e
  • editor.findMatchBackground#00e8c666
  • editor.findMatchHighlightBackground#00e8c638
  • editor.foreground#d5ced9
  • editor.lineHighlightBackground#30333b
  • editor.selectionBackground#00e8c642
  • editorBracketMatch.border#00e8c6
  • editorCursor.foreground#00e8c6
  • editorGroupHeader.tabsBackground#202229
  • editorIndentGuide.activeBackground1#d5ced938
  • editorIndentGuide.background1#d5ced914
  • editorLineNumber.activeForeground#00e8c6
  • editorLineNumber.foreground#73727b
  • editorSuggestWidget.selectedBackground#00e8c642
  • editorWhitespace.foreground#d5ced91a
  • editorWidget.background#191b21
  • focusBorder#00e8c6
  • input.background#191b21
  • input.foreground#d5ced9
  • input.placeholderForeground#73727b
  • list.activeSelectionBackground#00e8c642
  • list.activeSelectionForeground#d5ced9
  • list.hoverBackground#30333b
  • list.inactiveSelectionBackground#00e8c624
  • panel.background#1e2128
  • panelTitle.activeForeground#00e8c6
  • scrollbarSlider.activeBackground#d5ced95c
  • scrollbarSlider.background#d5ced929
  • scrollbarSlider.hoverBackground#d5ced942
  • selection.background#00e8c64d
  • sideBar.background#1e2128
  • sideBar.foreground#d5ced9
  • sideBarSectionHeader.background#23262e
  • sideBarTitle.foreground#00e8c6
  • statusBar.background#191b21
  • statusBar.foreground#d5ced9
  • statusBar.noFolderBackground#191b21
  • tab.activeBackground#23262e
  • tab.activeBorderTop#00e8c6
  • tab.activeForeground#00e8c6
  • tab.border#202229
  • tab.inactiveBackground#202229
  • tab.inactiveForeground#73727b
  • terminal.background#23262e
  • terminal.foreground#d5ced9
  • titleBar.activeBackground#191b21
  • titleBar.activeForeground#d5ced9
  • titleBar.inactiveBackground#191b21
  • titleBar.inactiveForeground#73727b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6c6783italic
string, string.quoted, string.template#96e072
constant.numeric, constant.language, constant.character#f39c12
keyword, keyword.control, storage, storage.type, storage.modifier#c74ded
entity.name.function, support.function, meta.function-call.generic#ffe66d
variable, meta.definition.variable.name, variable.other.readwrite#d5ced9
variable.parameter, parameter#b5b0ba
entity.name.type, support.type, support.class, entity.name.namespace#7cb7ff
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ee5d43
keyword.operator#00e8c6
entity.name.tag, punctuation.definition.tag#c74ded
entity.other.attribute-name#ffe66d
constant.other.color, support.constant#f39c12
entity.name.type.class#7cb7ffbold
markup.boldbold
markup.italicitalic
markup.heading#00e8c6bold
invalid#23262e
ThemePaint by Toqir Ahmad - VS Code Theme