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#18141f
  • activityBar.foreground#ff6f91
  • activityBar.inactiveForeground#7c7680
  • activityBarBadge.background#ff6f91
  • activityBarBadge.foreground#1a1a1a
  • badge.background#ff6f91
  • badge.foreground#1a1a1a
  • button.background#ff6f91
  • button.foreground#1a1a1a
  • button.hoverBackground#ff809e
  • dropdown.background#18141f
  • editor.background#211c2b
  • editor.findMatchBackground#ff6f9166
  • editor.findMatchHighlightBackground#ff6f9138
  • editor.foreground#ece3e8
  • editor.lineHighlightBackground#2e2a38
  • editor.selectionBackground#ff6f9142
  • editorBracketMatch.border#ff6f91
  • editorCursor.foreground#ff6f91
  • editorGroupHeader.tabsBackground#1e1927
  • editorIndentGuide.activeBackground1#ece3e838
  • editorIndentGuide.background1#ece3e814
  • editorLineNumber.activeForeground#ff6f91
  • editorLineNumber.foreground#7c7680
  • editorSuggestWidget.selectedBackground#ff6f9142
  • editorWhitespace.foreground#ece3e81a
  • editorWidget.background#18141f
  • focusBorder#ff6f91
  • input.background#18141f
  • input.foreground#ece3e8
  • input.placeholderForeground#7c7680
  • list.activeSelectionBackground#ff6f9142
  • list.activeSelectionForeground#ece3e8
  • list.hoverBackground#2e2a38
  • list.inactiveSelectionBackground#ff6f9124
  • panel.background#1c1825
  • panelTitle.activeForeground#ff6f91
  • scrollbarSlider.activeBackground#ece3e85c
  • scrollbarSlider.background#ece3e829
  • scrollbarSlider.hoverBackground#ece3e842
  • selection.background#ff6f914d
  • sideBar.background#1c1825
  • sideBar.foreground#ece3e8
  • sideBarSectionHeader.background#211c2b
  • sideBarTitle.foreground#ff6f91
  • statusBar.background#18141f
  • statusBar.foreground#ece3e8
  • statusBar.noFolderBackground#18141f
  • tab.activeBackground#211c2b
  • tab.activeBorderTop#ff6f91
  • tab.activeForeground#ff6f91
  • tab.border#1e1927
  • tab.inactiveBackground#1e1927
  • tab.inactiveForeground#7c7680
  • terminal.background#211c2b
  • terminal.foreground#ece3e8
  • titleBar.activeBackground#18141f
  • titleBar.activeForeground#ece3e8
  • titleBar.inactiveBackground#18141f
  • titleBar.inactiveForeground#7c7680

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6e6478italic
string, string.quoted, string.template#ffc56b
constant.numeric, constant.language, constant.character#ff9e64
keyword, keyword.control, storage, storage.type, storage.modifier#c77dff
entity.name.function, support.function, meta.function-call.generic#ff6f91
variable, meta.definition.variable.name, variable.other.readwrite#ece3e8
variable.parameter, parameter#c7bfc6
entity.name.type, support.type, support.class, entity.name.namespace#ffa45c
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ff8fab
keyword.operator#ff6f91
entity.name.tag, punctuation.definition.tag#c77dff
entity.other.attribute-name#ff6f91
constant.other.color, support.constant#ff9e64
entity.name.type.class#ffa45cbold
markup.boldbold
markup.italicitalic
markup.heading#ff6f91bold
invalid#211c2b