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#24262b
  • activityBar.foreground#f1f2f4
  • activityBarBadge.background#70b2ff
  • activityBarBadge.foreground#122238
  • badge.background#70b2ff
  • badge.foreground#122238
  • button.background#70b2ff
  • button.foreground#122238
  • button.secondaryBackground#29394e
  • button.secondaryForeground#f1f2f4
  • descriptionForeground#afb3bb
  • disabledForeground#afb3bb
  • dropdown.background#25262a
  • dropdown.border#42454e
  • dropdown.foreground#f1f2f4
  • editor.background#1c1d20
  • editor.foreground#f1f2f4
  • editor.selectionBackground#26374d
  • editorCursor.foreground#70b2ff
  • editorError.foreground#ff8f98
  • editorGroup.border#42454e
  • editorGroupHeader.tabsBackground#24262b
  • editorLineNumber.foreground#afb3bb
  • editorWidget.background#25262a
  • editorWidget.foreground#f1f2f4
  • errorForeground#ff8f98
  • focusBorder#70b2ff
  • foreground#f1f2f4
  • input.background#25262a
  • input.border#3b3e46
  • input.foreground#f1f2f4
  • input.placeholderForeground#afb3bb
  • list.activeSelectionBackground#26374d
  • list.activeSelectionForeground#f1f2f4
  • list.highlightForeground#70b2ff
  • list.hoverBackground#292b30
  • list.inactiveSelectionBackground#26374d
  • list.inactiveSelectionForeground#f1f2f4
  • menu.background#25262a
  • menu.border#42454e
  • menu.foreground#f1f2f4
  • panel.border#42454e
  • progressBar.background#70b2ff
  • quickInput.background#25262a
  • sideBar.background#24262b
  • sideBar.border#42454e
  • sideBar.foreground#f1f2f4
  • sideBarSectionHeader.background#25262a
  • statusBar.background#24262b
  • statusBar.border#42454e
  • statusBar.foreground#f1f2f4
  • tab.activeBackground#1c1d20
  • tab.activeBorder#70b2ff
  • tab.inactiveBackground#24262b
  • tab.inactiveForeground#afb3bb
  • terminal.background#1c1d20
  • terminal.foreground#f1f2f4
  • textLink.activeForeground#70b2ff
  • textLink.foreground#70b2ff
  • titleBar.activeBackground#24262b
  • titleBar.activeForeground#f1f2f4
  • titleBar.border#42454e
  • titleBar.inactiveBackground#24262b
  • titleBar.inactiveForeground#afb3bb
  • toolbar.hoverBackground#292b30
  • widget.border#42454e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AFB3BB
string, constant.other.symbol#94D6AB
keyword, storage#D9ACF3
constant.numeric, constant.language#E8BC82
entity.name.function, support.function#70B2FF
entity.name.type, support.type, support.class#8BCDD8
invalid#ff8f98
markup.heading#70b2ffbold
Silver Studio — Hermes Theme by wukangcheng1994 - VS Code Theme