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#13161e
  • activityBar.border#10131a
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#454860
  • badge.background#fb62f6
  • badge.foreground#1e212b
  • breadcrumb.foreground#888aaa
  • button.background#645dd7
  • button.foreground#ffffff
  • button.hoverBackground#7870e8
  • dropdown.background#1e212b
  • editor.background#1e212b
  • editor.findMatchBackground#fb62f640
  • editor.findMatchHighlightBackground#fb62f620
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#645dd720
  • editor.lineHighlightBackground#232638
  • editor.selectionBackground#645dd740
  • editorCursor.foreground#fb62f6
  • editorError.foreground#f14c4c
  • editorGroup.border#10131a
  • editorGroupHeader.tabsBackground#181b24
  • editorIndentGuide.activeBackground1#3a3d58
  • editorIndentGuide.background1#252838
  • editorLineNumber.activeForeground#645dd7
  • editorLineNumber.foreground#2e3145
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#2e3145
  • focusBorder#645dd7
  • gitDecoration.addedResourceForeground#5aa870
  • gitDecoration.deletedResourceForeground#fb62f6
  • gitDecoration.ignoredResourceForeground#3a3d58
  • gitDecoration.modifiedResourceForeground#645dd7
  • gitDecoration.untrackedResourceForeground#5aa870
  • input.background#1e212b
  • input.border#2e3145
  • list.activeSelectionBackground#2e3145
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#252838
  • list.inactiveSelectionBackground#252838
  • notifications.background#1e212b
  • panel.background#181b24
  • panel.border#10131a
  • peekView.border#645dd7
  • peekViewEditor.background#181b24
  • peekViewEditor.matchHighlightBackground#fb62f630
  • peekViewResult.background#13161e
  • peekViewResult.matchHighlightBackground#fb62f630
  • peekViewTitle.background#1e212b
  • quickInput.background#181b24
  • scrollbarSlider.activeBackground#645dd760
  • scrollbarSlider.background#3a3d5860
  • scrollbarSlider.hoverBackground#4a4d7080
  • sideBar.background#181b24
  • sideBar.border#10131a
  • sideBar.foreground#c8c9e0
  • statusBar.background#645dd7
  • statusBar.debuggingBackground#fb62f6
  • statusBar.debuggingBorder#fb62f6
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#645dd7
  • tab.activeBackground#1e212b
  • tab.activeForeground#ffffff
  • tab.border#13161e
  • tab.inactiveBackground#181b24
  • tab.inactiveForeground#666880
  • terminal.background#181b24
  • textLink.activeForeground#ffffff
  • textLink.foreground#fb62f6
  • titleBar.activeBackground#13161e
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#13161e
  • titleBar.inactiveForeground#454860

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3a3d58italic
keyword, keyword.control, keyword.operator.new, storage.modifier#fb62f6
storage.type, keyword.declaration#fb62f6italic
entity.name.function, meta.definition.method entity.name.function#a09af0
meta.function-call.generic, variable.function#645dd7
string, string.quoted, string.template#5aa870
constant.numeric#ff8427
constant.language#fb62f6
entity.name.type, entity.name.class, support.class#ff8427
support.type, meta.type.annotation entity.name.type#a09af0
variable.parameter#c8c0f8italic
variable, variable.other#ffffff
punctuation, meta.brace, punctuation.separator, punctuation.terminator#454860
keyword.operator#645dd7
meta.decorator, entity.name.function.decorator, punctuation.decorator#ff8427italic
support.function, support.function.builtin#645dd7
variable.other.property, variable.other.object.property, support.variable.property#c8c9e0
entity.name.tag#fb62f6
entity.other.attribute-name#a09af0
string.regexp#ff8427
constant.character.escape#fb62f6