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#596677
  • activityBar.background#05070A
  • activityBar.border#1A222D
  • activityBar.foreground#B0B6BE
  • activityBar.inactiveForeground#52575F
  • activityBarBadge.background#596677
  • activityBarBadge.foreground#05070A
  • badge.background#161D26
  • badge.foreground#B0B6BE
  • banner.background#0D1117
  • banner.foreground#B0B6BE
  • banner.iconForeground#596677
  • breadcrumb.activeSelectionForeground#596677
  • breadcrumb.background#030406
  • breadcrumb.focusForeground#D3D7DC
  • breadcrumb.foreground#52575F
  • button.background#596677
  • button.foreground#05070A
  • button.hoverBackground#596677d9
  • button.secondaryBackground#161D26
  • button.secondaryForeground#B0B6BE
  • charts.blue#596677
  • charts.foreground#B0B6BE
  • charts.green#76A284
  • charts.lines#243040
  • charts.orange#D9A86C
  • charts.purple#5975A2
  • charts.red#D96565
  • charts.yellow#D9A86C
  • chat.avatarBackground#0D1117
  • chat.avatarForeground#B0B6BE
  • chat.background#030406
  • chat.requestBackground#05070A
  • chat.requestBorder#1A222D
  • chat.slashCommandBackground#59667733
  • chat.slashCommandForeground#596677
  • checkbox.background#0D1117
  • checkbox.border#243040
  • checkbox.foreground#D3D7DC
  • checkbox.selectBackground#596677
  • checkbox.selectBorder#596677
  • commandCenter.activeBackground#161D26
  • commandCenter.activeBorder#596677
  • commandCenter.activeForeground#D3D7DC
  • commandCenter.background#0D1117
  • commandCenter.border#1A222D
  • commandCenter.debuggingBackground#D9A86C
  • commandCenter.foreground#858C97
  • commandCenter.inactiveBorder#1A222D
  • commandCenter.inactiveForeground#52575F
  • debugConsole.errorForeground#D96565
  • debugConsole.infoForeground#B0B6BE
  • debugConsole.sourceForeground#858C97
  • debugConsole.warningForeground#D9A86C
  • debugConsoleInputIcon.foreground#596677
  • debugExceptionWidget.background#0D1117
  • debugExceptionWidget.border#D96565
  • debugIcon.breakpointDisabledForeground#52575F
  • debugIcon.breakpointForeground#D96565
  • debugIcon.breakpointUnverifiedForeground#858C97
  • debugIcon.continueForeground#76A284
  • debugIcon.disconnectForeground#D96565
  • debugIcon.pauseForeground#596677
  • debugIcon.restartForeground#76A284
  • debugIcon.startForeground#76A284
  • debugIcon.stepBackForeground#596677
  • debugIcon.stepIntoForeground#596677
  • debugIcon.stepOutForeground#596677
  • debugIcon.stepOverForeground#596677
  • debugIcon.stopForeground#D96565
  • debugTokenExpression.boolean#76A284
  • debugTokenExpression.error#D96565
  • debugTokenExpression.name#858C97
  • debugTokenExpression.number#76A284
  • debugTokenExpression.string#B07D62
  • debugTokenExpression.value#858C97
  • debugToolBar.background#0D1117
  • debugToolBar.border#243040
  • descriptionForeground#52575F
  • diffEditor.insertedTextBackground#76a28426
  • diffEditor.removedTextBackground#d9656526
  • dropdown.background#0D1117
  • dropdown.border#243040
  • dropdown.foreground#D3D7DC
  • editor.background#05070A
  • editor.findMatchBackground#b07d6266
  • editor.findMatchHighlightBackground#59667733
  • editor.focusedStackFrameHighlightBackground#76a28433
  • editor.foldBackground#5966771a
  • editor.foreground#B0B6BE
  • editor.inactiveSelectionBackground#161d26cc
  • editor.lineHighlightBackground#03040699
  • editor.lineHighlightBorder#1A222D
  • editor.rangeHighlightBackground#5966771f
  • editor.selectionBackground#59667740
  • editor.selectionHighlightBackground#59667733
  • editor.snippetFinalTabstopHighlightBorder#596677
  • editor.snippetTabstopHighlightBackground#59667733
  • editor.stackFrameHighlightBackground#d9a86c33
  • editor.symbolHighlightBackground#b07d6233
  • editor.wordHighlightBackground#59667726
  • editor.wordHighlightStrongBackground#59667740
  • editorBracketMatch.background#5966771f
  • editorBracketMatch.border#596677
  • editorBracketPairGuide.activeBackground1#596677
  • editorBracketPairGuide.background1#1A222D
  • editorCodeLens.foreground#52575F
  • editorCursor.foreground#B0B6BE
  • editorError.foreground#D96565
  • editorGhostText.foreground#52575fa6
  • editorGroupHeader.tabsBackground#05070A
  • editorGroupHeader.tabsBorder#1A222D
  • editorGutter.addedBackground#76A284
  • editorGutter.background#05070A
  • editorGutter.deletedBackground#D96565
  • editorGutter.modifiedBackground#5975A2
  • editorHint.foreground#858C97
  • editorHoverWidget.background#0D1117
  • editorHoverWidget.border#243040
  • editorIndentGuide.activeBackground1#59667773
  • editorIndentGuide.background1#1A222D
  • editorInfo.foreground#596677
  • editorInlayHint.background#0d1117e6
  • editorInlayHint.foreground#52575F
  • editorLightBulb.foreground#D9A86C
  • editorLightBulbAutoFix.foreground#596677
  • editorLineNumber.activeForeground#B0B6BE
  • editorLineNumber.foreground#52575F
  • editorLink.activeForeground#596677
  • editorOverviewRuler.addedForeground#76A284
  • editorOverviewRuler.border#1A222D
  • editorOverviewRuler.bracketMatchForeground#596677
  • editorOverviewRuler.commonContentForeground#52575F
  • editorOverviewRuler.currentContentForeground#76A284
  • editorOverviewRuler.deletedForeground#D96565
  • editorOverviewRuler.errorForeground#D96565
  • editorOverviewRuler.findMatchForeground#b07d6280
  • editorOverviewRuler.incomingContentForeground#596677
  • editorOverviewRuler.infoForeground#596677
  • editorOverviewRuler.modifiedForeground#5975A2
  • editorOverviewRuler.selectionHighlightForeground#59667766
  • editorOverviewRuler.warningForeground#D9A86C
  • editorOverviewRuler.wordHighlightForeground#59667766
  • editorRuler.foreground#1A222D
  • editorStickyScroll.background#030406
  • editorStickyScroll.border#1A222D
  • editorStickyScrollHover.background#0D1117
  • editorSuggestWidget.background#0D1117
  • editorSuggestWidget.border#243040
  • editorSuggestWidget.foreground#B0B6BE
  • editorSuggestWidget.highlightForeground#596677
  • editorSuggestWidget.selectedBackground#111720
  • editorSuggestWidget.selectedForeground#D3D7DC
  • editorWarning.foreground#D9A86C
  • editorWhitespace.foreground#52575f59
  • editorWidget.background#0D1117
  • editorWidget.border#243040
  • errorForeground#D96565
  • extensionButton.background#596677
  • extensionButton.foreground#05070A
  • extensionButton.hoverBackground#596677d9
  • extensionButton.prominentBackground#596677
  • extensionButton.prominentForeground#05070A
  • extensionButton.prominentHoverBackground#596677d9
  • focusBorder#596677
  • foreground#B0B6BE
  • gauge.errorBackground#d9656533
  • gauge.errorForeground#D96565
  • gauge.infoBackground#59667733
  • gauge.infoForeground#596677
  • gauge.warningBackground#d9a86c33
  • gauge.warningForeground#D9A86C
  • gitDecoration.addedResourceForeground#76A284
  • gitDecoration.conflictingResourceForeground#D96565
  • gitDecoration.deletedResourceForeground#D96565
  • gitDecoration.ignoredResourceForeground#52575F
  • gitDecoration.modifiedResourceForeground#5975A2
  • gitDecoration.renamedResourceForeground#76A284
  • gitDecoration.stageDeletedResourceForeground#D96565
  • gitDecoration.stageModifiedResourceForeground#5975A2
  • gitDecoration.submoduleResourceForeground#596677
  • gitDecoration.untrackedResourceForeground#76A284
  • icon.foreground#858C97
  • inlineChat.background#0D1117
  • inlineChat.border#243040
  • inlineChat.shadow#05070a80
  • inlineChatDiff.inserted#76a28426
  • inlineChatDiff.removed#d9656526
  • inlineChatInput.background#05070A
  • inlineChatInput.border#1A222D
  • inlineChatInput.focusBorder#596677
  • inlineChatInput.placeholderForeground#52575F
  • input.background#0D1117
  • input.border#243040
  • input.foreground#D3D7DC
  • input.placeholderForeground#52575F
  • inputOption.activeBorder#596677
  • inputValidation.errorBackground#d9656526
  • inputValidation.errorBorder#D96565
  • inputValidation.warningBackground#d9a86c26
  • inputValidation.warningBorder#D9A86C
  • keybindingLabel.background#161D26
  • keybindingLabel.border#243040
  • keybindingLabel.foreground#D3D7DC
  • list.activeSelectionBackground#111720
  • list.activeSelectionForeground#D3D7DC
  • list.deemphasizedForeground#52575F
  • list.dropBackground#59667733
  • list.errorForeground#D96565
  • list.filterMatchBackground#b07d6259
  • list.focusBackground#111720
  • list.focusForeground#D3D7DC
  • list.focusHighlightForeground#596677bf
  • list.focusOutline#59667780
  • list.highlightForeground#596677
  • list.hoverBackground#161D26
  • list.hoverForeground#D3D7DC
  • list.inactiveSelectionBackground#161D26
  • list.inactiveSelectionForeground#B0B6BE
  • list.warningForeground#D9A86C
  • listFilterWidget.background#0D1117
  • listFilterWidget.noMatchesOutline#D96565
  • listFilterWidget.outline#596677
  • menu.background#0D1117
  • menu.border#243040
  • menu.foreground#B0B6BE
  • menu.selectionBackground#111720
  • menu.selectionForeground#D3D7DC
  • menu.separatorBackground#243040
  • menubar.selectionBackground#59667733
  • menubar.selectionBorder#596677
  • menubar.selectionForeground#D3D7DC
  • merge.border#243040
  • merge.commonContentBackground#161d2659
  • merge.commonHeaderBackground#161d2680
  • merge.currentContentBackground#76a28433
  • merge.currentHeaderBackground#76a28466
  • merge.incomingContentBackground#59667733
  • merge.incomingHeaderBackground#59667766
  • minimap.background#05070A
  • minimap.errorHighlight#D96565
  • minimap.findMatchHighlight#b07d6280
  • minimap.selectionHighlight#59667780
  • minimap.warningHighlight#D9A86C
  • minimapGutter.addedBackground#76A284
  • minimapGutter.deletedBackground#D96565
  • minimapGutter.modifiedBackground#5975A2
  • minimapSlider.activeBackground#59667780
  • minimapSlider.background#161d2680
  • minimapSlider.hoverBackground#24304099
  • multiDiffEditor.background#05070A
  • multiDiffEditor.border#1A222D
  • multiDiffEditor.headerBackground#0D1117
  • notebook.cellBorderColor#1A222D
  • notebook.cellEditorBackground#030406
  • notebook.cellHoverBackground#03040680
  • notebook.cellStatusBarItemHoverBackground#161D26
  • notebook.editorBackground#05070A
  • notebook.focusedCellBackground#161d2666
  • notebook.focusedCellBorder#596677
  • notebook.focusedEditorBorder#596677
  • notebook.selectedCellBackground#161d264d
  • notebookStatusErrorIcon.foreground#D96565
  • notebookStatusRunningIcon.foreground#596677
  • notebookStatusSuccessIcon.foreground#76A284
  • notificationCenter.border#243040
  • notificationCenterHeader.background#0D1117
  • notificationCenterHeader.foreground#D3D7DC
  • notificationLink.foreground#596677
  • notifications.background#0D1117
  • notifications.border#1A222D
  • notifications.foreground#B0B6BE
  • notificationsErrorIcon.foreground#D96565
  • notificationsInfoIcon.foreground#596677
  • notificationsWarningIcon.foreground#D9A86C
  • notificationToast.border#243040
  • panel.background#0D1117
  • panel.border#1A222D
  • panelInput.border#243040
  • panelSection.border#1A222D
  • panelSectionHeader.background#0D1117
  • panelSectionHeader.foreground#B0B6BE
  • panelTitle.activeBorder#596677
  • panelTitle.activeForeground#D3D7DC
  • panelTitle.inactiveForeground#52575F
  • peekView.border#596677
  • peekViewEditor.background#030406
  • peekViewResult.background#05070A
  • peekViewTitle.background#0D1117
  • ports.iconRunningProcessForeground#76A284
  • profileBadge.background#161D26
  • profileBadge.foreground#B0B6BE
  • progressBar.background#596677
  • quickInput.background#0D1117
  • quickInput.foreground#B0B6BE
  • quickInputList.focusBackground#111720
  • quickInputList.focusForeground#D3D7DC
  • quickInputList.focusIconForeground#596677bf
  • radio.activeBackground#59667733
  • radio.activeBorder#596677
  • radio.activeForeground#596677
  • radio.inactiveBackground#0D1117
  • radio.inactiveBorder#243040
  • radio.inactiveForeground#858C97
  • radio.inactiveHoverBackground#161D26
  • sash.hoverBorder#596677
  • scmGraph.foreground1#596677
  • scmGraph.foreground2#D9A86C
  • scmGraph.foreground3#D96565
  • scmGraph.foreground4#76A284
  • scmGraph.foreground5#5975A2
  • scmGraph.historyItemBaseRefColor#596677
  • scmGraph.historyItemHoverAdditionsForeground#76A284
  • scmGraph.historyItemHoverDeletionsForeground#D96565
  • scmGraph.historyItemHoverLabelForeground#D3D7DC
  • scmGraph.historyItemRefColor#596677
  • scmGraph.historyItemRemoteRefColor#5975A2
  • scrollbar.shadow#05070a80
  • scrollbarSlider.activeBackground#59667799
  • scrollbarSlider.background#161d26b3
  • scrollbarSlider.hoverBackground#243040cc
  • settings.checkboxBackground#0D1117
  • settings.checkboxBorder#243040
  • settings.checkboxForeground#D3D7DC
  • settings.dropdownBackground#0D1117
  • settings.dropdownBorder#243040
  • settings.dropdownForeground#D3D7DC
  • settings.focusedRowBackground#161d2680
  • settings.headerBorder#1A222D
  • settings.headerForeground#D3D7DC
  • settings.modifiedItemIndicator#5975A2
  • settings.numberInputBackground#0D1117
  • settings.numberInputBorder#243040
  • settings.numberInputForeground#76A284
  • settings.rowHoverBackground#0d111780
  • settings.textInputBackground#0D1117
  • settings.textInputBorder#243040
  • settings.textInputForeground#D3D7DC
  • sideBar.background#030406
  • sideBar.border#1A222D
  • sideBar.foreground#858C97
  • sideBarSectionHeader.background#0D1117
  • sideBarSectionHeader.border#243040
  • sideBarSectionHeader.foreground#B0B6BE
  • sideBarTitle.foreground#D3D7DC
  • statusBar.background#030406
  • statusBar.border#1A222D
  • statusBar.debuggingBackground#D9A86C
  • statusBar.debuggingForeground#05070A
  • statusBar.foreground#B0B6BE
  • statusBar.noFolderBackground#0D1117
  • statusBar.noFolderForeground#B0B6BE
  • statusBarItem.hoverBackground#59667733
  • statusBarItem.remoteBackground#596677
  • statusBarItem.remoteForeground#05070A
  • symbolIcon.arrayForeground#858C97
  • symbolIcon.booleanForeground#76A284
  • symbolIcon.classForeground#6A7380
  • symbolIcon.colorForeground#858C97
  • symbolIcon.constantForeground#B07D62
  • symbolIcon.constructorForeground#807870
  • symbolIcon.enumeratorForeground#6A7380
  • symbolIcon.enumeratorMemberForeground#B07D62
  • symbolIcon.eventForeground#807870
  • symbolIcon.fieldForeground#858C97
  • symbolIcon.fileForeground#B0B6BE
  • symbolIcon.folderForeground#858C97
  • symbolIcon.functionForeground#807870
  • symbolIcon.interfaceForeground#6A7380
  • symbolIcon.keyForeground#6A7380
  • symbolIcon.keywordForeground#596677
  • symbolIcon.methodForeground#807870
  • symbolIcon.moduleForeground#596677
  • symbolIcon.namespaceForeground#596677
  • symbolIcon.numberForeground#76A284
  • symbolIcon.objectForeground#858C97
  • symbolIcon.operatorForeground#596677
  • symbolIcon.packageForeground#596677
  • symbolIcon.propertyForeground#858C97
  • symbolIcon.referenceForeground#858C97
  • symbolIcon.snippetForeground#858C97
  • symbolIcon.stringForeground#B07D62
  • symbolIcon.structForeground#6A7380
  • symbolIcon.textForeground#B0B6BE
  • symbolIcon.typeParameterForeground#6A7380
  • symbolIcon.unitForeground#76A284
  • symbolIcon.variableForeground#858C97
  • tab.activeBackground#030406
  • tab.activeBorderTop#596677
  • tab.activeForeground#D3D7DC
  • tab.border#1A222D
  • tab.hoverBackground#0D1117
  • tab.inactiveBackground#05070A
  • tab.inactiveForeground#52575F
  • terminal.ansiBlack#05070A
  • terminal.ansiBlue#596677
  • terminal.ansiBrightBlack#52575F
  • terminal.ansiBrightBlue#596677
  • terminal.ansiBrightCyan#596677
  • terminal.ansiBrightGreen#76A284
  • terminal.ansiBrightMagenta#5975A2
  • terminal.ansiBrightRed#D96565
  • terminal.ansiBrightWhite#D3D7DC
  • terminal.ansiBrightYellow#D9A86C
  • terminal.ansiCyan#596677
  • terminal.ansiGreen#76A284
  • terminal.ansiMagenta#5975A2
  • terminal.ansiRed#D96565
  • terminal.ansiWhite#B0B6BE
  • terminal.ansiYellow#D9A86C
  • terminal.background#05070A
  • terminal.border#1A222D
  • terminal.foreground#B0B6BE
  • terminal.selectionBackground#59667740
  • terminalCursor.foreground#B0B6BE
  • testing.iconErrored#D96565
  • testing.iconFailed#D96565
  • testing.iconPassed#76A284
  • testing.iconQueued#D9A86C
  • testing.iconSkipped#52575F
  • testing.iconUnset#52575F
  • testing.message.error.decorationForeground#D96565
  • testing.message.info.decorationForeground#596677
  • testing.runAction#76A284
  • textCodeBlockBackground#0D1117
  • textLink#596677
  • textLink.activeForeground#596677
  • textPreformatBackground#161D26
  • textPreformatForeground#858C97
  • titleBar.activeBackground#05070A
  • titleBar.activeForeground#D3D7DC
  • titleBar.border#1A222D
  • titleBar.inactiveBackground#030406
  • titleBar.inactiveForeground#52575F
  • toolbar.activeBackground#161D26
  • toolbar.hoverBackground#161d2680
  • tree.inactiveIndentGuidesStroke#1A222D
  • tree.indentGuidesStroke#243040
  • tree.tableColumnsBorder#243040
  • tree.tableOddRowsBackground#0d111780
  • walkThrough.embeddedEditorBackground#030406
  • welcomePage.background#05070A
  • welcomePage.progress.background#161D26
  • welcomePage.progress.foreground#596677
  • welcomePage.tileBackground#030406
  • welcomePage.tileHoverBackground#0D1117
  • widget.shadow#05070a80
  • window.activeBorder#596677
  • window.inactiveBorder#1A222D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#444950italic
keyword, keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql, storage.type, storage.modifier#596677
entity.name.function, support.function, support.function.sql, meta.function-call#807870
entity.name.type, support.type, support.type.sql#6A7380
entity.name.table.sql, entity.name.class#858C97
variable, variable.other, meta.column.sql, variable.other.column.sql, support.variable#858C97
variable.parameter.sql, variable.other.sql, variable.parameter#858C97
string, string.quoted.single.sql, string.quoted.double.sql#B07D62
constant.numeric, constant.language#76A284
keyword.operator, keyword.operator.sql, punctuation#596677
constant.other, support.constant#B07D62
support.type.property-name.json#6A7380
meta.decorator, punctuation.decorator#6A7380
string.template, punctuation.definition.template-expression#B07D62
constant.character.escape#76A284
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6A7380
string.regexp, keyword.control.anchor.regexp, constant.other.character-class.regexp#B07D62
entity.name.tag.yaml#6A7380
meta.preprocessor, keyword.control.directive#596677
storage.type.class.jsdoc, variable.other.jsdoc, entity.name.type.instance.jsdoc#444950italic
markup.list, punctuation.definition.list#596677
variable.other.special.shell#858C97
entity.name.lifetime.rust, keyword.operator.borrow.rust#76A284
variable.language.special.self.python, variable.language.special.self#596677
keyword.control, keyword.control.flow, keyword.control.import, keyword.control.conditional, keyword.control.loop#596677
storage.modifier, storage.type.modifier#596677
variable.language, variable.language.this, variable.language.super#596677italic
entity.name.namespace, entity.name.scope-resolution#6A7380
entity.other.inherited-class#6A7380italic
variable.other.property, variable.other.object.property, meta.object-literal.key#858C97
support.class, support.other, support.constant.property-value#6A7380
meta.annotation, storage.type.annotation, punctuation.definition.annotation#6A7380
punctuation.accessor, punctuation.separator, meta.brace#596677
meta.template.expression, punctuation.section.embedded#596677
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#596677
entity.other.attribute-name, entity.other.attribute-name.html#858C97
punctuation.definition.tag, punctuation.separator.key-value.html#596677
support.class.component, entity.name.tag.jsx, entity.name.tag.tsx#6A7380
support.type.property-name.css, support.type.vendored.property-name.css#858C97
keyword.other.unit, constant.numeric.css, constant.other.color#76A284
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#596677bold
markup.bold, punctuation.definition.bold#76A284bold
markup.italic, punctuation.definition.italic#6A7380italic
markup.quote#444950italic
markup.inline.raw, markup.fenced_code, markup.raw#B07D62
markup.underline.link, string.other.link, constant.other.reference.link.markdown#807870
string.other.link.title.markdown, string.other.link.description.markdown#858C97
meta.separator.markdown, punctuation.definition.constant.markdown#444950
markup.inserted, meta.diff.header.to-file#76A284
markup.deleted, meta.diff.header.from-file#D96565
markup.changed#5975A2
invalid, invalid.illegal#D96565