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#020506
  • activityBar.border#152529
  • activityBar.foreground#25D695
  • activityBar.inactiveForeground#5A6E76
  • activityBarBadge.background#8B86FF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#8B86FF
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#25D695
  • breadcrumb.focusForeground#F0F0F0
  • breadcrumb.foreground#5A6E76
  • breadcrumbPicker.background#0A1214
  • button.background#25D695
  • button.foreground#020506
  • button.hoverBackground#3DDFAA
  • button.secondaryBackground#152529
  • button.secondaryForeground#F0F0F0
  • button.secondaryHoverBackground#1A2E33
  • charts.blue#8B86FF
  • charts.foreground#F0F0F0
  • charts.green#25D695
  • charts.lines#47BDAD
  • charts.orange#FF8C00
  • charts.purple#8B86FF
  • charts.red#F23645
  • charts.yellow#FFC125
  • commandCenter.activeBackground#0F1B1E
  • commandCenter.activeForeground#F0F0F0
  • commandCenter.background#0A1214
  • commandCenter.border#152529
  • commandCenter.foreground#8A929E
  • debugToolBar.background#0A1214
  • debugToolBar.border#152529
  • descriptionForeground#8A929E
  • diffEditor.insertedTextBackground#25D69514
  • diffEditor.removedTextBackground#F2364514
  • dropdown.background#0A1214
  • dropdown.border#152529
  • dropdown.foreground#F0F0F0
  • dropdown.listBackground#0A1214
  • editor.background#070C0E
  • editor.findMatchBackground#8B86FF40
  • editor.findMatchBorder#8B86FF
  • editor.findMatchHighlightBackground#8B86FF1C
  • editor.foreground#F0F0F0
  • editor.hoverHighlightBackground#47BDAD0A
  • editor.inactiveSelectionBackground#47BDAD10
  • editor.lineHighlightBackground#0F1B1E40
  • editor.lineHighlightBorder#0F1B1E00
  • editor.rangeHighlightBackground#47BDAD06
  • editor.selectionBackground#47BDAD24
  • editor.selectionHighlightBackground#47BDAD10
  • editor.snippetTabstopHighlightBackground#47BDAD10
  • editor.wordHighlightBackground#47BDAD14
  • editor.wordHighlightStrongBackground#47BDAD1C
  • editorBracketHighlight.foreground1#47BDAD
  • editorBracketHighlight.foreground2#8B86FF
  • editorBracketHighlight.foreground3#FFC125
  • editorBracketHighlight.foreground4#ACEECB
  • editorBracketHighlight.foreground5#FF8C00
  • editorBracketHighlight.foreground6#80D1C6
  • editorBracketMatch.background#47BDAD16
  • editorBracketMatch.border#47BDAD60
  • editorCursor.foreground#25D695
  • editorError.foreground#F23645
  • editorGroup.border#152529
  • editorGroup.dropBackground#47BDAD0C
  • editorGroupHeader.tabsBackground#040809
  • editorGroupHeader.tabsBorder#152529
  • editorGutter.addedBackground#25D695
  • editorGutter.deletedBackground#F23645
  • editorGutter.modifiedBackground#8B86FF
  • editorHoverWidget.background#0A1214
  • editorHoverWidget.border#152529
  • editorIndentGuide.activeBackground#1A2E33
  • editorIndentGuide.background#152529
  • editorInfo.foreground#47BDAD
  • editorLineNumber.activeForeground#8A929E
  • editorLineNumber.foreground#2A454D
  • editorOverviewRuler.border#152529
  • editorOverviewRuler.errorForeground#F23645
  • editorOverviewRuler.findMatchForeground#8B86FF80
  • editorOverviewRuler.infoForeground#47BDAD
  • editorOverviewRuler.warningForeground#FFC125
  • editorRuler.foreground#152529
  • editorSuggestWidget.background#0A1214
  • editorSuggestWidget.border#152529
  • editorSuggestWidget.foreground#F0F0F0
  • editorSuggestWidget.highlightForeground#25D695
  • editorSuggestWidget.selectedBackground#47BDAD12
  • editorWarning.foreground#FFC125
  • editorWhitespace.foreground#152529
  • editorWidget.background#0A1214
  • editorWidget.border#152529
  • errorForeground#F23645
  • focusBorder#47BDAD70
  • foreground#F0F0F0
  • gitDecoration.addedResourceForeground#25D695
  • gitDecoration.conflictingResourceForeground#FFC125
  • gitDecoration.deletedResourceForeground#F23645
  • gitDecoration.ignoredResourceForeground#2A454D
  • gitDecoration.modifiedResourceForeground#8B86FF
  • gitDecoration.renamedResourceForeground#47BDAD
  • gitDecoration.untrackedResourceForeground#ACEECB
  • icon.foreground#8A929E
  • input.background#0A1214
  • input.border#152529
  • input.foreground#F0F0F0
  • input.placeholderForeground#5A6E76
  • inputOption.activeBackground#47BDAD24
  • inputOption.activeBorder#47BDAD
  • inputOption.activeForeground#F0F0F0
  • inputValidation.errorBackground#F2364518
  • inputValidation.errorBorder#F23645
  • inputValidation.infoBackground#47BDAD18
  • inputValidation.infoBorder#47BDAD
  • inputValidation.warningBackground#FFC12518
  • inputValidation.warningBorder#FFC125
  • list.activeSelectionBackground#47BDAD12
  • list.activeSelectionForeground#F0F0F0
  • list.errorForeground#F23645
  • list.focusBackground#47BDAD12
  • list.focusForeground#F0F0F0
  • list.highlightForeground#25D695
  • list.hoverBackground#47BDAD08
  • list.hoverForeground#F0F0F0
  • list.inactiveSelectionBackground#47BDAD0A
  • list.inactiveSelectionForeground#F0F0F0
  • list.warningForeground#FFC125
  • merge.currentContentBackground#25D6951C
  • merge.currentHeaderBackground#25D69538
  • merge.incomingContentBackground#8B86FF1C
  • merge.incomingHeaderBackground#8B86FF38
  • minimap.errorHighlight#F2364580
  • minimap.findMatchHighlight#8B86FF60
  • minimap.selectionHighlight#47BDAD28
  • minimap.warningHighlight#FFC12580
  • minimapGutter.addedBackground#25D695
  • minimapGutter.deletedBackground#F23645
  • minimapGutter.modifiedBackground#8B86FF
  • notificationCenter.border#152529
  • notificationCenterHeader.background#0A1214
  • notificationCenterHeader.foreground#F0F0F0
  • notifications.background#0A1214
  • notifications.border#152529
  • notifications.foreground#F0F0F0
  • notificationsErrorIcon.foreground#F23645
  • notificationsInfoIcon.foreground#47BDAD
  • notificationsWarningIcon.foreground#FFC125
  • panel.background#040809
  • panel.border#152529
  • panelTitle.activeBorder#25D695
  • panelTitle.activeForeground#F0F0F0
  • panelTitle.inactiveForeground#5A6E76
  • peek.border#47BDAD60
  • peekView.border#47BDAD60
  • peekViewEditor.background#060A0C
  • peekViewEditor.matchHighlightBackground#8B86FF28
  • peekViewResult.background#040809
  • peekViewResult.fileForeground#F0F0F0
  • peekViewResult.lineForeground#8A929E
  • peekViewResult.matchHighlightBackground#8B86FF28
  • peekViewResult.selectionBackground#47BDAD12
  • peekViewResult.selectionForeground#F0F0F0
  • peekViewTitle.background#0A1214
  • peekViewTitleDescription.foreground#8A929E
  • peekViewTitleLabel.foreground#F0F0F0
  • progressBar.background#25D695
  • scrollbar.shadow#00000070
  • scrollbarSlider.activeBackground#47BDAD32
  • scrollbarSlider.background#47BDAD0E
  • scrollbarSlider.hoverBackground#47BDAD22
  • selection.background#47BDAD30
  • settings.focusedRowBackground#47BDAD06
  • settings.headerForeground#F0F0F0
  • settings.modifiedItemIndicator#25D695
  • sideBar.background#040809
  • sideBar.border#152529
  • sideBar.foreground#8A929E
  • sideBarSectionHeader.background#040809
  • sideBarSectionHeader.border#152529
  • sideBarSectionHeader.foreground#8A929E
  • sideBarTitle.foreground#F0F0F0
  • statusBar.background#020506
  • statusBar.border#152529
  • statusBar.debuggingBackground#8B86FF
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#8A929E
  • statusBar.noFolderBackground#040809
  • statusBar.noFolderForeground#8A929E
  • statusBarItem.activeBackground#47BDAD22
  • statusBarItem.errorBackground#F23645
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.hoverBackground#47BDAD16
  • statusBarItem.remoteBackground#25D695
  • statusBarItem.remoteForeground#020506
  • statusBarItem.warningBackground#FFC125
  • statusBarItem.warningForeground#020506
  • tab.activeBackground#070C0E
  • tab.activeBorderTop#25D695
  • tab.activeForeground#F0F0F0
  • tab.border#152529
  • tab.hoverBackground#0A1214
  • tab.hoverForeground#F0F0F0
  • tab.inactiveBackground#040809
  • tab.inactiveForeground#5A6E76
  • terminal.ansiBlack#152529
  • terminal.ansiBlue#8B86FF
  • terminal.ansiBrightBlack#5A6E76
  • terminal.ansiBrightBlue#ADA9FF
  • terminal.ansiBrightCyan#80D1C6
  • terminal.ansiBrightGreen#ACEECB
  • terminal.ansiBrightMagenta#FF4DAF
  • terminal.ansiBrightRed#FF5A67
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD166
  • terminal.ansiCyan#47BDAD
  • terminal.ansiGreen#25D695
  • terminal.ansiMagenta#FF0099
  • terminal.ansiRed#F23645
  • terminal.ansiWhite#F0F0F0
  • terminal.ansiYellow#FFC125
  • terminal.background#040809
  • terminal.foreground#F0F0F0
  • terminalCursor.foreground#25D695
  • titleBar.activeBackground#020506
  • titleBar.activeForeground#8A929E
  • titleBar.border#152529
  • titleBar.inactiveBackground#020506
  • titleBar.inactiveForeground#5A6E76
  • tree.indentGuidesStroke#152529
  • welcomePage.progress.foreground#25D695
  • welcomePage.tileBackground#0A1214
  • welcomePage.tileBorder#152529
  • widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3D5960italic
string, string.quoted, string.template#ACEECB
constant.character.escape, string.regexp#80D1C6
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#FF8C00
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#FF8C00italic
constant.other, variable.other.constant#80D1C6
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.void#8B86FF
keyword.control.import, keyword.control.export, keyword.control.from#8B86FF
keyword.control.flow, keyword.control.conditional, keyword.control.loop#8B86FF
keyword.operator, keyword.operator.assignment#47BDAD
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational, keyword.operator.logical#47BDAD
storage, storage.type, storage.modifier#8B86FF
entity.name.function, meta.function-call entity.name.function, support.function#FFC125
entity.name.function.method#FFC125
entity.name.type, entity.name.class, entity.name.type.class, support.class, support.type#47BDAD
entity.name.type.interface, entity.name.type.alias#47BDADitalic
entity.name.type.enum, entity.name.type.module, entity.name.namespace#47BDAD
entity.other.attribute-name#FF8C00italic
entity.name.tag#8B86FF
variable, variable.other, variable.other.readwrite#F0F0F0
variable.parameter, variable.other.parameter#F0F0F0italic
variable.language, variable.language.this, variable.language.self, variable.language.super#8B86FFitalic
variable.other.property, variable.other.object.property#8A929E
punctuation, punctuation.definition.tag, punctuation.separator, punctuation.terminator, meta.brace#8A929E
support.type.builtin, support.type.primitive#47BDAD
support.constant#80D1C6
entity.other.inherited-class#47BDADitalic underline
meta.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator#FFC125italic
entity.name.function.decorator, meta.decorator variable.other#FFC125italic
markup.heading, entity.name.section#8B86FFbold
markup.bold#FF8C00bold
markup.italic#FFC125italic
markup.underlineunderline
markup.underline.link, string.other.link#25D695
markup.inline.raw, markup.fenced_code, markup.raw#ACEECB
markup.quote#5A6E76italic
markup.list#F0F0F0
markup.inserted#25D695
markup.deleted#F23645
markup.changed#8B86FF
meta.embedded, source.groovy.embedded#F0F0F0
support.type.property-name.json#47BDAD
meta.structure.dictionary.value.json string.quoted#ACEECB
entity.name.tag.yaml#47BDAD
support.type.property-name.css, support.type.vendored.property-name.css#8A929E
support.constant.property-value.css, support.constant.color.css#FF8C00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFC125
entity.name.tag.css#8B86FF
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#47BDADitalic
variable.parameter.function.language.special.self.python#8B86FFitalic
support.function.magic.python#FFC125italic
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust#FF8C00italic
entity.name.package.go#47BDAD
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell#80D1C6
storage.type.solidity#8B86FF
meta.type.annotation, meta.return.type#47BDAD