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#0a1017
  • activityBar.foreground#3ab7e8
  • activityBar.inactiveForeground#606d78
  • activityBarBadge.background#3ab7e8
  • activityBarBadge.foreground#ffffff
  • badge.background#3ab7e8
  • badge.foreground#ffffff
  • button.background#3ab7e8
  • button.foreground#ffffff
  • button.hoverBackground#52c0eb
  • dropdown.background#0a1017
  • editor.background#0e1620
  • editor.findMatchBackground#3ab7e866
  • editor.findMatchHighlightBackground#3ab7e838
  • editor.foreground#c4d8e4
  • editor.lineHighlightBackground#1c242d
  • editor.selectionBackground#3ab7e842
  • editorBracketMatch.border#3ab7e8
  • editorCursor.foreground#3ab7e8
  • editorGroupHeader.tabsBackground#0d141d
  • editorIndentGuide.activeBackground1#c4d8e438
  • editorIndentGuide.background1#c4d8e414
  • editorLineNumber.activeForeground#3ab7e8
  • editorLineNumber.foreground#606d78
  • editorSuggestWidget.selectedBackground#3ab7e842
  • editorWhitespace.foreground#c4d8e41a
  • editorWidget.background#0a1017
  • focusBorder#3ab7e8
  • input.background#0a1017
  • input.foreground#c4d8e4
  • input.placeholderForeground#606d78
  • list.activeSelectionBackground#3ab7e842
  • list.activeSelectionForeground#c4d8e4
  • list.hoverBackground#1c242d
  • list.inactiveSelectionBackground#3ab7e824
  • panel.background#0c131c
  • panelTitle.activeForeground#3ab7e8
  • scrollbarSlider.activeBackground#c4d8e45c
  • scrollbarSlider.background#c4d8e429
  • scrollbarSlider.hoverBackground#c4d8e442
  • selection.background#3ab7e84d
  • sideBar.background#0c131c
  • sideBar.foreground#c4d8e4
  • sideBarSectionHeader.background#0e1620
  • sideBarTitle.foreground#3ab7e8
  • statusBar.background#0a1017
  • statusBar.foreground#c4d8e4
  • statusBar.noFolderBackground#0a1017
  • tab.activeBackground#0e1620
  • tab.activeBorderTop#3ab7e8
  • tab.activeForeground#3ab7e8
  • tab.border#0d141d
  • tab.inactiveBackground#0d141d
  • tab.inactiveForeground#606d78
  • terminal.background#0e1620
  • terminal.foreground#c4d8e4
  • titleBar.activeBackground#0a1017
  • titleBar.activeForeground#c4d8e4
  • titleBar.inactiveBackground#0a1017
  • titleBar.inactiveForeground#606d78

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#46586aitalic
string, string.quoted, string.template#7fe0d4
constant.numeric, constant.language, constant.character#ffb37a
keyword, keyword.control, storage, storage.type, storage.modifier#5cc8ff
entity.name.function, support.function, meta.function-call.generic#3ab7e8
variable, meta.definition.variable.name, variable.other.readwrite#c4d8e4
variable.parameter, parameter#a3b5c1
entity.name.type, support.type, support.class, entity.name.namespace#ffd98a
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ff8aa0
keyword.operator#5fd6ff
entity.name.tag, punctuation.definition.tag#5cc8ff
entity.other.attribute-name#3ab7e8
constant.other.color, support.constant#ffb37a
entity.name.type.class#ffd98abold
markup.boldbold
markup.italicitalic
markup.heading#3ab7e8bold
invalid#0e1620
ThemePaint by Toqir Ahmad - VS Code Theme