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#1a1a24
  • activityBar.activeBorder#FF6347
  • activityBar.background#0a0a0f
  • activityBar.border#2F4F4F
  • activityBar.foreground#9370DB
  • activityBar.inactiveForeground#708090
  • activityBarBadge.background#DC143C
  • activityBarBadge.foreground#ffffff
  • badge.background#DC143C
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#FF6347
  • breadcrumb.focusForeground#9370DB
  • breadcrumb.foreground#888899
  • button.background#9370DB
  • button.foreground#ffffff
  • button.hoverBackground#8B008B
  • button.secondaryBackground#36454F
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4F5F6F
  • debugToolBar.background#1a1a24
  • debugToolBar.border#9370DB
  • diffEditor.border#2F4F4F
  • diffEditor.insertedTextBackground#9370DB30
  • diffEditor.removedTextBackground#DC143C30
  • dropdown.background#1a1a24
  • dropdown.border#9370DB
  • dropdown.foreground#ffffff
  • editor.background#0f0f14
  • editor.findMatchBackground#FF634780
  • editor.findMatchHighlightBackground#FF634750
  • editor.foreground#E8E8F0
  • editor.inactiveSelectionBackground#9370DB50
  • editor.lineHighlightBackground#1a1a24
  • editor.selectionBackground#9370DB80
  • editor.selectionHighlightBackground#8B008B40
  • editor.wordHighlightBackground#6A0DAD30
  • editor.wordHighlightStrongBackground#6A0DAD50
  • editorBracketMatch.background#9370DB50
  • editorBracketMatch.border#8B008B
  • editorCursor.foreground#FF6347
  • editorError.background#8B000080
  • editorError.border#DC143C
  • editorError.foreground#8B0000
  • editorGroupHeader.tabsBackground#0a0a0f
  • editorGroupHeader.tabsBorder#2F4F4F
  • editorHint.foreground#C0C0C0
  • editorHoverWidget.background#1a1a24
  • editorHoverWidget.border#9370DB
  • editorIndentGuide.activeBackground1#9370DB
  • editorIndentGuide.background1#36454F
  • editorInfo.foreground#9370DB
  • editorLineNumber.activeForeground#9370DB
  • editorLineNumber.foreground#708090
  • editorSuggestWidget.background#1a1a24
  • editorSuggestWidget.border#9370DB
  • editorSuggestWidget.foreground#E8E8F0
  • editorSuggestWidget.highlightForeground#FF6347
  • editorSuggestWidget.selectedBackground#9370DB60
  • editorWarning.foreground#FF6347
  • editorWhitespace.foreground#2F4F4F
  • editorWidget.background#1a1a24
  • editorWidget.border#9370DB
  • editorWidget.foreground#E8E8F0
  • focusBorder#9370DB
  • gitDecoration.conflictingResourceForeground#8B0000
  • gitDecoration.deletedResourceForeground#DC143C
  • gitDecoration.ignoredResourceForeground#708090
  • gitDecoration.modifiedResourceForeground#9370DB
  • gitDecoration.untrackedResourceForeground#FF6347
  • input.background#1a1a24
  • input.border#9370DB
  • input.foreground#ffffff
  • input.placeholderForeground#708090
  • inputOption.activeBorder#FF6347
  • inputValidation.errorBackground#2a0a0a
  • inputValidation.errorBorder#DC143C
  • inputValidation.warningBackground#2a1a14
  • inputValidation.warningBorder#FF6347
  • list.activeSelectionBackground#9370DB80
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff8888
  • list.focusBackground#9370DB80
  • list.focusForeground#ffffff
  • list.highlightForeground#FF6347
  • list.hoverBackground#2F4F4F
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#36454F
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#FF6347
  • merge.border#DC143C
  • merge.currentContentBackground#9370DB30
  • merge.currentHeaderBackground#9370DB70
  • merge.incomingContentBackground#FF634730
  • merge.incomingHeaderBackground#FF634770
  • minimap.background#0a0a0f
  • minimap.errorHighlight#DC143C
  • minimap.findMatchHighlight#FF634780
  • minimap.selectionHighlight#9370DB80
  • minimap.warningHighlight#FF6347
  • minimapGutter.addedBackground#9370DB
  • minimapGutter.deletedBackground#DC143C
  • minimapGutter.modifiedBackground#708090
  • notificationCenter.border#2F4F4F
  • notificationCenterHeader.background#1a1a24
  • notificationLink.foreground#FF6347
  • notifications.background#1a1a24
  • notifications.border#9370DB
  • notifications.foreground#ffffff
  • panel.background#0f0f14
  • panel.border#2F4F4F
  • panelTitle.activeBorder#9370DB
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#888899
  • peekView.border#9370DB
  • peekViewEditor.background#1a1a24
  • peekViewEditor.matchHighlightBackground#9370DB50
  • peekViewResult.background#0f0f14
  • peekViewResult.matchHighlightBackground#9370DB50
  • peekViewResult.selectionBackground#9370DB80
  • peekViewTitle.background#1a1a24
  • peekViewTitleDescription.foreground#888899
  • peekViewTitleLabel.foreground#9370DB
  • scrollbarSlider.activeBackground#9370DBA0
  • scrollbarSlider.background#70809060
  • scrollbarSlider.hoverBackground#70809080
  • sideBar.background#0f0f14
  • sideBar.border#2F4F4F
  • sideBar.foreground#d8d8e8
  • sideBarSectionHeader.background#1a1a24
  • sideBarSectionHeader.border#36454F
  • sideBarSectionHeader.foreground#FF6347
  • sideBarTitle.foreground#9370DB
  • statusBar.background#6A0DAD
  • statusBar.border#2F4F4F
  • statusBar.debuggingBackground#DC143C
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#36454F
  • statusBarItem.errorBackground#8B0000
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#9370DB
  • statusBarItem.prominentHoverBackground#8B008B
  • statusBarItem.warningBackground#FF6347
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#1a1a24
  • tab.activeBorder#0a0a0f
  • tab.activeBorderTop#9370DB
  • tab.activeForeground#ffffff
  • tab.border#1a1a1a
  • tab.hoverBackground#1a1a24
  • tab.hoverBorder#8B008B
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#0f0f14
  • tab.inactiveForeground#888899
  • terminal.ansiBlack#1C1C1C
  • terminal.ansiBlue#6A0DAD
  • terminal.ansiBrightBlack#36454F
  • terminal.ansiBrightBlue#9370DB
  • terminal.ansiBrightCyan#DA70D6
  • terminal.ansiBrightGreen#90A0B0
  • terminal.ansiBrightMagenta#BA55D3
  • terminal.ansiBrightRed#FF6347
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#E8E8E8
  • terminal.ansiCyan#8B008B
  • terminal.ansiGreen#708090
  • terminal.ansiMagenta#9370DB
  • terminal.ansiRed#DC143C
  • terminal.ansiWhite#F5F5DC
  • terminal.ansiYellow#C0C0C0
  • terminal.background#0f0f14
  • terminal.foreground#E8E8F0
  • terminalCursor.foreground#FF6347
  • titleBar.activeBackground#0a0a0f
  • titleBar.activeForeground#9370DB
  • titleBar.border#2F4F4F
  • titleBar.inactiveBackground#0a0a0f
  • titleBar.inactiveForeground#708090

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#708090italic
variable, string constant.other.placeholder#9370DB
keyword, storage.type, storage.modifier#8B008Bbold
keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#FF6347
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FF4500bold
entity.name.type.class, entity.name.class, support.type, support.class#708090bold
string, constant.other.symbol, constant.other.key, entity.name.tag, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#F5F5DC
constant.numeric, constant.language, constant.character, constant#BA55D3
entity.name.type, entity.other.inherited-class, support.type#6A0DAD
variable.other.property, variable.other.object.property, variable.object.property, support.variable.property#9370DB
variable.other.constant, constant.language.boolean, constant.language.null, constant.language.undefined#C0C0C0bold
variable.parameter, meta.parameter#DA70D6italic
keyword.control.import, keyword.control.from, keyword.control.export, meta.import#8B008Bbold
entity.name.tag, meta.tag, markup.deleted.git_gutter#FF6347
entity.other.attribute-name#9370DBitalic
markup.heading, markup.heading entity.name#FF6347bold
markup.bold, punctuation.definition.bold#9370DBbold
markup.italic, punctuation.definition.italic#BA55D3italic
markup.inline.raw, markup.fenced_code.block#F5F5DC
markup.underline.link, string.other.link#6A0DADunderline
markup.quote#708090italic
markup.list#9370DB
markup.inserted, markup.inserted.git_gutter#9370DB
markup.deleted, markup.deleted.git_gutter#DC143C
markup.changed, markup.changed.git_gutter#FF6347
invalid, invalid.illegal, invalid.broken#8B0000bold underline
invalid.deprecated#708090italic strikethrough
string.regexp#FF4500
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double.json#9370DB
punctuation, meta.brace, meta.delimiter#C0C0C0
meta.decorator, punctuation.decorator#8B008Bbold
variable.language.this, variable.language.self, variable.language.super#FF6347bold italic
entity.name.namespace, entity.name.type.module#6A0DAD
storage.type.annotation, punctuation.definition.annotation#BA55D3
entity.other.attribute-name.class.css#708090
entity.other.attribute-name.id.css#9370DB
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#FF6347
keyword.other.DML.sql, keyword.other.DDL.create.II.sql#8B008Bbold