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#2db8b030
  • activityBar.activeBorder#2db8b0
  • activityBar.activeFocusBorder#2db8b0
  • activityBar.background#111c21
  • activityBar.border#111c21
  • activityBar.foreground#c0d8dc
  • activityBarBadge.background#2db8b0
  • activityBarBadge.foreground#091418
  • activityBarTop.foreground#2db8b0
  • activityBarTop.inactiveForeground#3d5560
  • banner.background#152028
  • banner.foreground#ddeef0
  • banner.iconForeground#2db8b0
  • breadcrumb.activeSelectionForeground#3dd8ce
  • breadcrumb.background#111c21
  • breadcrumb.focusForeground#3dd8ce
  • breadcrumb.foreground#5a7880
  • breadcrumbPicker.background#111c21
  • button.background#1d9e98
  • button.foreground#ffffff
  • button.hoverBackground#2db8b0
  • button.secondaryBackground#152028
  • button.secondaryForeground#2db8b0
  • button.secondaryHoverBackground#1e3340
  • charts.blue#2db8b0
  • charts.foreground#ddeef0
  • charts.green#1fa870
  • charts.lines#1e3340
  • charts.orange#e87850
  • charts.purple#b898e8
  • charts.red#f07075
  • charts.yellow#d4a83a
  • chat.avatarBackground#1a2c35
  • chat.avatarForeground#ddeef0
  • chat.requestBorder#1e3340
  • commandCenter.activeBackground#152028
  • commandCenter.background#0c1519
  • commandCenter.border#1e3340
  • contrastActiveBorder#00000000
  • debugIcon.pauseForeground#d4a83a
  • debugIcon.restartForeground#2db8b0
  • debugIcon.stopForeground#f07075
  • debugToolBar.background#0f2230
  • debugToolBar.border#1e3340
  • diffEditor.diagonalFill#1e3340
  • diffEditor.insertedLineBackground#2db8b010
  • diffEditor.insertedTextBackground#2db8b020
  • diffEditor.removedLineBackground#f0707510
  • diffEditor.removedTextBackground#f0707518
  • disabledForeground#3d5560
  • dropdown.background#10191f
  • dropdown.border#1e3340
  • dropdown.foreground#ddeef0
  • dropdown.listBackground#152028
  • editor.background#10191f
  • editor.findMatchBackground#2db8b070
  • editor.findMatchBorder#3dd8ce
  • editor.findMatchHighlightBackground#2db8b048
  • editor.findMatchHighlightBorder#2db8b090
  • editor.findRangeHighlightBackground#2db8b030
  • editor.foldBackground#2db8b012
  • editor.foreground#ddeef0
  • editor.lineHighlightBackground#2db8b00a
  • editor.lineHighlightBorder#1e3340
  • editor.linkedEditingBackground#2db8b028
  • editor.rangeHighlightBackground#6aaedd18
  • editor.selectionBackground#2db8b050
  • editor.selectionHighlightBackground#d4a83a1e
  • editor.wordHighlightBackground#d4a83a22
  • editor.wordHighlightStrongBackground#2db8b028
  • editorBracketHighlight.foreground1#d4a83a
  • editorBracketHighlight.foreground2#b898e8
  • editorBracketHighlight.foreground3#2db8b0
  • editorBracketHighlight.foreground4#e87850
  • editorBracketHighlight.foreground5#6aaedd
  • editorBracketHighlight.foreground6#3de070
  • editorBracketHighlight.unexpectedBracket.foreground#f07075
  • editorBracketMatch.background#2db8b022
  • editorBracketMatch.border#2db8b085
  • editorCodeLens.foreground#3d5560
  • editorCursor.foreground#3dd8ce
  • editorError.foreground#f07075
  • editorGhostText.foreground#2a4050
  • editorGroup.border#1e3340
  • editorGroup.dropBackground#2db8b018
  • editorGroup.emptyBackground#0c1519
  • editorGroup.focusedEmptyBorder#2db8b0
  • editorGroupHeader.border#10191f
  • editorGroupHeader.noTabsBackground#111c21
  • editorGroupHeader.tabsBackground#111c21
  • editorGroupHeader.tabsBorder#1e3340
  • editorGutter.addedBackground#1fa870
  • editorGutter.deletedBackground#b84850
  • editorGutter.foldingControlForeground#3d5560
  • editorGutter.modifiedBackground#2db8b0
  • editorHint.foreground#2db8b0
  • editorHoverWidget.background#111c21
  • editorHoverWidget.border#1e3340
  • editorHoverWidget.foreground#ddeef0
  • editorHoverWidget.statusBarBackground#1a2c35
  • editorIndentGuide.activeBackground1#2db8b055
  • editorIndentGuide.background1#1e334050
  • editorInfo.foreground#2db8b0
  • editorInlayHint.background#111c2160
  • editorInlayHint.foreground#4e7585
  • editorInlayHint.parameterBackground#281830a0
  • editorInlayHint.parameterForeground#9870c8
  • editorInlayHint.typeBackground#0d383860
  • editorInlayHint.typeForeground#2db8b0
  • editorLightBulb.foreground#d4a83a
  • editorLightBulbAi.foreground#2db8b0
  • editorLightBulbAutoFix.foreground#1fa870
  • editorLineNumber.activeForeground#2db8b0
  • editorLineNumber.foreground#1e3e48
  • editorLink.activeForeground#3dd8ce
  • editorOverviewRuler.addedForeground#1fa87090
  • editorOverviewRuler.border#1e334070
  • editorOverviewRuler.deletedForeground#b8485090
  • editorOverviewRuler.errorForeground#f07075cc
  • editorOverviewRuler.findMatchForeground#2db8b075
  • editorOverviewRuler.infoForeground#2db8b0cc
  • editorOverviewRuler.modifiedForeground#2db8b090
  • editorOverviewRuler.rangeHighlightForeground#3dd8ce70
  • editorOverviewRuler.warningForeground#d4a83acc
  • editorRuler.foreground#1e334060
  • editorStickyScroll.background#10191f
  • editorStickyScroll.border#1e3340
  • editorStickyScroll.shadow#00000092
  • editorStickyScrollHover.background#1a2c35
  • editorSuggestWidget.background#10191f
  • editorSuggestWidget.border#1e3340
  • editorSuggestWidget.focusHighlightForeground#3dd8ce
  • editorSuggestWidget.foreground#ddeef0
  • editorSuggestWidget.highlightForeground#3dd8ce
  • editorSuggestWidget.selectedBackground#2db8b045
  • editorSuggestWidget.selectedForeground#ddeef0
  • editorWarning.foreground#d4a83a
  • editorWhitespace.foreground#1e3e4860
  • editorWidget.background#10191f
  • editorWidget.border#1e3340
  • editorWidget.foreground#ddeef0
  • editorWidget.resizeBorder#2db8b0
  • extensionIcon.verifiedForeground#2db8b0
  • focusBorder#2db8b0
  • foreground#ddeef0
  • gitDecoration.addedResourceForeground#d4a83a
  • gitDecoration.conflictingResourceForeground#6aaedd
  • gitDecoration.deletedResourceForeground#f07075
  • gitDecoration.ignoredResourceForeground#3d5560b8
  • gitDecoration.modifiedResourceForeground#2db8b0
  • gitDecoration.renamedResourceForeground#d4a83a
  • gitDecoration.stageDeletedResourceForeground#d4a83a
  • gitDecoration.stageModifiedResourceForeground#d4a83a
  • gitDecoration.submoduleResourceForeground#d4a83a
  • gitDecoration.untrackedResourceForeground#3de070
  • icon.foreground#8aaab0
  • input.background#111c21
  • input.border#1e3340
  • input.foreground#ddeef0
  • input.placeholderForeground#3d5560
  • inputOption.activeBackground#2db8b050
  • inputOption.activeForeground#ddeef0
  • inputValidation.errorBackground#f0707520
  • inputValidation.errorBorder#b84850
  • inputValidation.errorForeground#f07075
  • inputValidation.infoBackground#2db8b020
  • inputValidation.infoBorder#0d8880
  • inputValidation.infoForeground#2db8b0
  • inputValidation.warningBackground#d4a83a20
  • inputValidation.warningBorder#a07820
  • inputValidation.warningForeground#d4a83a
  • keybindingLabel.background#1e3a44
  • keybindingLabel.border#00000000
  • keybindingLabel.bottomBorder#2db8b0
  • keybindingLabel.foreground#ddeef0
  • list.activeSelectionBackground#2db8b038
  • list.activeSelectionForeground#ddeef0
  • list.dropBackground#0c1519
  • list.errorForeground#f07075
  • list.focusBackground#1e3a44
  • list.focusForeground#ddeef0
  • list.focusOutline#2db8b0
  • list.highlightForeground#ddeef0
  • list.hoverBackground#1a2c35
  • list.hoverForeground#ddeef0
  • list.inactiveSelectionBackground#152028
  • list.inactiveSelectionForeground#b0ccd0
  • list.invalidItemForeground#f07075
  • list.warningForeground#e8a84a
  • menu.background#152028
  • menu.border#1e3340
  • menu.foreground#ddeef0
  • menu.selectionBackground#2db8b048
  • menu.selectionBorder#2db8b0
  • menu.selectionForeground#3dd8ce
  • menu.separatorBackground#1e3340
  • menubar.selectionBackground#2db8b028
  • menubar.selectionBorder#2db8b0
  • menubar.selectionForeground#3dd8ce
  • merge.border#2db8b0
  • merge.commonContentBackground#d4a83a18
  • merge.commonHeaderBackground#d4a83a38
  • merge.currentContentBackground#2db8b018
  • merge.currentHeaderBackground#2db8b038
  • merge.incomingContentBackground#6aaedd18
  • merge.incomingHeaderBackground#6aaedd38
  • minimap.background#111c21
  • minimap.errorHighlight#f07075
  • minimap.findMatchHighlight#2db8b0c0
  • minimap.selectionHighlight#2db8b058
  • minimap.warningHighlight#d4a83a
  • minimapGutter.addedBackground#1fa870
  • minimapGutter.deletedBackground#b84850
  • minimapGutter.modifiedBackground#2db8b0
  • minimapSlider.activeBackground#2db8b068
  • minimapSlider.background#2db8b038
  • minimapSlider.hoverBackground#2db8b050
  • notificationCenter.border#1e3340
  • notificationCenterHeader.background#1a2c35
  • notificationCenterHeader.foreground#2db8b0
  • notificationLink.foreground#3dd8ce
  • notifications.background#152028
  • notifications.border#1e3340
  • notifications.foreground#ddeef0
  • notificationsErrorIcon.foreground#f07075
  • notificationsInfoIcon.foreground#2db8b0
  • notificationsWarningIcon.foreground#d4a83a
  • notificationToast.border#1e3340
  • panel.background#111c21
  • panel.border#1e334060
  • panelSection.border#1e3340
  • panelSection.dropBackground#2db8b035
  • panelSectionHeader.background#152028
  • panelSectionHeader.foreground#2db8b0
  • panelTitle.activeBorder#2db8b0
  • panelTitle.activeForeground#ddeef0
  • panelTitle.inactiveForeground#3d5560
  • peekView.border#2db8b0
  • peekViewEditor.background#10191f
  • peekViewEditor.matchHighlightBackground#2db8b038
  • peekViewEditor.matchHighlightBorder#2db8b0
  • peekViewEditorGutter.background#10191f
  • peekViewResult.background#111c21
  • peekViewResult.fileForeground#ddeef0
  • peekViewResult.lineForeground#5a7880
  • peekViewResult.matchHighlightBackground#2db8b038
  • peekViewResult.selectionBackground#1e3340
  • peekViewResult.selectionForeground#ddeef0
  • peekViewTitle.background#0c1519
  • peekViewTitleDescription.foreground#2db8b0
  • peekViewTitleLabel.foreground#ddeef0
  • problemsErrorIcon.foreground#f07075
  • problemsInfoIcon.foreground#2db8b0
  • problemsWarningIcon.foreground#d4a83a
  • progressBar.background#2db8b0
  • quickInput.background#10191f
  • quickInput.foreground#ddeef0
  • quickInputList.focusBackground#2db8b065
  • quickInputList.focusForeground#ddeef0
  • quickInputList.focusIconForeground#ddeef0
  • sash.hoverBorder#2db8b0
  • scrollbar.shadow#0c151980
  • scrollbarSlider.activeBackground#1a5a5878
  • scrollbarSlider.background#1a5a5838
  • scrollbarSlider.hoverBackground#1a5a5858
  • selection.background#0e4848
  • settings.checkboxBackground#10191f
  • settings.checkboxBorder#1e3340
  • settings.checkboxForeground#2db8b0
  • settings.dropdownBackground#10191f
  • settings.dropdownBorder#1e3340
  • settings.dropdownForeground#ddeef0
  • settings.dropdownListBorder#2db8b0
  • settings.headerForeground#ddeef0
  • settings.modifiedItemIndicator#2db8b0
  • settings.numberInputBackground#10191f
  • settings.numberInputBorder#1e3340
  • settings.numberInputForeground#ddeef0
  • settings.textInputBackground#10191f
  • settings.textInputBorder#1e3340
  • settings.textInputForeground#ddeef0
  • sideBar.background#111c21
  • sideBar.border#1e334070
  • sideBar.foreground#8aaab0
  • sideBarSectionHeader.background#0c1519
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#2db8b0
  • sideBarTitle.foreground#c0d8dc
  • statusBar.background#111c21
  • statusBar.border#00000000
  • statusBar.debuggingBackground#1a3848
  • statusBar.debuggingForeground#ddeef0
  • statusBar.foreground#4e7585
  • statusBar.noFolderBackground#00000000
  • statusBar.noFolderForeground#6a9098
  • statusBarItem.activeBackground#2db8b018
  • statusBarItem.hoverBackground#1a2c35
  • statusBarItem.hoverForeground#ddeef0
  • statusBarItem.prominentBackground#1a3a3a
  • statusBarItem.remoteBackground#0a6e68
  • statusBarItem.remoteForeground#e8f8f8
  • statusBarItem.remoteHoverForeground#ddeef0
  • symbolIcon.arrayForeground#d4a83a
  • symbolIcon.booleanForeground#e87850
  • symbolIcon.classForeground#2db8b0
  • symbolIcon.colorForeground#b898e8
  • symbolIcon.constantForeground#3dd8ce
  • symbolIcon.constructorForeground#6aaedd
  • symbolIcon.enumeratorForeground#d4a83a
  • symbolIcon.enumeratorMemberForeground#2db8b0
  • symbolIcon.eventForeground#f07075
  • symbolIcon.fieldForeground#6aaedd
  • symbolIcon.fileForeground#ddeef0
  • symbolIcon.folderForeground#d4a83a
  • symbolIcon.functionForeground#6aaedd
  • symbolIcon.interfaceForeground#2db8b0
  • symbolIcon.keyForeground#b898e8
  • symbolIcon.keywordForeground#2db8b0
  • symbolIcon.methodForeground#6aaedd
  • symbolIcon.moduleForeground#d4a83a
  • symbolIcon.namespaceForeground#e87850
  • symbolIcon.nullForeground#f07075
  • symbolIcon.numberForeground#d4a83a
  • symbolIcon.objectForeground#d4a83a
  • symbolIcon.operatorForeground#5a7880
  • symbolIcon.packageForeground#d4a83a
  • symbolIcon.propertyForeground#6aaedd
  • symbolIcon.referenceForeground#e87850
  • symbolIcon.snippetForeground#3dd8ce
  • symbolIcon.stringForeground#2db8b0
  • symbolIcon.structForeground#6aaedd
  • symbolIcon.textForeground#c0d8dc
  • symbolIcon.typeParameterForeground#b898e8
  • symbolIcon.unitForeground#2db8b0
  • symbolIcon.variableForeground#8aaab0
  • tab.activeBackground#10191f
  • tab.activeBorder#10191f
  • tab.activeBorderTop#2db8b0
  • tab.activeForeground#ddeef0
  • tab.border#1e3340
  • tab.hoverBackground#1a2c35
  • tab.hoverBorder#1e3340
  • tab.hoverForeground#b0ccd0
  • tab.inactiveBackground#111c21
  • tab.inactiveForeground#3d5560
  • tab.unfocusedActiveForeground#6a9098
  • tab.unfocusedInactiveForeground#2e4a52
  • terminal.ansiBlack#111c21
  • terminal.ansiBlue#6aaedd
  • terminal.ansiBrightBlack#3d5560
  • terminal.ansiBrightBlue#60c8f0
  • terminal.ansiBrightCyan#3dd8ce
  • terminal.ansiBrightGreen#3de070
  • terminal.ansiBrightMagenta#c898f0
  • terminal.ansiBrightRed#f09090
  • terminal.ansiBrightWhite#eef8f8
  • terminal.ansiBrightYellow#e8cc60
  • terminal.ansiCyan#2db8b0
  • terminal.ansiGreen#1fa870
  • terminal.ansiMagenta#a870d8
  • terminal.ansiRed#e05858
  • terminal.ansiWhite#b0ccd0
  • terminal.ansiYellow#c8a030
  • terminal.background#0c1519
  • terminal.foreground#c8e8e8
  • terminal.selectionBackground#2db8b070
  • terminalCursor.background#111c21
  • terminalCursor.foreground#2db8b0
  • testing.iconErrored#d4a83a
  • testing.iconFailed#f07075
  • testing.iconPassed#1fa870
  • testing.iconQueued#d4a83a
  • testing.iconSkipped#5a7880
  • testing.iconUnset#3d5560
  • testing.message.error.lineBackground#f0707528
  • testing.peekBorder#2db8b0
  • testing.peekHeaderBackground#10191f
  • textBlockQuote.background#111c21b8
  • textBlockQuote.border#1e5858
  • textCodeBlock.background#111c21
  • textLink.activeForeground#3dd8ce
  • textLink.foreground#2db8b0
  • textPreformat.foreground#d4a83a
  • titleBar.activeBackground#111c21
  • titleBar.activeForeground#ddeef0
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0c1519
  • titleBar.inactiveForeground#4e7585
  • toolbar.hoverBackground#ffffff18
  • tree.indentGuidesStroke#2db8b040
  • widget.border#1e3340
  • widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.line, punctuation.definition.comment#2e5060italic
comment.block#2e5060italic
comment.block.documentation, comment.line.documentation#3a6070italic bold
string.quoted.astro#2db8b0
source.astro#ddeef0
keyword.control#e87850bold
keyword.control.flow, keyword.control.conditional, keyword.control.loop#e87850bold
keyword.control.new, keyword.operator.new#f07075bold
keyword.control.import, keyword.control.export, keyword.control.from#8aaab0
keyword.control.async, keyword.control.await#3dd8cebold italic
keyword.other#d4a83a
storage.type#d4a83abold
storage.type.annotation#c870a0
storage.type.generic#e89858
storage.type.function.arrow#7a9098
storage.modifier#e87850italic
storage.modifier.import#2db8b0
keyword.operator#5a8898
keyword.operator.assignment#5a8898bold
keyword.operator.expression#e87850
keyword.operator.logical#c898e8bold
keyword.operator.comparison#c898e8
keyword.operator.rest, keyword.operator.spread#2db8b0
keyword.operator.type.annotation#7a9098
keyword.operator.ternary#e87850
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#3a6878
punctuation.definition.annotation#c870a0
variable.other, variable.object.property#e89858
meta.block variable.other#c0d8dc
variable.other.constant#3dd8cebold
variable.other.readonly#6aaedd
variable.other.macro.argument#c898e8
variable.parameter, variable.parameter.probably#6aaedditalic
variable.language#f07075bold italic
meta.object.property, meta.object-binding-pattern-variable#6aaedd
entity.name.function#2db8b0bold
entity.name.method#3dd8cebold
entity.name.function.constructor#e87850bold
meta.function-call#2db8b0
meta.definition.function#2db8b0
meta.definition.method#2db8b0
meta.definition.property#98bcc0
string.quoted.single, string.quoted.double#2db8b0
string.template#2db8b0
meta.template.expression#e87850
string.regexp#3de070
string.other.link#3dd8ce
constant.numeric#6aaeddbold
constant.language#3dd8cebold
constant.other.variable#2db8b0
constant.character.escape#3de070
entity.name.tag#e04868bold
entity.name.type#e89858bold
entity.name.type.class#e89858bold
entity.name.type.interface#3dd8cebold
entity.name.type.enum#d4a83abold
entity.name.type.module#2db8b0
entity.other#e89858
entity.other.attribute-name#e87850
entity.scope.name#2db8b0
support.type.primitive#e87850bold
support.type.property-name#2db8b0
support.type.builtin#e87850bold
support.function#d4a83a
support.class#e89858
meta.brace#7a9098
meta.definition.variable#98bcc0
meta.import#c0d8dc
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#e87850
meta.object-literal.key#3dd8ce
entity.name.tag.css, entity.other.attribute-name.class.css#e87850
support.type.property-name.css#c870a0
support.constant.property-value.css#2db8b0
entity.other.attribute-name.id.css#3dd8ce
entity.other.attribute-name.pseudo-class.css#c898e8
support.type.property-name.json#e87850
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c898e8
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#6aaedd
string.quoted.double.json#2db8b0
entity.name.tag.yaml#e87850
invalid#f07075bold underline
invalid.deprecated#c870a0
text.html.markdown fenced_code.block.language#9870c8
text.html.markdown markup.bold#e87850bold
text.html.markdown markup.italic#c898e8italic
text.html.markdown markup.strikethrough#f07075strikethrough
text.html.markdown markup.inline.raw.string#3de070
text.html.markdown markup.underline.link#6aaedd
text.html.markdown meta.paragraph#b0ccd0
text.html.markdown punctuation.definition.heading#d4a83abold
text.html.markdown entity.name.section#e8d040bold
text.html.markdown string.other.link.title#2db8b0
text.html.markdown meta.separator#4a7080
support.class.component.jsx, support.class.component.tsx#e89858bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#f08898
punctuation.definition.tag.jsx, punctuation.definition.tag.tsx#7a9098
entity.name.type.ts, entity.name.type.tsx#e89858bold
entity.name.type.interface.ts, entity.name.type.interface.tsx#3dd8cebold
entity.name.type.alias.ts, entity.name.type.alias.tsx#6aaeddbold
punctuation.decorator#2db8b0bold
entity.name.function.decorator#2db8b0bold
support.function.magic.python#c898e8bold italic
support.function.builtin.python#2db8b0
storage.type.function.lambda#c898e8
entity.name.type.parameter#c898e8
keyword.control.default#2db8b0bold
Lynx Theme Pro + (Icons) by Gohit X - VS Code Theme