Skip to main content
Coding Theme

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#D1E8F8FF
  • activityBar.background#111213
  • activityBar.border#1d1e20
  • activityBar.foreground#D1E8F8FF
  • activityBar.inactiveForeground#9bb1be
  • activityBarBadge.background#C25B7FF5
  • activityBarBadge.foreground#FFFFFFFF
  • activityBarTop.activeBorder#D1E8F8FF
  • activityBarTop.dropBorder#D1E8F8FF
  • activityBarTop.foreground#D1E8F8FF
  • activityBarTop.inactiveForeground#9bb1be
  • badge.background#B05F41FF
  • badge.foreground#D1E8F8FF
  • banner.background#14402FFF
  • banner.foreground#D1E8F8FF
  • banner.iconForeground#1BDE94FF
  • button.background#D1E8F8FF
  • button.foreground#000000FF
  • button.hoverBackground#BCD1E0FF
  • button.secondaryBackground#E5E5E51A
  • button.secondaryForeground#D1E8F8FF
  • button.secondaryHoverBackground#e5e5e50c
  • button.separator#94A5B1FF
  • chat.avatarBackground#1D3233FF
  • chat.avatarForeground#9bb1be
  • chat.requestBorder#1d1e20
  • chat.slashCommandBackground#00000000
  • chat.slashCommandForeground#D1E8F8FF
  • checkbox.background#0c0d0e
  • checkbox.border#1d1e20
  • checkbox.foreground#D1E8F8FF
  • commandCenter.activeBackground#1A2E2FFF
  • commandCenter.activeBorder#1d1e20
  • commandCenter.activeForeground#9bb1be
  • commandCenter.background#17181a
  • commandCenter.border#1d1e20
  • commandCenter.foreground#9bb1be
  • debugIcon.breakpointForeground#81568b
  • debugToolBar.background#17181a
  • debugToolBar.border#1d1e20
  • descriptionForeground#6B7982FF
  • diffEditor.border#1d1e20
  • diffEditor.diagonalFill#1d1e20
  • diffEditor.insertedLineBackground#6EC58E16
  • diffEditor.insertedTextBackground#6EC58E20
  • diffEditor.move.border#1d1e20
  • diffEditor.moveActive.border#1d1e20
  • diffEditor.removedLineBackground#a7666616
  • diffEditor.removedTextBackground#a7666620
  • disabledForeground#576F7CFF
  • dropdown.background#0c0d0e
  • dropdown.border#1d1e20
  • dropdown.foreground#D1E8F8FF
  • dropdown.listBackground#17181a
  • editor.background#111213
  • editor.findMatchBackground#37494e8a
  • editor.findMatchBorder#0000
  • editor.findMatchHighlightBackground#37494e55
  • editor.findMatchHighlightBorder#0000
  • editor.findRangeHighlightBackground#37494e55
  • editor.findRangeHighlightBorder#0000
  • editor.foldBackground#00000000
  • editor.foreground#9bb1be
  • editor.lineHighlightBackground#58636d1e
  • editor.rangeHighlightBackground#37494e55
  • editor.selectionBackground#e5e5e50c
  • editor.snippetFinalTabstopHighlightBackground#37494e55
  • editor.snippetFinalTabstopHighlightBorder#37494e
  • editor.snippetTabstopHighlightBackground#37494e55
  • editor.snippetTabstopHighlightBorder#0000
  • editor.wordHighlightBackground#37494e55
  • editor.wordHighlightBorder#0000
  • editor.wordHighlightStrongBackground#37494e55
  • editor.wordHighlightStrongBorder#0000
  • editorBracketHighlight.foreground1#59686b
  • editorBracketHighlight.foreground2#6e909b
  • editorBracketHighlight.foreground3#806e79
  • editorBracketHighlight.foreground4#51718a
  • editorBracketHighlight.foreground5#7d816c
  • editorBracketHighlight.foreground6#938479
  • editorBracketHighlight.unexpectedBracket.foreground#F87272FF
  • editorBracketMatch.border#819893FF
  • editorCodeLens.foreground#375860FF
  • editorCursor.background#D1E8F8FF
  • editorCursor.foreground#D1E8F8FF
  • editorError.foreground#F87272FF
  • editorGhostText.foreground#FFFFFF61
  • editorGroup.border#1d1e20
  • editorGroup.dropBackground#72C0C90E
  • editorGroupHeader.border#0000
  • editorGroupHeader.noTabsBackground#111213
  • editorGroupHeader.tabsBackground#111213
  • editorGroupHeader.tabsBorder#1d1e20
  • editorGutter.addedBackground#6EC58E
  • editorGutter.deletedBackground#a76666
  • editorGutter.modifiedBackground#a284b6
  • editorHint.foreground#4a6060
  • editorHoverWidget.background#17181a
  • editorHoverWidget.border#1d1e20
  • editorHoverWidget.foreground#9bb1be
  • editorInfo.foreground#5EEAD4FF
  • editorLightBulb.foreground#BBB466FE
  • editorLightBulbAi.foreground#BBB466FE
  • editorLightBulbAutoFix.foreground#19D08AFE
  • editorLineNumber.activeForeground#D1E8F8FF
  • editorLineNumber.dimmedForeground#1C2E31FF
  • editorLineNumber.foreground#2b2e31
  • editorLink.activeForeground#578a97
  • editorOverviewRuler.addedForeground#6EC58E
  • editorOverviewRuler.background#0c0d0e
  • editorOverviewRuler.border#1d1e20
  • editorOverviewRuler.commentForeground#FFFFFF61
  • editorOverviewRuler.commentUnresolvedForeground#FFFFFF61
  • editorOverviewRuler.deletedForeground#A76666
  • editorOverviewRuler.errorForeground#F87272FF
  • editorOverviewRuler.findMatchForeground#19D08A2D
  • editorOverviewRuler.infoForeground#5EEAD4FF
  • editorOverviewRuler.modifiedForeground#a284b6
  • editorOverviewRuler.warningForeground#F5CE68FF
  • editorOverviewRuler.wordHighlightForeground#72C0C915
  • editorOverviewRuler.wordHighlightStrongForeground#72C0C920
  • editorStickyScroll.background#111213
  • editorStickyScroll.border#1d1e20
  • editorStickyScroll.shadow#00000058
  • editorStickyScrollHover.background#e5e5e50c
  • editorUnicodeHighlight.border#F5CE68FF
  • editorWarning.foreground#F5CE68FF
  • editorWhitespace.foreground#9EA3A215
  • editorWidget.background#17181a
  • editorWidget.border#1d1e20
  • editorWidget.foreground#9bb1be
  • editorWidget.resizeBorder#1d1e20
  • errorForeground#F87272FF
  • errorLens.errorBackground#00000000
  • errorLens.errorBackgroundLight#00000000
  • errorLens.errorForeground#F87272FF
  • errorLens.errorForegroundLight#C96E6EFF
  • errorLens.hintBackground#00000000
  • errorLens.hintBackgroundLight#00000000
  • errorLens.hintForeground#4a6060
  • errorLens.hintForegroundLight#597676
  • errorLens.infoBackground#00000000
  • errorLens.infoBackgroundLight#00000000
  • errorLens.infoForeground#5EEAD4FF
  • errorLens.infoForegroundLight#2DA5C4FF
  • errorLens.warningBackground#00000000
  • errorLens.warningBackgroundLight#00000000
  • errorLens.warningForeground#F5CE68FF
  • errorLens.warningForegroundLight#CBC36FFF
  • extensionBadge.remoteBackground#14402FFF
  • extensionBadge.remoteForeground#19D08AFE
  • extensionIcon.preReleaseForeground#14402ffa
  • extensionIcon.sponsorForeground#C25B7FF5
  • extensionIcon.starForeground#BBB466FE
  • extensionIcon.verifiedForeground#76B2E4FF
  • focusBorder#2F3033FF
  • foreground#9bb1be
  • gitDecoration.addedResourceForeground#6EC58E
  • gitDecoration.conflictingResourceForeground#a77e66
  • gitDecoration.deletedResourceForeground#a76666
  • gitDecoration.ignoredResourceForeground#576F7CFF
  • gitDecoration.modifiedResourceForeground#af8ec5
  • gitDecoration.renamedResourceForeground#8ea766
  • gitDecoration.untrackedResourceForeground#8c95c0
  • gitlens.decorations.addedForegroundColor#6EC58E
  • gitlens.decorations.deletedForegroundColor#a76666
  • gitlens.decorations.ignoredForegroundColor#576F7CFF
  • gitlens.decorations.modifiedForegroundColor#a284b6
  • gitlens.decorations.renamedForegroundColor#8ea766
  • gitlens.decorations.untrackedForegroundColor#8a93be
  • gitlens.graphChangesColumnAddedColor#6EC58E
  • gitlens.graphChangesColumnDeletedColor#a76666
  • gitlens.graphLane10Color#A2B86EFF
  • gitlens.graphLane1Color#5EEAD4FF
  • gitlens.graphLane2Color#86EFACFF
  • gitlens.graphLane3Color#F5CE68FF
  • gitlens.graphLane4Color#F87272FF
  • gitlens.graphLane5Color#34BBBBFF
  • gitlens.graphLane6Color#AA6EB8FF
  • gitlens.graphLane7Color#846EB8FF
  • gitlens.graphLane8Color#6EB89CFF
  • gitlens.graphLane9Color#B8986EFF
  • icon.foreground#9bb1be
  • inlineChatInput.placeholderForeground#81919AFF
  • input.background#0c0d0e
  • input.border#1d1e20
  • input.foreground#D1E8F8FF
  • input.placeholderForeground#81919AFF
  • inputOption.activeBackground#14402FFF
  • inputOption.activeBorder#14402FFF
  • inputOption.activeForeground#D1E8F8FF
  • inputOption.hoverBackground#e5e5e50c
  • inputValidation.errorBackground#3D2727FF
  • inputValidation.errorBorder#523434FF
  • inputValidation.errorForeground#F87272FF
  • inputValidation.infoBackground#12363EFF
  • inputValidation.infoBorder#184954FF
  • inputValidation.infoForeground#5EEAD4FF
  • inputValidation.warningBackground#44422BFF
  • inputValidation.warningBorder#595739FF
  • inputValidation.warningForeground#F5CE68FF
  • keybindingLabel.background#E5E5E51A
  • keybindingLabel.border#00000000
  • keybindingLabel.bottomBorder#00000000
  • keybindingLabel.foreground#D1E8F8FF
  • list.activeSelectionBackground#D1E8F826
  • list.activeSelectionForeground#D1E8F8FF
  • list.activeSelectionIconForeground#D1E8F8FF
  • list.dropBackground#72C0C90E
  • list.errorForeground#F87272FF
  • list.focusBackground#e5e5e50c
  • list.focusForeground#D1E8F8FF
  • list.focusOutline#e5e5e50c
  • list.hoverBackground#D1E8F817
  • list.hoverForeground#9bb1be
  • list.inactiveFocusOutline#e5e5e50c
  • list.inactiveSelectionBackground#313438E3
  • list.inactiveSelectionForeground#D1E8F8E3
  • list.inactiveSelectionIconForeground#D1E8F8FF
  • menu.background#17181a
  • menu.border#1d1e20
  • menu.foreground#9bb1be
  • menu.separatorBackground#1d1e20
  • menubar.selectionBackground#e5e5e50c
  • menubar.selectionForeground#9bb1be
  • minimap.background#1e1f2080
  • minimap.errorHighlight#F87272FF
  • minimap.findMatchHighlight#19D08A2D
  • minimap.infoHighlight#5EEAD4FF
  • minimap.selectionHighlight#e5e5e50c
  • minimap.selectionOccurrenceHighlight#72C0C915
  • minimap.warningHighlight#F5CE68FF
  • minimapGutter.addedBackground#6EC58E
  • minimapGutter.deletedBackground#A76666
  • minimapGutter.modifiedBackground#a284b6
  • panel.background#0c0d0e
  • panel.border#1d1e20
  • panel.dropBorder#D1E8F8FF
  • panelSection.border#1d1e20
  • panelSection.dropBackground#72C0C90E
  • panelSectionHeader.background#111213
  • panelSectionHeader.border#1d1e20
  • panelSectionHeader.foreground#9bb1be
  • panelTitle.activeBorder#D1E8F8FF
  • panelTitle.activeForeground#D1E8F8FF
  • panelTitle.inactiveForeground#9bb1be
  • peekView.border#1d1e20
  • peekViewEditor.background#111213
  • peekViewEditor.matchHighlightBackground#03774e1e
  • peekViewEditor.matchHighlightBorder#03774e1e
  • peekViewEditorGutter.background#111213
  • peekViewResult.background#0f1a1b
  • peekViewResult.fileForeground#9bb1be
  • peekViewResult.lineForeground#9bb1be
  • peekViewResult.matchHighlightBackground#03774e1e
  • peekViewResult.selectionBackground#e5e5e50c
  • peekViewResult.selectionForeground#D1E8F8FF
  • peekViewTitle.background#0f1a1b
  • peekViewTitleDescription.foreground#819893FF
  • peekViewTitleLabel.foreground#9bb1be
  • pickerGroup.border#1d1e20
  • pickerGroup.foreground#6B7982FF
  • problemsErrorIcon.foreground#F87272FF
  • problemsInfoIcon.foreground#5EEAD4FF
  • problemsWarningIcon.foreground#F5CE68FF
  • profileBadge.background#B05F41FF
  • profileBadge.foreground#D1E8F8FF
  • progressBar.background#D1E8F8FF
  • quickInput.background#17181a
  • quickInput.foreground#9bb1be
  • quickInputTitle.background#17181a
  • sash.hoverBorder#D1E8F8FF
  • scrollbar.shadow#00000034
  • scrollbarSlider.activeBackground#ffffff75
  • scrollbarSlider.background#FFFFFF33
  • scrollbarSlider.hoverBackground#FFFFFF4D
  • selection.background#e5e5e50c
  • settings.focusedRowBackground#e5e5e50c
  • settings.focusedRowBorder#e5e5e50c
  • settings.headerBorder#1d1e20
  • settings.headerForeground#9bb1be
  • settings.modifiedItemIndicator#D1E8F8FF
  • settings.rowHoverBackground#e5e5e50c
  • sideBar.background#111213
  • sideBar.border#1d1e20
  • sideBar.dropBackground#72C0C90E
  • sideBar.foreground#7A8B94
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#0000
  • sideBarSectionHeader.foreground#798993FF
  • sideBarTitle.background#111213
  • sideBarTitle.border#1d1e20
  • sideBarTitle.foreground#6B7982FF
  • simpleFindWidget.sashBorder#1d1e20
  • statusBar.background#111213
  • statusBar.border#1d1e20
  • statusBar.debuggingBackground#614a60
  • statusBar.debuggingBorder#755974
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#6B7982FF
  • statusBar.noFolderBackground#111213
  • statusBar.noFolderBorder#1d1e20
  • statusBar.noFolderForeground#6B7982FF
  • statusBarItem.activeBackground#e5e5e50c
  • statusBarItem.hoverBackground#e5e5e50c
  • statusBarItem.hoverForeground#9bb1be
  • statusBarItem.remoteBackground#00000000
  • statusBarItem.remoteForeground#6B7982FF
  • statusBarItem.remoteHoverBackground#e5e5e50c
  • statusBarItem.remoteHoverForeground#9bb1be
  • symbolIcon.arrayForeground#a5985e
  • symbolIcon.booleanForeground#a5985e
  • symbolIcon.classForeground#1ebbae
  • symbolIcon.constantForeground#a5985e
  • symbolIcon.enumeratorForeground#4db4d3
  • symbolIcon.enumeratorMemberForeground#36bd95
  • symbolIcon.fieldForeground#9bb1be
  • symbolIcon.fileForeground#9bb1be
  • symbolIcon.folderForeground#9bb1be
  • symbolIcon.functionForeground#b87588
  • symbolIcon.interfaceForeground#36bd95
  • symbolIcon.keywordForeground#4db4d3
  • symbolIcon.methodForeground#b87588
  • symbolIcon.nullForeground#a5985e
  • symbolIcon.numberForeground#a5985e
  • symbolIcon.propertyForeground#846e8f
  • symbolIcon.snippetForeground#D1E8F8FF
  • symbolIcon.stringForeground#b8da87
  • symbolIcon.textForeground#3f6972
  • symbolIcon.unitForeground#c28a5c
  • symbolIcon.variableForeground#9bb1be
  • tab.activeBackground#111213
  • tab.activeBorder#D1E8F8FF
  • tab.activeBorderTop#0000
  • tab.activeForeground#D1E8F8FF
  • tab.border#0000
  • tab.hoverForeground#D1E8F8FF
  • tab.inactiveBackground#111213
  • tab.inactiveForeground#9EA3A2FF
  • terminal.ansiBlack#5a6570
  • terminal.ansiBlue#75a8d8
  • terminal.ansiBrightBlack#6a7580
  • terminal.ansiBrightBlue#B4D8F5
  • terminal.ansiBrightCyan#B4F5F5
  • terminal.ansiBrightGreen#B4F5B4
  • terminal.ansiBrightMagenta#D8B4F5
  • terminal.ansiBrightRed#F5B4B4
  • terminal.ansiBrightWhite#D1E8F8FF
  • terminal.ansiBrightYellow#F5E8B4
  • terminal.ansiCyan#75c5c5
  • terminal.ansiGreen#85c885
  • terminal.ansiMagenta#b575d8
  • terminal.ansiRed#d87575
  • terminal.ansiWhite#9bb1be
  • terminal.ansiYellow#dbc874
  • terminal.background#0c0d0e
  • terminal.border#1d1e20
  • terminal.dropBackground#72C0C90E
  • terminal.findMatchBackground#19D08A2D
  • terminal.findMatchBorder#D1E8F8FF
  • terminal.findMatchHighlightBackground#19D08A2D
  • terminal.findMatchHighlightBorder#19D08A2D
  • terminal.foreground#9bb1be
  • terminal.hoverHighlightBackground#e5e5e50c
  • terminal.selectionBackground#e5e5e50c
  • terminal.selectionForeground#9bb1be
  • terminalCommandDecoration.defaultBackground#D1E8F8FF
  • terminalCommandDecoration.errorBackground#F87272FF
  • terminalCommandDecoration.successBackground#86EFACFF
  • terminalCursor.background#D1E8F8FF
  • terminalCursor.foreground#D1E8F8FF
  • terminalOverviewRuler.findMatchForeground#19D08A2D
  • terminalStickyScrollHover.background#e5e5e50c
  • testing.iconErrored#C96E6EFF
  • testing.iconFailed#F87272FF
  • testing.iconPassed#86EFACFF
  • testing.iconQueued#D1E8F8FF
  • testing.iconSkipped#F5CE68FF
  • testing.iconUnset#9bb1be
  • textBlockQuote.background#111213
  • textBlockQuote.border#D1E8F8FF
  • textCodeBlock.background#111213
  • textLink.activeForeground#D1E8F8FF
  • textLink.foreground#D1E8F8FF
  • textPreformat.background#111213
  • textPreformat.foreground#9bb1be
  • textSeparator.foreground#1d1e20
  • titleBar.activeBackground#111213
  • titleBar.activeForeground#D1E8F8FF
  • titleBar.border#1d1e20
  • titleBar.inactiveBackground#111213
  • titleBar.inactiveForeground#9bb1be
  • toolbar.hoverBackground#e5e5e50c
  • tree.inactiveIndentGuidesStroke#1C2E31FF
  • tree.indentGuidesStroke#36595DFF
  • walkThrough.embeddedEditorBackground#111213
  • walkthrough.stepTitle.foreground#9bb1be
  • welcomePage.tileBackground#17181a
  • welcomePage.tileBorder#1d1e20
  • welcomePage.tileHoverBackground#17181a
  • widget.border#1d1e20
  • widget.shadow#00000034
  • window.activeBorder#1d1e20
  • window.inactiveBorder#1d1e20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#F87272FF
meta.brace, punctuation, keyword.operator.class, keyword.operator.type.annotation, storage.type.function.arrow#586366
comment, punctuation.definition.comment#6e8e97
entity.name.other.preprocessor, entity.name.function.preprocessor#968ba2
keyword, keyword.control.directive, storage.modifier.async, storage.type.function#c07c9c
storage, keyword.const.go, keyword.type.go, keyword.struct.go, keyword.function.go, keyword.other.declaration-specifier, entity.name.tag, entity.name.section.markdown, entity.name.section.group-title#72acce
support.type, entity.name.type, keyword.other.type#87ceba
support.function, entity.name.function, variable.language.super#b28bb6
support.class, entity.name.class, entity.name.type.class, entity.name.type.module, entity.other.alias, entity.other.inherited-class#a89fda
support.other.namespace, entity.name.type.namespace#ad927b
entity.other.attribute-name.id, entity.other.attribute-name.class#9a97d4
string, markup.inline.raw.string, markup.fenced_code.block#a2be76
variable.other.link, string.interpolated, markup.underline.link#97a067
constant, keyword.other.unit.hexadecimal, fenced_code.block.language#c0b888
keyword.other.unit, storage.type.numeric.bigint#cca07c
variable, support.variable, entity.other.attribute, constant.other.caps, storage.modifier.package.java, storage.modifier.import.java#9bb1be
variable.language.self, variable.language.this, variable.language.special.self, variable.language.special.this, variable.parameter.function.language.special.self, variable.parameter.function.language.special.this#4C6F78FFbold italic
variable.language.global#5d7a80bold
entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name, invalid.deprecated.entity.other.attribute-name.html#b993a8
markup.inserted.diff, meta.diff.header.to-file#60a060
meta.diff.header.from-file, markup.deleted.diff#bd6e6e
markup.italicitalic
markup.boldbold
markup.strikethroughstrikethrough
Lunora by Jove Jonovski - VS Code Theme