Skip to main content
Coding Theme

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#241227
  • activityBar.border#FC74FD
  • activityBarBadge.background#CC33CC
  • badge.background#4C2882
  • banner.background#241227
  • button.background#4C2882
  • dropdown.background#241227
  • dropdown.border#FC74FD
  • dropdown.listBackground#241227
  • editor.background#241227
  • editor.foldBackground#32174D90
  • editor.hoverHighlightBackground#6A5ACD90
  • editor.lineHighlightBackground#51288890
  • editor.selectionBackground#FF6FFF90
  • editor.selectionHighlightBackground#55555590
  • editor.wordHighlightBackground#55555560
  • editor.wordHighlightStrongBackground#4C288260
  • editor.wordHighlightStrongBorder#FFA6C960
  • editorCursor.foreground#00FF7F
  • editorGroupHeader.tabsBackground#241227
  • editorRuler.foreground#FFA6C990
  • editorSuggestWidget.focusHighlightForeground#FC0FC0
  • editorSuggestWidget.highlightForeground#FC74FD
  • editorSuggestWidget.selectedBackground#4C2882
  • editorWidget.background#241227
  • editorWidget.border#FC74FD
  • focusBorder#FC0FC0
  • icon.foreground#CC33CC
  • input.background#241227
  • input.border#FC74FD
  • list.activeSelectionBackground#4C2882
  • list.focusOutline#241227
  • list.hoverBackground#32174D
  • list.inactiveSelectionBackground#4C288260
  • menu.background#241227
  • menu.border#FC74FD
  • menu.selectionBackground#4C2882
  • notifications.background#241227
  • notifications.border#FC74FD
  • panel.background#241227
  • panel.border#FC74FD
  • pickerGroup.foreground#F77FBE
  • scrollbarSlider.activeBackground#F77FBE60
  • scrollbarSlider.background#B284BE60
  • scrollbarSlider.hoverBackground#CC33CC60
  • selection.background#FF6FFF90
  • settings.dropdownListBorder#FC74FD
  • settings.modifiedItemIndicator#FC74FD
  • settings.numberInputBackground#241227
  • settings.numberInputBorder#FC74FD
  • settings.textInputBackground#241227
  • settings.textInputBorder#FC74FD
  • sideBar.background#241227
  • sideBar.border#FC74FD
  • statusBar.background#241227
  • statusBar.border#FC74FD
  • tab.activeBackground#4C2882
  • tab.border#B284BE
  • tab.inactiveBackground#241227
  • textLink.activeForeground#CC33CC
  • textLink.foreground#FC74FD
  • titleBar.activeBackground#241227
  • titleBar.border#FC74FD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, variable, variable.other.constant, variable.other.enummember, meta.function-call, meta.function-call.arguments.python#FFFAF0—
constant.numeric, constant.language, constant.character.escape, punctuation.definition.string.begin, punctuation.definition.string.end#FC74FD—
string#FFFF9F—
keyword.operator, keyword.operator.logical.python, storage.modifier, storage.type, keyword.control, support.variable.magic#fc86aa—
variable.parameter#77B5FE—
support.function.builtin, entity.name.type, support.type#00FFFF—
entity.name.function, meta.function-call.generic#CCCCFF—
comment, string.quoted.docstring#778899—