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#00000000
  • activityBar.activeBorder#5b98c8
  • activityBar.activeFocusBorder#5b98c8
  • activityBar.background#202024
  • activityBar.border#1e1e22
  • activityBar.foreground#d8d6d0
  • activityBar.inactiveForeground#706d67
  • activityBarBadge.background#5b98c8
  • activityBarBadge.foreground#141416
  • badge.background#5b98c8
  • badge.foreground#141416
  • banner.background#202024
  • banner.foreground#d8d6d0
  • banner.iconForeground#5b98c8
  • breadcrumb.activeSelectionForeground#d8d6d0
  • breadcrumb.focusForeground#d8d6d0
  • breadcrumb.foreground#706d67
  • breadcrumbPicker.background#26262b
  • button.background#5b98c8cc
  • button.border#00000000
  • button.foreground#f0ece4
  • button.hoverBackground#5b98c8
  • button.secondaryBackground#2c2c32
  • button.secondaryForeground#d8d6d0
  • button.secondaryHoverBackground#32323a
  • button.separator#d8d6d020
  • charts.blue#88b8d8
  • charts.foreground#d8d6d0
  • charts.green#5898b0
  • charts.lines#706d67
  • charts.orange#c88840
  • charts.purple#a888c8
  • charts.red#c87858
  • charts.yellow#d4a850
  • commandCenter.activeBackground#2c2c32
  • commandCenter.activeBorder#3a3a42
  • commandCenter.activeForeground#d8d6d0
  • commandCenter.background#202024
  • commandCenter.border#252529
  • commandCenter.foreground#a09d96
  • commandCenter.inactiveBorder#1e1e22
  • commandCenter.inactiveForeground#706d67
  • debugConsole.errorForeground#c87858
  • debugConsole.infoForeground#5b98c8
  • debugConsole.sourceForeground#a09d96
  • debugConsole.warningForeground#d8b068
  • debugConsoleInputIcon.foreground#5b98c8
  • debugExceptionWidget.background#26262b
  • debugExceptionWidget.border#c87858
  • debugIcon.breakpointDisabledForeground#4c4a44
  • debugIcon.breakpointForeground#c87858
  • debugIcon.continueForeground#5b98c8
  • debugIcon.disconnectForeground#c87858
  • debugIcon.pauseForeground#d4a850
  • debugIcon.restartForeground#5898b0
  • debugIcon.startForeground#5898b0
  • debugIcon.stepBackForeground#88b8d8
  • debugIcon.stepIntoForeground#88b8d8
  • debugIcon.stepOutForeground#88b8d8
  • debugIcon.stepOverForeground#88b8d8
  • debugIcon.stopForeground#c87858
  • debugTokenExpression.boolean#a888c8
  • debugTokenExpression.error#c87858
  • debugTokenExpression.name#88b8d8
  • debugTokenExpression.number#d8b068
  • debugTokenExpression.string#5898b0
  • debugTokenExpression.value#5898b0
  • debugToolBar.background#26262b
  • debugToolBar.border#252529
  • descriptionForeground#a09d96
  • diffEditor.diagonalFill#32323a40
  • diffEditor.insertedLineBackground#5898b018
  • diffEditor.insertedTextBackground#5898b018
  • diffEditor.removedLineBackground#c8785818
  • diffEditor.removedTextBackground#c8785818
  • diffEditorGutter.insertedLineBackground#5898b018
  • diffEditorGutter.removedLineBackground#c8785818
  • disabledForeground#4c4a44
  • dropdown.background#202024
  • dropdown.border#252529
  • dropdown.foreground#d8d6d0
  • dropdown.listBackground#26262b
  • editor.background#141416
  • editor.findMatchBackground#d4a85030
  • editor.findMatchBorder#d4a85060
  • editor.findMatchHighlightBackground#d4a85018
  • editor.foldBackground#2c2c3220
  • editor.foreground#d8d6d0
  • editor.hoverHighlightBackground#2c2c3230
  • editor.inactiveSelectionBackground#5b98c818
  • editor.lineHighlightBackground#2c2c3260
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#5b98c818
  • editor.rangeHighlightBackground#2c2c3230
  • editor.selectionBackground#5b98c833
  • editor.selectionForeground#d8d6d0
  • editor.selectionHighlightBackground#5b98c820
  • editor.wordHighlightBackground#2c2c3244
  • editor.wordHighlightStrongBackground#2c2c3266
  • editorBracketHighlight.foreground1#d4a850
  • editorBracketHighlight.foreground2#a888c8
  • editorBracketHighlight.foreground3#5b98c8
  • editorBracketHighlight.foreground4#88b8d8
  • editorBracketHighlight.foreground5#e0be68
  • editorBracketHighlight.foreground6#60c8d8
  • editorBracketMatch.background#5b98c818
  • editorBracketMatch.border#5b98c840
  • editorCodeLens.foreground#706d67
  • editorCursor.background#141416
  • editorCursor.foreground#d8d6d0
  • editorError.border#00000000
  • editorError.foreground#c87858
  • editorGhostText.foreground#4c4a44
  • editorGroup.border#252529
  • editorGroup.dropBackground#2c2c3260
  • editorGroup.emptyBackground#141416
  • editorGroup.focusedEmptyBorder#5b98c8
  • editorGroupHeader.border#1e1e22
  • editorGroupHeader.noTabsBackground#1a1a1e
  • editorGroupHeader.tabsBackground#1a1a1e
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#5898b0
  • editorGutter.commentRangeForeground#4c4a44
  • editorGutter.deletedBackground#c87858
  • editorGutter.foldingControlForeground#706d67
  • editorGutter.modifiedBackground#a888c8
  • editorHint.border#00000000
  • editorHint.foreground#78b0d0
  • editorHoverWidget.background#26262b
  • editorHoverWidget.border#252529
  • editorHoverWidget.foreground#d8d6d0
  • editorHoverWidget.highlightForeground#d4a850
  • editorHoverWidget.statusBarBackground#202024
  • editorIndentGuide.activeBackground#706d67
  • editorIndentGuide.activeBackground1#706d6760
  • editorIndentGuide.background#4c4a44
  • editorIndentGuide.background1#4c4a4440
  • editorInfo.border#00000000
  • editorInfo.foreground#5b98c8
  • editorLineNumber.activeForeground#a09d96
  • editorLineNumber.dimmedForeground#4c4a44
  • editorLineNumber.foreground#706d67
  • editorOverviewRuler.addedForeground#5898b080
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#c8785880
  • editorOverviewRuler.errorForeground#c8785880
  • editorOverviewRuler.infoForeground#5b98c880
  • editorOverviewRuler.modifiedForeground#a888c880
  • editorOverviewRuler.warningForeground#d8b06880
  • editorRuler.foreground#4c4a44
  • editorStickyScroll.background#1a1a1e
  • editorStickyScrollHover.background#202024
  • editorSuggestWidget.background#26262b
  • editorSuggestWidget.border#252529
  • editorSuggestWidget.focusHighlightForeground#e0be68
  • editorSuggestWidget.foreground#d8d6d0
  • editorSuggestWidget.highlightForeground#d4a850
  • editorSuggestWidget.selectedBackground#2c2c32
  • editorSuggestWidget.selectedForeground#d8d6d0
  • editorSuggestWidget.selectedIconForeground#5b98c8
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.border#00000000
  • editorWarning.foreground#d8b068
  • editorWhitespace.foreground#4c4a44
  • editorWidget.background#26262b
  • editorWidget.border#252529
  • editorWidget.foreground#d8d6d0
  • editorWidget.resizeBorder#3a3a42
  • errorForeground#c87858
  • extensionBadge.remoteBackground#5b98c8
  • extensionBadge.remoteForeground#141416
  • extensionButton.prominentBackground#5b98c8cc
  • extensionButton.prominentForeground#f0ece4
  • extensionButton.prominentHoverBackground#5b98c8
  • extensionIcon.starForeground#d4a850
  • extensionIcon.verifiedForeground#5b98c8
  • focusBorder#5b98c844
  • foreground#d8d6d0
  • gitDecoration.addedResourceForeground#5898b0
  • gitDecoration.conflictingResourceForeground#d8b068
  • gitDecoration.deletedResourceForeground#c87858
  • gitDecoration.ignoredResourceForeground#4c4a44
  • gitDecoration.modifiedResourceForeground#a888c8
  • gitDecoration.renamedResourceForeground#5b98c8
  • gitDecoration.stageDeletedResourceForeground#c87858
  • gitDecoration.stageModifiedResourceForeground#a888c8
  • gitDecoration.submoduleResourceForeground#706d67
  • gitDecoration.untrackedResourceForeground#88b8d8
  • icon.foreground#a09d96
  • input.background#202024
  • input.border#252529
  • input.foreground#d8d6d0
  • input.placeholderForeground#4c4a44
  • inputOption.activeBackground#5b98c830
  • inputOption.activeBorder#5b98c8
  • inputOption.activeForeground#5b98c8
  • inputOption.hoverBackground#5b98c814
  • inputValidation.errorBackground#c8785818
  • inputValidation.errorBorder#c87858
  • inputValidation.infoBackground#5b98c818
  • inputValidation.infoBorder#5b98c8
  • inputValidation.warningBackground#d8b06818
  • inputValidation.warningBorder#d8b068
  • keybindingLabel.background#202024
  • keybindingLabel.border#252529
  • keybindingLabel.bottomBorder#3a3a42
  • keybindingLabel.foreground#d8d6d0
  • list.activeSelectionBackground#2c2c32
  • list.activeSelectionForeground#d8d6d0
  • list.activeSelectionIconForeground#d8d6d0
  • list.deemphasizedForeground#4c4a44
  • list.dropBackground#2c2c3280
  • list.errorForeground#c87858
  • list.filterMatchBackground#d4a85030
  • list.filterMatchBorder#d4a85040
  • list.focusBackground#2c2c32
  • list.focusForeground#d8d6d0
  • list.focusOutline#5b98c844
  • list.highlightForeground#d4a850
  • list.hoverBackground#20202480
  • list.hoverForeground#d8d6d0
  • list.inactiveSelectionBackground#2c2c3280
  • list.inactiveSelectionForeground#d8d6d0
  • list.invalidItemForeground#c87858
  • list.warningForeground#d8b068
  • merge.border#00000000
  • merge.commonContentBackground#d8b06814
  • merge.commonHeaderBackground#d8b06830
  • merge.currentContentBackground#5898b014
  • merge.currentHeaderBackground#5898b030
  • merge.incomingContentBackground#88b8d814
  • merge.incomingHeaderBackground#88b8d830
  • minimap.background#141416
  • minimap.errorHighlight#c8785860
  • minimap.findMatchHighlight#d4a85040
  • minimap.foregroundOpacity#000000c0
  • minimap.selectionHighlight#2c2c3280
  • minimap.warningHighlight#d8b06860
  • minimapGutter.addedBackground#5898b080
  • minimapGutter.deletedBackground#c8785880
  • minimapGutter.modifiedBackground#a888c880
  • minimapSlider.activeBackground#d8d6d012
  • minimapSlider.background#d8d6d006
  • minimapSlider.hoverBackground#d8d6d00c
  • notificationCenterHeader.background#202024
  • notificationCenterHeader.foreground#d8d6d0
  • notificationLink.foreground#5b98c8
  • notifications.background#26262b
  • notifications.border#252529
  • notifications.foreground#d8d6d0
  • notificationsErrorIcon.foreground#c87858
  • notificationsInfoIcon.foreground#5b98c8
  • notificationsWarningIcon.foreground#d8b068
  • panel.background#202024
  • panel.border#252529
  • panel.dropBorder#5b98c8
  • panelInput.border#252529
  • panelSection.border#252529
  • panelSectionHeader.background#202024
  • panelSectionHeader.border#1e1e22
  • panelSectionHeader.foreground#a09d96
  • panelTitle.activeBorder#5b98c8
  • panelTitle.activeForeground#d8d6d0
  • panelTitle.inactiveForeground#706d67
  • peekView.border#5b98c8
  • peekViewEditor.background#1a1a1e
  • peekViewEditor.matchHighlightBackground#d4a85030
  • peekViewEditorGutter.background#1a1a1e
  • peekViewResult.background#202024
  • peekViewResult.fileForeground#d8d6d0
  • peekViewResult.lineForeground#a09d96
  • peekViewResult.matchHighlightBackground#d4a85030
  • peekViewResult.selectionBackground#2c2c3280
  • peekViewResult.selectionForeground#d8d6d0
  • peekViewTitle.background#202024
  • peekViewTitleDescription.foreground#a09d96
  • peekViewTitleLabel.foreground#d8d6d0
  • problemsErrorIcon.foreground#c87858
  • problemsInfoIcon.foreground#5b98c8
  • problemsWarningIcon.foreground#d8b068
  • progressBar.background#5b98c8
  • quickInput.background#26262b
  • quickInput.foreground#d8d6d0
  • quickInputList.focusBackground#2c2c32
  • quickInputList.focusForeground#d8d6d0
  • quickInputList.focusIconForeground#5b98c8
  • quickInputTitle.background#202024
  • sash.hoverBorder#5b98c8
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#ffffff14
  • scrollbarSlider.background#ffffff0a
  • scrollbarSlider.hoverBackground#ffffff14
  • selection.background#5b98c830
  • settings.checkboxBackground#202024
  • settings.checkboxBorder#252529
  • settings.checkboxForeground#d8d6d0
  • settings.dropdownBackground#202024
  • settings.dropdownBorder#252529
  • settings.dropdownForeground#d8d6d0
  • settings.focusedRowBackground#2c2c3240
  • settings.headerForeground#d8d6d0
  • settings.modifiedItemIndicator#5b98c8
  • settings.numberInputBackground#202024
  • settings.numberInputBorder#252529
  • settings.numberInputForeground#d8d6d0
  • settings.rowHoverBackground#20202440
  • settings.textInputBackground#202024
  • settings.textInputBorder#252529
  • settings.textInputForeground#d8d6d0
  • sideBar.background#1a1a1e
  • sideBar.border#1e1e22
  • sideBar.dropBackground#2c2c3260
  • sideBar.foreground#a09d96
  • sideBarSectionHeader.background#202024
  • sideBarSectionHeader.border#1e1e22
  • sideBarSectionHeader.foreground#d8d6d0
  • sideBarTitle.foreground#d8d6d0
  • statusBar.background#202024
  • statusBar.border#1e1e22
  • statusBar.debuggingBackground#d4a85020
  • statusBar.debuggingBorder#d4a85040
  • statusBar.debuggingForeground#d4a850
  • statusBar.foreground#706d67
  • statusBar.noFolderBackground#1a1a1e
  • statusBar.noFolderBorder#1e1e22
  • statusBar.noFolderForeground#706d67
  • statusBarItem.activeBackground#d8d6d010
  • statusBarItem.errorBackground#c8785818
  • statusBarItem.errorForeground#c87858
  • statusBarItem.hoverBackground#d8d6d008
  • statusBarItem.prominentBackground#5b98c818
  • statusBarItem.prominentForeground#5b98c8
  • statusBarItem.prominentHoverBackground#5b98c828
  • statusBarItem.remoteBackground#5b98c818
  • statusBarItem.remoteForeground#5b98c8
  • statusBarItem.warningBackground#d8b06818
  • statusBarItem.warningForeground#d8b068
  • tab.activeBackground#141416
  • tab.activeBorder#00000000
  • tab.activeBorderTop#5b98c8
  • tab.activeForeground#d8d6d0
  • tab.activeModifiedBorder#d4a850
  • tab.border#1e1e22
  • tab.hoverBackground#20202480
  • tab.hoverForeground#d8d6d0
  • tab.inactiveBackground#202024
  • tab.inactiveForeground#706d67
  • tab.inactiveModifiedBorder#d4a85060
  • tab.lastPinnedBorder#252529
  • tab.unfocusedActiveBackground#141416
  • tab.unfocusedActiveBorderTop#5b98c860
  • tab.unfocusedActiveForeground#a09d96
  • tab.unfocusedInactiveBackground#1a1a1e
  • tab.unfocusedInactiveForeground#4c4a44
  • terminal.ansiBlack#1a1a1e
  • terminal.ansiBlue#5b98c8
  • terminal.ansiBrightBlack#4c4a44
  • terminal.ansiBrightBlue#78b0d0
  • terminal.ansiBrightCyan#78d8e0
  • terminal.ansiBrightGreen#78b8c8
  • terminal.ansiBrightMagenta#c0a0e0
  • terminal.ansiBrightRed#d89878
  • terminal.ansiBrightWhite#eae8e2
  • terminal.ansiBrightYellow#e0be68
  • terminal.ansiCyan#60c8d8
  • terminal.ansiGreen#5898b0
  • terminal.ansiMagenta#a888c8
  • terminal.ansiRed#c87858
  • terminal.ansiWhite#d8d6d0
  • terminal.ansiYellow#d4a850
  • terminal.background#202024
  • terminal.border#252529
  • terminal.foreground#d8d6d0
  • terminal.selectionBackground#2c2c32cc
  • terminal.selectionForeground#d8d6d0
  • terminalCursor.background#0e0e10
  • terminalCursor.foreground#d8d6d0
  • testing.iconErrored#c87858
  • testing.iconFailed#c87858
  • testing.iconPassed#5898b0
  • testing.iconQueued#706d67
  • testing.iconSkipped#706d67
  • testing.iconUnset#4c4a44
  • testing.peekBorder#c87858
  • testing.peekHeaderBackground#c8785818
  • testing.runAction#5898b0
  • titleBar.activeBackground#202024
  • titleBar.activeForeground#a09d96
  • titleBar.border#1e1e22
  • titleBar.inactiveBackground#202024
  • titleBar.inactiveForeground#706d67
  • tree.indentGuidesStroke#4c4a44
  • tree.tableColumnsBorder#1e1e22
  • walkThrough.embeddedEditorBackground#1a1a1e
  • walkthrough.stepTitle.foreground#d8d6d0
  • welcomePage.background#141416
  • welcomePage.progress.background#202024
  • welcomePage.progress.foreground#5b98c8
  • welcomePage.tileBackground#1a1a1e
  • welcomePage.tileBorder#1e1e22
  • welcomePage.tileHoverBackground#202024
  • widget.border#252529
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a09d96italic
comment.block.documentation#a09d96italic
string, string.quoted#5898b0
constant.numeric#d8b068
constant.language#a888c8
constant.character.escape#60c8d8
variable#d8d6d0
punctuation#706d67
storage.modifier#a888c8italic
keyword.control.python, keyword.operator.logical.python, keyword.operator.python, storage.type.function.python, storage.type.class.python#5b98c8
entity.name.function.python, meta.function-call.python entity.name.function, support.function.python#78b0d0
entity.name.function.decorator.python, meta.function.decorator.python#a888c8italic
entity.name.type.class.python, support.type.python#60c8d8
variable.parameter.function.language.python#c0d0e0italic
variable.language.special.self.python, variable.parameter.function.language.special.self.python#5b98c8italic
string.quoted.docstring.multi.python#a09d96italic
meta.fstring.python constant.character#60c8d8
keyword.control.js, keyword.control.flow.js, keyword.operator.js, keyword.control.conditional.js, keyword.control.loop.js, storage.type.js, keyword.control.import.js, keyword.control.export.js, keyword.control.from.js#d4a850
entity.name.function.js, support.function.js, meta.function-call.js entity.name.function#e0be68
entity.name.type.class.js, support.class.js#d8c898
variable.other.constant.js#c0d0e0
variable.language.this.js#d4a850italic
entity.name.tag.js, support.class.component.js#c88840
string.template.js, punctuation.definition.template-expression#5898b0
keyword.control.ts, keyword.control.flow.ts, keyword.operator.ts, storage.type.ts, keyword.control.import.ts, keyword.control.export.ts, keyword.control.tsx, storage.type.tsx#d4a850
entity.name.function.ts, entity.name.function.tsx, support.function.ts#e0be68
entity.name.type.ts, entity.name.type.tsx, entity.name.type.interface.ts, entity.name.type.alias.ts, entity.name.type.enum.ts#60c8d8
keyword.operator.type.ts, keyword.operator.type.tsx, keyword.control.as.ts, keyword.control.type.ts#d4a850italic
support.type.builtin.ts, support.type.primitive.ts#88b8d8
entity.name.type.class.ts, entity.name.type.class.tsx#d8c898
variable.language.this.ts, variable.language.this.tsx#d4a850italic
entity.name.tag.html, entity.name.tag, punctuation.definition.tag#c88840
entity.other.attribute-name.html, entity.other.attribute-name#d8c898italic
string.quoted.double.html, string.quoted.single.html, meta.attribute string#5898b0
comment.block.html#a09d96italic
entity.name.tag.structure.any.html, entity.name.tag.block.any.html#c88840
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name.css#88b8d8
support.constant.property-value.css, meta.property-value.css, support.constant.color.css#c0d0e0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e0be68
entity.name.tag.css, entity.name.tag.scss#c88840
keyword.control.at-rule.css, keyword.control.at-rule.scss#a888c8
entity.other.attribute-name.pseudo-class.css#60c8d8italic
constant.numeric.css, keyword.other.unit.css#d8b068
variable.scss, variable.css#5b98c8
support.type.property-name.json, string.json support.type.property-name#88b8d8
string.quoted.double.json#c0d0e0
constant.numeric.json#d8b068
constant.language.json#a888c8
punctuation.support.type.property-name.json#706d67
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.DML.II.sql, storage.type.sql#a888c8
entity.name.function.sql, support.function.sql#b8b0d0
constant.other.table-name.sql#c0d0e0
keyword.operator.sql#a888c8
string.quoted.sql#5898b0
keyword.control.rust, keyword.other.rust, storage.type.rust, keyword.other.fn.rust#c88840
entity.name.function.rust, meta.function.call.rust entity.name.function#d8c898
entity.name.type.rust, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.trait.rust#d4a850
entity.name.lifetime.rust#5b98c8italic
keyword.operator.borrow.rust, keyword.operator.dereference.rust#c87858
entity.name.namespace.rust, entity.name.module.rust#88b8d8
support.macro.rust, entity.name.function.macro.rust#60c8d8
storage.modifier.rust#a888c8italic
keyword.control.go, keyword.function.go, keyword.package.go, keyword.import.go, keyword.type.go, keyword.var.go, keyword.const.go, keyword.struct.go, keyword.interface.go, keyword.map.go, keyword.channel.go#60c8d8
entity.name.function.go, support.function.go#78d8e0
entity.name.type.go#88b8d8
storage.type.go#5b98c8
entity.name.package.go#c0d0e0
storage.type.error.go#c87858
keyword.operator.go, keyword.operator.assignment.go, keyword.operator.channel.go#60c8d8
heading.1.markdown entity.name#d4a850bold
heading.2.markdown entity.name#e0be68
heading.3.markdown entity.name, heading.4.markdown entity.name#d8c898
markup.bold.markdown#d8d6d0bold
markup.italic.markdown#d8d6d0italic
markup.inline.raw.string.markdown#5b98c8
string.other.link.title.markdown#88b8d8
markup.underline.link.markdown#706d67
entity.name.tag.yaml, keyword.key.toml#88b8d8
string.unquoted.plain.out.yaml, string.quoted.yaml#c0d0e0
constant.language.boolean.yaml, constant.language.boolean.toml#a888c8
punctuation.definition.block.sequence.item.yaml#d4a850
keyword.control.shell, storage.type.function.shell#d4a850
variable.other.shell, punctuation.definition.variable.shell#5b98c8
string.quoted.double.shell, string.quoted.single.shell#5898b0
support.function.builtin.shell#e0be68
keyword.other.special-method.dockerfile#c88840bold