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#1b1926
  • activityBar.foreground#ff7edb
  • activityBar.inactiveForeground#888690
  • activityBarBadge.background#ff7edb
  • activityBarBadge.foreground#1a1a1a
  • badge.background#ff7edb
  • badge.foreground#1a1a1a
  • button.background#ff7edb
  • button.foreground#1a1a1a
  • button.hoverBackground#ff8ddf
  • dropdown.background#1b1926
  • editor.background#262335
  • editor.findMatchBackground#ff7edb66
  • editor.findMatchHighlightBackground#ff7edb38
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#333041
  • editor.selectionBackground#ff7edb42
  • editorBracketMatch.border#ff7edb
  • editorCursor.foreground#ff7edb
  • editorGroupHeader.tabsBackground#222030
  • editorIndentGuide.activeBackground1#ffffff38
  • editorIndentGuide.background1#ffffff14
  • editorLineNumber.activeForeground#ff7edb
  • editorLineNumber.foreground#888690
  • editorSuggestWidget.selectedBackground#ff7edb42
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#1b1926
  • focusBorder#ff7edb
  • input.background#1b1926
  • input.foreground#ffffff
  • input.placeholderForeground#888690
  • list.activeSelectionBackground#ff7edb42
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#333041
  • list.inactiveSelectionBackground#ff7edb24
  • panel.background#211e2e
  • panelTitle.activeForeground#ff7edb
  • scrollbarSlider.activeBackground#ffffff5c
  • scrollbarSlider.background#ffffff29
  • scrollbarSlider.hoverBackground#ffffff42
  • selection.background#ff7edb4d
  • sideBar.background#211e2e
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#262335
  • sideBarTitle.foreground#ff7edb
  • statusBar.background#1b1926
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1b1926
  • tab.activeBackground#262335
  • tab.activeBorderTop#ff7edb
  • tab.activeForeground#ff7edb
  • tab.border#222030
  • tab.inactiveBackground#222030
  • tab.inactiveForeground#888690
  • terminal.background#262335
  • terminal.foreground#ffffff
  • titleBar.activeBackground#1b1926
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#1b1926
  • titleBar.inactiveForeground#888690

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#848bbditalic
string, string.quoted, string.template#ff8b39
constant.numeric, constant.language, constant.character#f97e72
keyword, keyword.control, storage, storage.type, storage.modifier#fede5d
entity.name.function, support.function, meta.function-call.generic#36f9f6
variable, meta.definition.variable.name, variable.other.readwrite#ffffff
variable.parameter, parameter#d8d7db
entity.name.type, support.type, support.class, entity.name.namespace#fe4450
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#72f1b8
keyword.operator#ff7edb
entity.name.tag, punctuation.definition.tag#fede5d
entity.other.attribute-name#36f9f6
constant.other.color, support.constant#f97e72
entity.name.type.class#fe4450bold
markup.boldbold
markup.italicitalic
markup.heading#ff7edbbold
invalid#262335
ThemePaint by Toqir Ahmad - VS Code Theme