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.activeBorder#86a9ff
  • activityBar.background#0a0c10
  • activityBar.border#303339
  • activityBar.foreground#bdc1ca
  • activityBar.inactiveForeground#84878f
  • activityBarBadge.background#86a9ff
  • activityBarBadge.foreground#17191e
  • badge.background#284992
  • badge.foreground#d4d8e2
  • breadcrumb.activeSelectionForeground#84878f
  • breadcrumb.focusForeground#bdc1ca
  • breadcrumb.foreground#84878f
  • breadcrumbPicker.background#24262c
  • button.background#86a9ff
  • button.foreground#17191e
  • button.hoverBackground#7796e0
  • button.secondaryBackground#303339
  • button.secondaryForeground#bdc1ca
  • button.secondaryHoverBackground#2d3036
  • charts.blue#8bacfe
  • charts.green#a1c861
  • charts.orange#ff9946
  • charts.purple#bfa0ee
  • charts.red#ff8d90
  • charts.yellow#e1b834
  • checkbox.background#303339
  • checkbox.border#303339
  • debugConsole.errorForeground#ff8d90
  • debugConsole.infoForeground#9b9ea7
  • debugConsole.sourceForeground#9b9ea7
  • debugConsole.warningForeground#e5b700
  • debugConsoleInputIcon.foreground#bfa0ee
  • debugExceptionWidget.background#851a27
  • debugExceptionWidget.border#962631
  • debugIcon.breakpointCurrentStackframeForeground#e1b834
  • debugIcon.breakpointDisabledForeground#9b9ea7
  • debugIcon.breakpointForeground#e97377
  • debugIcon.breakpointStackframeForeground#a1c861
  • debugIcon.breakpointUnverifiedForeground#9b9ea7
  • debugIcon.continueForeground#8bacfe
  • debugIcon.disconnectForeground#ff8d90
  • debugIcon.pauseForeground#8bacfe
  • debugIcon.restartForeground#a1c861
  • debugIcon.startForeground#a1c861
  • debugIcon.stepBackForeground#8bacfe
  • debugIcon.stepIntoForeground#8bacfe
  • debugIcon.stepOutForeground#8bacfe
  • debugIcon.stepOverForeground#8bacfe
  • debugIcon.stopForeground#ff8d90
  • debugTokenExpression.boolean#92b1ff
  • debugTokenExpression.error#ff8d90
  • debugTokenExpression.name#bdc1ca
  • debugTokenExpression.number#92b1ff
  • debugTokenExpression.string#a3ce57
  • debugTokenExpression.value#a3ce57
  • debugToolBar.background#24262c
  • debugView.exceptionLabelBackground#851a27
  • descriptionForeground#84878f
  • diffEditor.diagonalFill#3d3f46
  • diffEditor.insertedLineBackground#3f58214d
  • diffEditor.insertedTextBackground#3e5815b3
  • diffEditor.removedLineBackground#7e34324d
  • diffEditor.removedTextBackground#7c2c2fb3
  • disabledForeground#84878f
  • dropdown.background#24262c
  • dropdown.border#24262c
  • dropdown.foreground#bdc1ca
  • dropdown.listBackground#24262c
  • editor.background#17191e
  • editor.findMatchBackground#755c00
  • editor.findMatchHighlightBackground#5a4400bf
  • editor.focusedStackFrameHighlightBackground#9b750099
  • editor.foldBackground#24262cb3
  • editor.foreground#bdc1ca
  • editor.inlineValuesForeground#84878f
  • editor.lineHighlightBackground#2a2c32b3
  • editor.linkedEditingBackground#004e4f
  • editor.selectionBackground#424f6db3
  • editor.selectionHighlightBackground#494d5480
  • editor.stackFrameHighlightBackground#63970080
  • editor.wordHighlightBackground#63656e80
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#63656e80
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketHighlight.foreground1#c5a0fb
  • editorBracketHighlight.foreground2#ff9396
  • editorBracketHighlight.foreground3#ff9e51
  • editorBracketHighlight.foreground4#e0b627
  • editorBracketHighlight.foreground5#a3ce57
  • editorBracketHighlight.foreground6#49c3c5
  • editorBracketHighlight.unexpectedBracket.foreground#84878f
  • editorBracketMatch.background#63656e80
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#84878f
  • editorCursor.foreground#bacdff
  • editorError.foreground#f6676f
  • editorGhostText.foreground#84878f
  • editorGroup.border#303339
  • editorGroup.dropBackground#494d5480
  • editorGroupHeader.tabsBackground#0a0c10
  • editorGroupHeader.tabsBorder#303339
  • editorGutter.addedBackground#677e4a
  • editorGutter.deletedBackground#9c5e62
  • editorGutter.modifiedBackground#5b6f9e
  • editorHint.foreground#6d6f77
  • editorHoverWidget.border#3d3f46
  • editorIndentGuide.activeBackground#494b52
  • editorIndentGuide.background#494d5480
  • editorInfo.foreground#8bacfe
  • editorInlayHint.background#3b3e45b3
  • editorInlayHint.foreground#84878f
  • editorInlayHint.typeBackground#3b3e45b3
  • editorInlayHint.typeForeground#84878f
  • editorLightBulb.foreground#e1b834
  • editorLightBulbAutoFix.foreground#86a9ff
  • editorLineNumber.activeForeground#9b9ea7
  • editorLineNumber.foreground#55585f
  • editorLink.activeForeground#86a9ff
  • editorOverviewRuler.border#0a0c10
  • editorRuler.foreground#63656e80
  • editorSuggestWidget.border#3d3f46
  • editorWarning.foreground#c9a100
  • editorWhitespace.foreground#494b52
  • editorWidget.background#24262c
  • editorWidget.border#3d3f46
  • editorWidget.foreground#9b9ea7
  • errorForeground#f6676f
  • focusBorder#5e74ab
  • foreground#bdc1ca
  • gitDecoration.addedResourceForeground#a1c861
  • gitDecoration.conflictingResourceForeground#ff9946
  • gitDecoration.deletedResourceForeground#ff8d90
  • gitDecoration.ignoredResourceForeground#9b9ea7
  • gitDecoration.modifiedResourceForeground#8bacfe
  • gitDecoration.renamedResourceForeground#a1c861
  • gitDecoration.stageDeletedResourceForeground#ff8d90
  • gitDecoration.stageModifiedResourceForeground#8bacfe
  • gitDecoration.submoduleResourceForeground#84878f
  • gitDecoration.untrackedResourceForeground#a1c861
  • icon.foreground#9b9ea7
  • input.background#17191e
  • input.border#303339
  • input.foreground#bdc1ca
  • input.placeholderForeground#84878f
  • inputOption.activeBackground#26407a
  • inputOption.activeForeground#bacdff
  • inputOption.hoverBackground#2b2e34
  • inputValidation.errorBackground#851a27
  • inputValidation.errorBorder#962631
  • inputValidation.infoBackground#234082
  • inputValidation.infoBorder#2f4d90
  • inputValidation.warningBackground#665000
  • inputValidation.warningBorder#755c00
  • keybindingLabel.background#303339
  • keybindingLabel.border#3d3f46
  • keybindingLabel.bottomBorder#3d3f46
  • keybindingLabel.foreground#bdc1ca
  • list.activeSelectionBackground#1a3c83
  • list.activeSelectionForeground#d4d8e2
  • list.errorForeground#f6676f
  • list.focusBackground#303339
  • list.focusForeground#bdc1ca
  • list.highlightForeground#bacdff
  • list.hoverBackground#3d3f46
  • list.hoverForeground#bdc1ca
  • list.inactiveFocusBackground#303339
  • list.inactiveSelectionBackground#24262c
  • list.inactiveSelectionForeground#bdc1ca
  • list.invalidItemForeground#c9a100
  • list.warningForeground#ffce1b
  • menu.separatorBackground#3d3f46
  • menubar.selectionBackground#303339
  • menubar.selectionForeground#bdc1ca
  • merge.commonContentBackground#2a2c32b3
  • merge.commonHeaderBackground#3b3e45b3
  • merge.currentContentBackground#26447f66
  • merge.currentHeaderBackground#314e8db3
  • merge.incomingContentBackground#3d5a1e66
  • merge.incomingHeaderBackground#49651eb3
  • minimap.errorHighlight#851a27
  • minimap.findMatchHighlight#493900
  • minimap.selectionHighlight#284992
  • minimap.warningHighlight#665000
  • notificationCenterHeader.background#303339
  • notificationCenterHeader.foreground#84878f
  • notifications.background#303339
  • notifications.border#303339
  • notifications.foreground#bdc1ca
  • notificationsErrorIcon.foreground#ff8d90
  • notificationsInfoIcon.foreground#8bacfe
  • notificationsWarningIcon.foreground#e5b700
  • panel.background#0a0c10
  • panel.border#303339
  • panelInput.border#303339
  • panelTitle.activeBorder#86a9ff
  • panelTitle.activeForeground#bdc1ca
  • panelTitle.inactiveForeground#84878f
  • peekView.border#86a9ff
  • peekViewEditor.background#24262c
  • peekViewEditor.matchHighlightBackground#493900
  • peekViewResult.background#17191e
  • peekViewResult.fileForeground#bdc1ca
  • peekViewResult.lineForeground#9b9ea7
  • peekViewResult.matchHighlightBackground#493900
  • peekViewResult.selectionBackground#1a3c83
  • peekViewResult.selectionForeground#d4d8e2
  • peekViewTitle.background#24262c
  • peekViewTitleDescription.foreground#84878f
  • peekViewTitleLabel.foreground#d4d8e2
  • pickerGroup.border#3d3f46
  • pickerGroup.foreground#84878f
  • progressBar.background#86a9ff
  • quickInput.background#24262c
  • quickInput.foreground#bdc1ca
  • scrollbar.shadow#17191e
  • scrollbarSlider.activeBackground#5e6068b3
  • scrollbarSlider.background#6a70784d
  • scrollbarSlider.hoverBackground#63656e80
  • selection.background#424f6db3
  • settings.headerForeground#84878f
  • settings.modifiedItemIndicator#2f4d90
  • sideBar.background#111217
  • sideBar.border#303339
  • sideBar.foreground#bdc1ca
  • sideBarSectionHeader.background#111217
  • sideBarSectionHeader.border#303339
  • sideBarSectionHeader.foreground#bdc1ca
  • sideBarTitle.foreground#bdc1ca
  • statusBar.background#111217
  • statusBar.border#303339
  • statusBar.debuggingBackground#513875
  • statusBar.debuggingForeground#bdc1ca
  • statusBar.focusBorder#5e74ab
  • statusBar.foreground#84878f
  • statusBar.noFolderBackground#111217
  • statusBarItem.activeBackground#3d3f46
  • statusBarItem.errorBackground#851a27
  • statusBarItem.errorForeground#d4d8e2
  • statusBarItem.focusBorder#5e74ab
  • statusBarItem.hoverBackground#303339
  • statusBarItem.prominentBackground#24262c
  • statusBarItem.remoteBackground#111217
  • statusBarItem.remoteForeground#f39244
  • statusBarItem.warningBackground#665000
  • statusBarItem.warningForeground#d4d8e2
  • symbolIcon.arrayForeground#5dbded
  • symbolIcon.booleanForeground#92b1ff
  • symbolIcon.classForeground#5dbded
  • symbolIcon.colorForeground#a3ce57
  • symbolIcon.constructorForeground#ff9396
  • symbolIcon.enumeratorForeground#5dbded
  • symbolIcon.enumeratorMemberForeground#92b1ff
  • symbolIcon.eventForeground#9b9ea7
  • symbolIcon.fieldForeground#5dbded
  • symbolIcon.fileForeground#92b1ff
  • symbolIcon.folderForeground#92b1ff
  • symbolIcon.functionForeground#ff9e51
  • symbolIcon.interfaceForeground#5dbded
  • symbolIcon.keyForeground#92b1ff
  • symbolIcon.keywordForeground#e0b627
  • symbolIcon.methodForeground#ff9e51
  • symbolIcon.moduleForeground#92b1ff
  • symbolIcon.namespaceForeground#92b1ff
  • symbolIcon.nullForeground#e0b627
  • symbolIcon.numberForeground#49c3c5
  • symbolIcon.objectForeground#5dbded
  • symbolIcon.operatorForeground#a3ce57
  • symbolIcon.packageForeground#5dbded
  • symbolIcon.propertyForeground#5dbded
  • symbolIcon.referenceForeground#92b1ff
  • symbolIcon.snippetForeground#92b1ff
  • symbolIcon.stringForeground#a3ce57
  • symbolIcon.structForeground#5dbded
  • symbolIcon.textForeground#a3ce57
  • symbolIcon.typeParameterForeground#a3ce57
  • symbolIcon.unitForeground#92b1ff
  • symbolIcon.variableForeground#5dbded
  • tab.activeBackground#17191e
  • tab.activeBorder#17191e
  • tab.activeBorderTop#5e74ab
  • tab.activeForeground#bdc1ca
  • tab.border#303339
  • tab.hoverBackground#17191e99
  • tab.inactiveBackground#0a0c10
  • tab.inactiveForeground#84878f
  • tab.unfocusedActiveBorder#17191e
  • tab.unfocusedActiveBorderTop#303339
  • tab.unfocusedHoverBackground#17191e66
  • terminal.ansiBlack#17191e
  • terminal.ansiBlue#8bacfe
  • terminal.ansiBrightBlack#55585f
  • terminal.ansiBrightBlue#aec4ff
  • terminal.ansiBrightCyan#7de5e7
  • terminal.ansiBrightGreen#bade7f
  • terminal.ansiBrightMagenta#d5b9ff
  • terminal.ansiBrightRed#ffb3b4
  • terminal.ansiBrightWhite#d4d8e2
  • terminal.ansiBrightYellow#f5d05f
  • terminal.ansiCyan#4bd1d3
  • terminal.ansiGreen#a1c861
  • terminal.ansiMagenta#bfa0ee
  • terminal.ansiRed#ff8d90
  • terminal.ansiWhite#bdc1ca
  • terminal.ansiYellow#e1b834
  • terminal.foreground#bdc1ca
  • terminalCommandDecoration.defaultBackground#6d6f77
  • terminalCommandDecoration.errorBackground#962631
  • terminalCommandDecoration.successBackground#49650f
  • testing.iconErrored#ff8d90
  • testing.iconFailed#ff8d90
  • testing.iconPassed#a1c861
  • testing.iconQueued#e5b700
  • testing.iconSkipped#9b9ea7
  • testing.iconUnset#9b9ea7
  • testing.message.error.decorationForeground#ff8d90
  • testing.message.error.lineBackground#851a27
  • testing.runAction#a1c861
  • textBlockQuote.background#0a0c10
  • textBlockQuote.border#303339
  • textCodeBlock.background#303339
  • textLink.activeForeground#86a9ff
  • textLink.foreground#86a9ff
  • textPreformat.foreground#84878f
  • textSeparator.foreground#84878f
  • titleBar.activeBackground#111217
  • titleBar.activeForeground#9b9ea7
  • titleBar.border#303339
  • titleBar.inactiveBackground#111217
  • titleBar.inactiveForeground#84878f
  • toolbar.activeBackground#63656e80
  • toolbar.hoverBackground#494d5480
  • tree.indentGuidesStroke#494b52
  • widget.shadow#03050a4d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#84878f
string, constant.other.symbol, string.quoted#a3ce57
string.regexp#49c3c5
constant.character, constant.other#49c3c5
constant.character.format#49c3c5
constant.other.caps#49c3c5
variable.parameter.function.language.special.self#e0b627
constant.numeric#92b1ff
constant.language#92b1ff
meta.constant, entity.name.constant#92b1ff
variable#bdc1ca
variable.member#c5a0fb
variable.language#49c3c5
storage, storage.type.keyword#e0b627
keyword#e0b627
source.java meta.class.java meta.class.identifier.java storage.type.java#e0b627
keyword.operator#ff9396
punctuation.separator, punctuation.terminator, punctuation.semi#84878f
punctuation.section#bdc1ca
punctuation.accessor#ff9396
punctuation.definition.template-expression#e0b627
punctuation.section.interpolation#e0b627
source.java storage.type, source.haskell storage.type, source.c storage.type, source.zig storage.type#5dbded
entity.other.inherited-class#49c3c5
storage.type.function.arrow#e0b627
source.java storage.type.primitive#49c3c5
entity.name.function#ff9e51
variable.parameter, meta.parameter#92b1ff
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ff9e51
support.function, support.macro#c5a0fb
entity.name.import, entity.name.package#a3ce57
entity.name, source.js meta.function-call.constructor variable.type, support.class.component.vue#5dbded
entity.name.tag, meta.tag.sgml#49c3c5
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#5c9b9f
entity.other.attribute-name#ff9e51
support.constant#ff9396
support.type, support.class, source.go storage.type#49c3c5
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, variable.annotation, punctuation.definition.annotation#92b1ff
invalid#ff8d90
meta.diff, meta.diff.header#a3ce57
source.ruby variable.other.readwrite#ff9e51
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#5dbded
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#84878f
support.type.property-name#49c3c5
constant.numeric.line-number.find-in-files - match#84878f
constant.numeric.line-number.match#e0b627
entity.name.filename.find-in-files#a3ce57
message.error#ff8d90
markup.heading, markup.heading entity.name#a3ce57bold
markup.underline.link, string.other.link#5dbded
markup.italic#c5a0fb
markup.bold#c5a0fbbold
markup.italic markup.bold, markup.bold markup.italicbold italic
meta.separator#84878fbold
markup.quote#49c3c5
markup.list punctuation.definition.list.begin#ff9e51
markup.inserted#a1c861
markup.changed#8bacfe
markup.deleted#ff8d90
markup.strike#92b1ff
markup.table#49c3c5
text.html.markdown markup.inline.raw#ff9396
text.html.markdown meta.dummy.line-break#84878f
punctuation.definition.markdown#84878f
token.info-token#8bacfe
token.warn-token#e5b700
token.error-token#ff8d90
token.debug-token#bfa0ee
variable.other.enummember#c5a0fb
keyword.operator.key-value.rust, punctuation.comma.rust#84878f
meta.attribute.rust#92b1ff
entity.name.function.preprocessor#ff9e51
entity.name.label#c5a0fb
meta.decorator.ts entity.name.function#92b1ff
source.json meta.structure.dictionary.json support.type.property-name.json#c5a0fb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9396
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9e51
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e0b627
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a3ce57