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.activeBackground#181825
  • activityBar.activeBorder#ff4ecd
  • activityBar.background#181825
  • activityBar.foreground#ff4ecd
  • activityBar.inactiveForeground#bfc7d5
  • activityBarBadge.background#ff4ecd
  • activityBarBadge.foreground#181825
  • commandCenter.background#181825
  • commandCenter.border#23272e
  • editor.background#181825
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#23272e20
  • editor.lineHighlightBackground#23272e
  • editor.lineHighlightBorder#23272e
  • editor.selectionBackground#23272e40
  • editor.selectionHighlightBackground#23272e20
  • editorCursor.foreground#ff4ecd
  • editorGroup.background#181825
  • editorGroupHeader.tabsBackground#181825
  • editorHoverWidget.background#181825
  • editorHoverWidget.border#23272e
  • editorHoverWidget.statusBarBackground#181825
  • editorIndentGuide.activeBackground#00eaff
  • editorIndentGuide.background#393e4b
  • editorLineNumber.activeForeground#ff4ecd
  • editorLineNumber.foreground#7a869a
  • editorSuggestWidget.background#181825
  • editorSuggestWidget.border#424242
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#00ffd0
  • editorSuggestWidget.selectedBackground#00ffd040
  • editorWidget.resizeBorder#424242
  • focusBorder#424242
  • inputOption.activeBorder#424242
  • inputValidation.infoBorder#424242
  • listFilterWidget.outline#424242
  • menu.background#181825
  • menubar.selectionBackground#23272e
  • panelTitle.activeBorder#424242
  • peekView.border#424242
  • peekViewEditor.background#23272e
  • peekViewEditor.matchHighlightBackground#ffe15640
  • peekViewEditorGutter.background#23272e
  • peekViewResult.background#181825
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#7a869a
  • peekViewResult.matchHighlightBackground#ffe15640
  • peekViewResult.selectionBackground#23272e40
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#23272e
  • peekViewTitleDescription.foreground#7a869a
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.foreground#ffffff
  • quickInput.background#181825
  • quickInputList.focusBackground#23272e
  • quickInputList.focusIconForeground#ffffff
  • searchEditor.textInputBorder#424242
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#424242
  • sideBar.background#181825
  • sideBar.border#23272e
  • sideBar.foreground#ffffff
  • statusBar.background#181825
  • statusBar.border#23272e
  • statusBar.foreground#ffffff
  • statusBarItem.activeBackground#23272e40
  • statusBarItem.errorBackground#ff6b6b
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#23272e20
  • statusBarItem.prominentBackground#23272e
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#23272e60
  • statusBarItem.remoteBackground#23272e
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#ffe156
  • statusBarItem.warningForeground#181825
  • tab.activeBackground#181825
  • tab.activeForeground#ffffff
  • tab.hoverBackground#181825
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#181825
  • tab.inactiveForeground#7a869a
  • tab.unfocusedActiveBackground#181825
  • tab.unfocusedHoverBackground#181825
  • tab.unfocusedHoverForeground#7a869a
  • tab.unfocusedInactiveBackground#181825
  • titleBar.activeBackground#181825
  • titleBar.inactiveBackground#181825

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag.html, punctuation.definition.tag.xml#ff4ecd—
entity.other.attribute-name.html, entity.other.attribute-name.xml#00ffd0—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#ff6b6b—
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#ffd700—
support.type.property-name.json#ff4ecd—
string.quoted.double.json#ffe156—
variable, string constant.other.placeholder#00ffd0—
keyword, storage.type, storage.modifier, keyword.control, constant.language, support.type.primitive#ff4ecd—
entity.name.function, meta.function-call, support.function, variable.function#00eaff—
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple#ffe156—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#b983ff—
constant, constant.character, constant.character.escape, constant.other#b983ff—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical#ffffff—
meta.object-literal.key, meta.object-literal.key.js, meta.object-literal.key.ts, meta.object-literal.key.json, support.type.property-name.json, support.type.property-name.object, variable.object.property#ff4ecd—
comment, punctuation.definition.comment, string.comment#7a869aitalic
variable.parameter, meta.parameter, meta.function.parameters.js, meta.parameters.js, variable.other.readwrite#ff6b9d—