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#00d88230
  • activityBar.activeBorder#00ff9d
  • activityBar.activeFocusBorder#00ff9d
  • activityBar.background#080c09
  • activityBar.border#080c09
  • activityBar.foreground#c8dcd0
  • activityBarBadge.background#00d882
  • activityBarBadge.foreground#040a06
  • activityBarTop.foreground#00d882
  • activityBarTop.inactiveForeground#2e4a38
  • banner.background#0d1a10
  • banner.foreground#e8f0ec
  • banner.iconForeground#00d882
  • breadcrumb.activeSelectionForeground#00ff9d
  • breadcrumb.background#0b140c
  • breadcrumb.focusForeground#00ff9d
  • breadcrumb.foreground#5a7a64
  • breadcrumbPicker.background#0b140c
  • button.background#007848
  • button.foreground#ffffff
  • button.hoverBackground#00b86e
  • button.secondaryBackground#05965c
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#02b46d
  • charts.blue#00d882
  • charts.foreground#c8dcd0
  • charts.green#00ff9d
  • charts.lines#1a3020
  • charts.orange#ff8c6a
  • charts.purple#c870ff
  • charts.red#ff3a4a
  • charts.yellow#f5c842
  • chat.avatarBackground#111611
  • chat.avatarForeground#e8f0ec
  • chat.requestBorder#1a3020
  • commandCenter.activeBackground#0d1a10
  • commandCenter.background#060806
  • commandCenter.border#1a3d26
  • contrastActiveBorder#00000000
  • debugIcon.pauseForeground#f5c842
  • debugIcon.restartForeground#4dc9ff
  • debugIcon.stopForeground#ff5c6a
  • debugToolBar.background#0a1810
  • debugToolBar.border#1a3020
  • diffEditor.diagonalFill#ffffff20
  • diffEditor.insertedLineBackground#00d88210
  • diffEditor.insertedTextBackground#00d88220
  • diffEditor.removedLineBackground#ff687810
  • diffEditor.removedTextBackground#ff687818
  • disabledForeground#3d5c48
  • dropdown.background#0b1410
  • dropdown.border#1a3d26
  • dropdown.foreground#d4ead8
  • dropdown.listBackground#0f1c14
  • editor.background#080c09
  • editor.findMatchBackground#a05a20cc
  • editor.findMatchBorder#e8903a
  • editor.findMatchHighlightBackground#7a4010d8
  • editor.findMatchHighlightBorder#e8a060
  • editor.findRangeHighlightBackground#e8903a35
  • editor.foldBackground#00d88210
  • editor.foreground#d4ead8
  • editor.lineHighlightBackground#ffffff08
  • editor.lineHighlightBorder#ffffff0d
  • editor.linkedEditingBackground#00d88228
  • editor.rangeHighlightBackground#4dc9ff12
  • editor.selectionBackground#00d88250
  • editor.selectionHighlightBackground#f5c84220
  • editor.wordHighlightBackground#f5c84228
  • editor.wordHighlightStrongBackground#85b3ff28
  • editorBracketHighlight.foreground1#f5c842
  • editorBracketHighlight.foreground2#c870ff
  • editorBracketHighlight.foreground3#4db8ff
  • editorBracketHighlight.foreground4#ff8c6a
  • editorBracketHighlight.foreground5#ff6888
  • editorBracketHighlight.foreground6#00e8c8
  • editorBracketHighlight.unexpectedBracket.foreground#ff5c6a
  • editorBracketMatch.background#00d88225
  • editorBracketMatch.border#00d88270
  • editorCodeLens.foreground#3d5c48
  • editorCursor.foreground#00ff9d
  • editorError.foreground#ff5c6a
  • editorGhostText.foreground#2e4a38
  • editorGroup.border#1a3020
  • editorGroup.dropBackground#00d88218
  • editorGroup.emptyBackground#060806
  • editorGroup.focusedEmptyBorder#00d882
  • editorGroupHeader.border#0a1410
  • editorGroupHeader.noTabsBackground#060806
  • editorGroupHeader.tabsBackground#060806
  • editorGroupHeader.tabsBorder#0f2018
  • editorGutter.addedBackground#00d882
  • editorGutter.deletedBackground#ff5c6a
  • editorGutter.foldingControlForeground#3d5c48
  • editorGutter.modifiedBackground#4dc9ff
  • editorHint.foreground#00b870
  • editorHoverWidget.background#0b1410
  • editorHoverWidget.border#1a3020
  • editorHoverWidget.foreground#d4ead8
  • editorHoverWidget.statusBarBackground#0f1c14
  • editorIndentGuide.activeBackground1#00d88245
  • editorIndentGuide.background1#1e3d2835
  • editorInfo.foreground#4dc9ff
  • editorInlayHint.background#050e0750
  • editorInlayHint.foreground#2e5a40
  • editorInlayHint.parameterBackground#10082008
  • editorInlayHint.parameterForeground#9d70e8
  • editorInlayHint.typeBackground#001a1060
  • editorInlayHint.typeForeground#00c87a
  • editorLightBulb.foreground#f5c842
  • editorLightBulbAi.foreground#00e8c8
  • editorLightBulbAutoFix.foreground#00d882
  • editorLineNumber.activeForeground#00d882
  • editorLineNumber.foreground#1e3d28
  • editorLink.activeForeground#00ff9d
  • editorOverviewRuler.addedForeground#00d88290
  • editorOverviewRuler.border#0f201870
  • editorOverviewRuler.deletedForeground#ff5c6a90
  • editorOverviewRuler.errorForeground#ff5c6acc
  • editorOverviewRuler.findMatchForeground#00d88270
  • editorOverviewRuler.infoForeground#4dc9ffcc
  • editorOverviewRuler.modifiedForeground#4dc9ff90
  • editorOverviewRuler.rangeHighlightForeground#00ff9d70
  • editorOverviewRuler.warningForeground#f5c842cc
  • editorRuler.foreground#1a302060
  • editorStickyScroll.background#0b1410
  • editorStickyScroll.border#1a3020
  • editorStickyScroll.shadow#00000088
  • editorStickyScrollHover.background#111611
  • editorSuggestWidget.background#0b1410
  • editorSuggestWidget.border#1a3020
  • editorSuggestWidget.focusHighlightForeground#00ff9d
  • editorSuggestWidget.foreground#c8dcd0
  • editorSuggestWidget.highlightForeground#00ff9d
  • editorSuggestWidget.selectedBackground#00d88240
  • editorSuggestWidget.selectedForeground#e8f0ec
  • editorWarning.foreground#f5c842
  • editorWhitespace.foreground#1e3d2860
  • editorWidget.background#0b1410
  • editorWidget.border#1a3d26
  • editorWidget.foreground#c8dcd0
  • editorWidget.resizeBorder#00d882
  • extensionIcon.verifiedForeground#00d882
  • focusBorder#00d882
  • foreground#d4ead8
  • gitDecoration.addedResourceForeground#e8d060
  • gitDecoration.conflictingResourceForeground#4db8ff
  • gitDecoration.deletedResourceForeground#ff6878
  • gitDecoration.ignoredResourceForeground#3a4a3abe
  • gitDecoration.modifiedResourceForeground#00d882
  • gitDecoration.renamedResourceForeground#e8d060
  • gitDecoration.stageDeletedResourceForeground#f5c842
  • gitDecoration.stageModifiedResourceForeground#f5c842
  • gitDecoration.submoduleResourceForeground#f5c842
  • gitDecoration.untrackedResourceForeground#13ff3e
  • icon.foreground#c8dcd0
  • input.background#0b1410
  • input.border#1a3d26
  • input.foreground#d4ead8
  • input.placeholderForeground#3d5c48
  • inputOption.activeBackground#00d88250
  • inputOption.activeForeground#e8f0ec
  • inputValidation.errorBackground#ff5c6a20
  • inputValidation.errorBorder#ff5c6a
  • inputValidation.errorForeground#ff5c6a
  • inputValidation.infoBackground#4dc9ff20
  • inputValidation.infoBorder#4dc9ff
  • inputValidation.infoForeground#4dc9ff
  • inputValidation.warningBackground#f5c84220
  • inputValidation.warningBorder#f5c842
  • inputValidation.warningForeground#f5c842
  • keybindingLabel.background#1a3020
  • keybindingLabel.border#00000000
  • keybindingLabel.bottomBorder#00d882
  • keybindingLabel.foreground#e8f0ec
  • list.activeSelectionBackground#00d88230
  • list.activeSelectionForeground#e8f0ec
  • list.dropBackground#000000
  • list.errorForeground#ff5c6a
  • list.focusBackground#1a3028
  • list.focusForeground#d4ead8
  • list.focusOutline#00d882
  • list.highlightForeground#00ff9d
  • list.hoverBackground#0f2018b8
  • list.hoverForeground#d4ead8
  • list.inactiveSelectionBackground#111611
  • list.inactiveSelectionForeground#b8ccbe
  • list.invalidItemForeground#ff5c6a
  • list.warningForeground#f59e0b
  • menu.background#0b1410
  • menu.border#1a3d26
  • menu.foreground#d4ead8
  • menu.selectionBackground#00d88250
  • menu.selectionBorder#00d882
  • menu.selectionForeground#00d882
  • menu.separatorBackground#1e3d28
  • menubar.selectionBackground#00d88228
  • menubar.selectionBorder#00d882
  • menubar.selectionForeground#00d882
  • merge.border#00d882
  • merge.commonContentBackground#f5c84218
  • merge.commonHeaderBackground#f5c84235
  • merge.currentContentBackground#00d88218
  • merge.currentHeaderBackground#00d88235
  • merge.incomingContentBackground#4db8ff18
  • merge.incomingHeaderBackground#4db8ff35
  • minimap.background#060806
  • minimap.errorHighlight#ff5c6a
  • minimap.findMatchHighlight#00d882b0
  • minimap.selectionHighlight#00ff9d50
  • minimap.warningHighlight#f5c842
  • minimapGutter.addedBackground#00d882
  • minimapGutter.deletedBackground#ff5c6a
  • minimapGutter.modifiedBackground#4dc9ff
  • minimapSlider.activeBackground#00d88255
  • minimapSlider.background#00d88230
  • minimapSlider.hoverBackground#00d88245
  • notificationCenter.border#1a3d26
  • notificationCenterHeader.background#0f1c14
  • notificationCenterHeader.foreground#00d882
  • notificationLink.foreground#00d882
  • notifications.background#0b1410
  • notifications.border#1a3d26
  • notifications.foreground#d4ead8
  • notificationsErrorIcon.foreground#ff5c6a
  • notificationsInfoIcon.foreground#00d882
  • notificationsWarningIcon.foreground#f5c842
  • notificationToast.border#1a3d26
  • panel.background#060806
  • panel.border#1a3d2660
  • panelSection.border#1a3d26
  • panelSection.dropBackground#00d88230
  • panelSectionHeader.background#0f1c14
  • panelSectionHeader.foreground#00d882
  • panelTitle.activeBorder#00d882
  • panelTitle.activeForeground#e8f0ec
  • panelTitle.inactiveForeground#3d5c48
  • peekView.border#00d882
  • peekViewEditor.background#0b1410
  • peekViewEditor.matchHighlightBackground#00d88235
  • peekViewEditor.matchHighlightBorder#00d882
  • peekViewEditorGutter.background#0b1410
  • peekViewResult.background#060806
  • peekViewResult.fileForeground#c8dcd0
  • peekViewResult.lineForeground#3d5c48
  • peekViewResult.matchHighlightBackground#00d88235
  • peekViewResult.selectionBackground#1a3020
  • peekViewResult.selectionForeground#d4ead8
  • peekViewTitle.background#060806
  • peekViewTitleDescription.foreground#00d882
  • peekViewTitleLabel.foreground#d4ead8
  • problemsErrorIcon.foreground#ff5c6a
  • problemsInfoIcon.foreground#4dc9ff
  • problemsWarningIcon.foreground#f5c842
  • progressBar.background#00d882
  • quickInput.background#0b1410
  • quickInput.foreground#d4ead8
  • quickInputList.focusBackground#00d88260
  • quickInputList.focusForeground#e8f0ec
  • quickInputList.focusIconForeground#e8f0ec
  • sash.hoverBorder#00d882
  • scrollbar.shadow#00000028
  • scrollbarSlider.activeBackground#00d88258
  • scrollbarSlider.background#00d88228
  • scrollbarSlider.hoverBackground#00d88240
  • selection.background#1a4830
  • settings.checkboxBackground#0b1410
  • settings.checkboxBorder#1a3020
  • settings.checkboxForeground#00d882
  • settings.dropdownBackground#0b1410
  • settings.dropdownBorder#1a3020
  • settings.dropdownForeground#d4ead8
  • settings.dropdownListBorder#00d882
  • settings.headerForeground#e8f0ec
  • settings.modifiedItemIndicator#00d882
  • settings.numberInputBackground#0b1410
  • settings.numberInputBorder#1a3020
  • settings.numberInputForeground#d4ead8
  • settings.textInputBackground#0b1410
  • settings.textInputBorder#1a3020
  • settings.textInputForeground#d4ead8
  • sideBar.background#080c09
  • sideBar.border#0f201870
  • sideBar.foreground#8ea898
  • sideBarSectionHeader.background#060806
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#00d882
  • sideBarTitle.foreground#c8dcd0
  • statusBar.background#060806
  • statusBar.border#00000000
  • statusBar.debuggingBackground#0a1c12
  • statusBar.debuggingForeground#d4ead8
  • statusBar.foreground#2e6a4a
  • statusBar.noFolderBackground#00000000
  • statusBar.noFolderForeground#3d5c48
  • statusBarItem.activeBackground#00d88215
  • statusBarItem.hoverBackground#0f1c14
  • statusBarItem.hoverForeground#d4ead8
  • statusBarItem.prominentBackground#1a3020
  • statusBarItem.remoteBackground#007848
  • statusBarItem.remoteForeground#e8f0ec
  • statusBarItem.remoteHoverForeground#ffffff
  • symbolIcon.arrayForeground#f5c842
  • symbolIcon.booleanForeground#ff8c6a
  • symbolIcon.classForeground#00d882
  • symbolIcon.colorForeground#c870ff
  • symbolIcon.constantForeground#00ff9d
  • symbolIcon.constructorForeground#4dc9ff
  • symbolIcon.enumeratorForeground#f5c842
  • symbolIcon.enumeratorMemberForeground#00d882
  • symbolIcon.eventForeground#ff5c6a
  • symbolIcon.fieldForeground#4db8ff
  • symbolIcon.fileForeground#c8dcd0
  • symbolIcon.folderForeground#f5c842
  • symbolIcon.functionForeground#00d882
  • symbolIcon.interfaceForeground#4dc9ff
  • symbolIcon.keyForeground#c870ff
  • symbolIcon.keywordForeground#00d882
  • symbolIcon.methodForeground#4dc9ff
  • symbolIcon.moduleForeground#f5c842
  • symbolIcon.namespaceForeground#f5a060
  • symbolIcon.nullForeground#ff5c6a
  • symbolIcon.numberForeground#00d882
  • symbolIcon.objectForeground#f5c842
  • symbolIcon.operatorForeground#00e8c8
  • symbolIcon.packageForeground#f5a060
  • symbolIcon.propertyForeground#4db8ff
  • symbolIcon.referenceForeground#ff8c6a
  • symbolIcon.snippetForeground#00d882
  • symbolIcon.stringForeground#00c87a
  • symbolIcon.structForeground#4dc9ff
  • symbolIcon.textForeground#c8dcd0
  • symbolIcon.typeParameterForeground#c870ff
  • symbolIcon.unitForeground#00e8c8
  • symbolIcon.variableForeground#4db8ff
  • tab.activeBackground#0b140c
  • tab.activeBorder#0b140c
  • tab.activeBorderTop#00d882
  • tab.activeForeground#e8f0ec
  • tab.border#0f2018
  • tab.hoverBackground#0f2018
  • tab.hoverBorder#0f2018
  • tab.hoverForeground#b8ccbe
  • tab.inactiveBackground#060806
  • tab.inactiveForeground#3d5c48
  • tab.unfocusedActiveForeground#6a8a74
  • tab.unfocusedInactiveForeground#2e4a38
  • terminal.ansiBlack#0a0c0a
  • terminal.ansiBlue#4db8ff
  • terminal.ansiBrightBlack#3d5c48
  • terminal.ansiBrightBlue#7de4ff
  • terminal.ansiBrightCyan#4de5f0
  • terminal.ansiBrightGreen#00ff9d
  • terminal.ansiBrightMagenta#d4a5ff
  • terminal.ansiBrightRed#ff7888
  • terminal.ansiBrightWhite#e8f0ec
  • terminal.ansiBrightYellow#f5c842
  • terminal.ansiCyan#00e8c8
  • terminal.ansiGreen#00d882
  • terminal.ansiMagenta#c870ff
  • terminal.ansiRed#ff5c6a
  • terminal.ansiWhite#c8dcd0
  • terminal.ansiYellow#f5c842
  • terminal.background#060806
  • terminal.foreground#c8dcd0
  • terminal.selectionBackground#00d88245
  • terminalCursor.background#060806
  • terminalCursor.foreground#00d882
  • testing.iconErrored#f5c842
  • testing.iconFailed#ff5c6a
  • testing.iconPassed#00d882
  • testing.iconQueued#f5c842
  • testing.iconSkipped#3d5c48
  • testing.iconUnset#2e4a38
  • testing.message.error.lineBackground#ff5c6a28
  • testing.peekBorder#00d882
  • testing.peekHeaderBackground#0b1410
  • textBlockQuote.background#0b1410b0
  • textBlockQuote.border#00d88260
  • textCodeBlock.background#0b1410
  • textLink.activeForeground#00ff9d
  • textLink.foreground#00d882
  • textPreformat.foreground#f5c842
  • titleBar.activeBackground#090c0a
  • titleBar.activeForeground#e8f0ec
  • titleBar.border#00000000
  • titleBar.inactiveBackground#060806
  • titleBar.inactiveForeground#3d5c48
  • toolbar.hoverBackground#ffffff18
  • tree.indentGuidesStroke#00d88240
  • widget.border#1a3d26
  • widget.shadow#00000058

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.line, punctuation.definition.comment#1e4a30italic
comment.block#1e4a30italic
comment.block.documentation, comment.line.documentation#285a3citalic bold
string.quoted.astro#00a86a
source.astro#c8dcd0
keyword.control#ff8040bold
keyword.control.flow, keyword.control.conditional, keyword.control.loop#ff5fa8bold
keyword.control.new, keyword.operator.new#ff5fa8bold
keyword.control.import, keyword.control.export, keyword.control.from#f5c842
keyword.control.async, keyword.control.await#4db8ffbold italic
keyword.other#ff8040
storage.type#ff8040bold
storage.type.annotation#8878f8
storage.type.generic#00e87a
storage.type.function.arrow#c8dcd0
storage.modifier#ff8040italic
storage.modifier.import#6a8a78
keyword.operator#8ab0a0
keyword.operator.assignment#8ab0a0bold
keyword.operator.expression#f5c842
keyword.operator.logical#a870fabold
keyword.operator.comparison#a870fa
keyword.operator.rest, keyword.operator.spread#00e8c8
keyword.operator.type.annotation#8ab0a0
keyword.operator.ternary#f5c842
punctuation.accessor, punctuation.bracket, punctuation.definition, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.string, punctuation.section, punctuation.separator, punctuation.separator.dot-access, punctuation.terminator.statement#4a7060
punctuation.definition.annotation#8878f8
variable.other, variable.object.property#c8dcd0
meta.block variable.other#b8ccc0
variable.other.constant#4db8ffbold
variable.other.readonly#38c4e8
variable.other.macro.argument#a870fa
variable.parameter, variable.parameter.probably#ff7a90italic
variable.language#ff5fa8bold italic
meta.object.property, meta.object-binding-pattern-variable#38c4e8
entity.name.function#00d882bold
entity.name.method#38c4e8bold
entity.name.function.constructor#f5c842bold
meta.function-call#38c4e8
meta.definition.function#38c4e8
meta.definition.method#38c4e8
meta.definition.property#5a8070
string.quoted.single, string.quoted.double#00b870
string.template#00b870
meta.template.expression#f5c842
string.regexp#00e8c8
string.other.link#4db8ff
constant.numeric#00d882bold
constant.language#00e8c8bold
constant.other.variable#00b870
constant.character.escape#00e8c8
entity.name.tag#ff5fa8bold
entity.name.type#00e87abold
entity.name.type.class#00e87abold
entity.name.type.interface#4db8ffbold
entity.name.type.enum#f5c842bold
entity.name.type.module#38c4e8
entity.other#00e87a
entity.other.attribute-name#a870fa
entity.scope.name#4db8ff
support.type.primitive#ff8040bold
support.type.property-name#38c4e8
support.type.builtin#ff8040bold
support.function#38c4e8
support.class#00e87a
meta.brace#8ab0a0
meta.definition.variable#5a8070
meta.import#c8dcd0
meta.import string.quoted, meta.import.from string.quoted, meta.import.js string.quoted, meta.import.ts string.quoted, meta.import.astro string.quoted, meta.import string.quoted.single, meta.import string.quoted.double, meta.import string.quoted.single.astro, meta.import string.quoted.double.astro, meta.import string.quoted.single.js, meta.import string.quoted.double.js, meta.import string.quoted.single.ts, meta.import string.quoted.double.ts#ff7ac8
meta.object-literal.key#38c4e8
entity.name.tag.css, entity.other.attribute-name.class.css#ff8040
support.type.property-name.css#c8dcd0
support.constant.property-value.css#00a868
entity.other.attribute-name.id.css#f5c842
entity.other.attribute-name.pseudo-class.css#a870fa
support.type.property-name.json#f5c842
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a870fa
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#4db8ff
string.quoted.double.json#00a868
entity.name.tag.yaml#f5c842
invalid#ff5fa8bold underline
invalid.deprecated#ff7888
text.html.markdown fenced_code.block.language#ff8040
text.html.markdown markup.bold#ff5fa8bold
text.html.markdown markup.italic#00b870italic
text.html.markdown markup.strikethrough#ff5fa8strikethrough
text.html.markdown markup.inline.raw.string#f5c842
text.html.markdown markup.underline.link#38c4e8
text.html.markdown meta.paragraph#c8dcd0
text.html.markdown punctuation.definition.heading#4db8ffbold
text.html.markdown entity.name.section#00d882bold
text.html.markdown string.other.link.title#00b870
text.html.markdown meta.separator#1e4a30
support.class.component.jsx, support.class.component.tsx#f5c842bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#a870fa
punctuation.definition.tag.jsx, punctuation.definition.tag.tsx#4a7060
entity.name.type.ts, entity.name.type.tsx#00e87abold
entity.name.type.interface.ts, entity.name.type.interface.tsx#4db8ffbold
entity.name.type.alias.ts, entity.name.type.alias.tsx#38c4e8bold
punctuation.decorator#8878f8bold
entity.name.function.decorator#8878f8bold
support.function.magic.python#a870fabold italic
support.function.builtin.python#38c4e8
storage.type.function.lambda#a870fa
entity.name.type.parameter#c870ff
keyword.control.default#00e8c8bold