One Monokai Darker Spectrum

Name: One Monokai Darker Spectrum
Author: Ivan Kinder

Publisher: Ivan KinderThemes in package: 1

Combination of **Monokai Pro (filter Spectrum)** with **One Dark Pro Monokai Darker** themes.

Open in VS Code GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

One Monokai Darker Spectrum — One Monokai Darker Spectrum

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#d7dae0
activityBar.background#222222
activityBar.dropBorder#d7dae0
activityBar.foreground#d7dae0
activityBar.inactiveForeground#d7dae066
activityBarBadge.background#528bff
activityBarBadge.foreground#f8fafd
badge.background#4d4d4d
badge.foreground#ffffff
banner.background#121212
banner.foreground#d7dae0
banner.iconForeground#707040
breadcrumb.activeSelectionForeground#e0e0e0
breadcrumb.background#222222
breadcrumb.focusForeground#f7f1ff
breadcrumb.foreground#cccccccc
breadcrumbPicker.background#111111
button.background#528bff
button.foreground#ffffff
button.hoverBackground#95b9ff
button.secondaryBackground#3a3d41
button.secondaryForeground#ffffff
button.secondaryHoverBackground#45494e
button.separator#ffffff66
charts.blue#707040
charts.foreground#cccccc
charts.green#89d185
charts.lines#cccccc80
charts.orange#d18616
charts.purple#b180d7
charts.red#704040
charts.yellow#407040
checkbox.background#1d1f23
checkbox.border#181a1f
checkbox.foreground#f0f0f0
checkbox.selectBackground#111111
checkbox.selectBorder#111111
commandCenter.activeBackground#ffffff14
commandCenter.activeBorder#9999994d
commandCenter.activeForeground#999999
commandCenter.background#ffffff0d
commandCenter.border#99999933
commandCenter.foreground#999999
commandCenter.inactiveBorder#6b717d40
commandCenter.inactiveForeground#6b717d
debugConsole.errorForeground#f48771
debugConsole.infoForeground#707040
debugConsole.sourceForeground#cccccc
debugConsole.warningForeground#407040
debugConsoleInputIcon.foreground#cccccc
debugExceptionWidget.background#420b0d
debugExceptionWidget.border#a31515
debugIcon.breakpointCurrentStackframeForeground#ffcc00
debugIcon.breakpointDisabledForeground#848484
debugIcon.breakpointForeground#e51400
debugIcon.breakpointStackframeForeground#89d185
debugIcon.breakpointUnverifiedForeground#848484
debugIcon.continueForeground#75beff
debugIcon.disconnectForeground#f48771
debugIcon.pauseForeground#75beff
debugIcon.restartForeground#89d185
debugIcon.startForeground#89d185
debugIcon.stepBackForeground#75beff
debugIcon.stepIntoForeground#75beff
debugIcon.stepOutForeground#75beff
debugIcon.stepOverForeground#75beff
debugIcon.stopForeground#f48771
debugTokenExpression.boolean#4e94ce
debugTokenExpression.error#f48771
debugTokenExpression.name#c586c0
debugTokenExpression.number#b5cea8
debugTokenExpression.string#ce9178
debugTokenExpression.value#cccccc99
debugToolBar.background#111111
debugView.exceptionLabelBackground#6c2022
debugView.exceptionLabelForeground#cccccc
debugView.stateLabelBackground#88888844
debugView.stateLabelForeground#cccccc
debugView.valueChangedHighlight#569cd6
descriptionForeground#ccccccb3
diffEditor.diagonalFill#cccccc33
diffEditor.insertedLineBackground#9bb95533
diffEditor.insertedTextBackground#00809b33
diffEditor.removedLineBackground#ff000033
diffEditor.removedTextBackground#ff000033
disabledForeground#cccccc80
dropdown.background#1d1f23
dropdown.border#181a1f
dropdown.foreground#f0f0f0
editor.background#222222
editor.findMatchBackground#515c6a
editor.findMatchHighlightBackground#314365
editor.findRangeHighlightBackground#3a3d4166
editor.focusedStackFrameHighlightBackground#7abd7a4d
editor.foldBackground#303030
editor.foreground#bbbbbb
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#11111180
editor.inlineValuesBackground#ffc80033
editor.inlineValuesForeground#ffffff80
editor.lineHighlightBackground#181818
editor.lineHighlightBorder#ff000000
editor.linkedEditingBackground#ff00004d
editor.rangeHighlightBackground#ffffff0b
editor.selectionBackground#111111
editor.selectionHighlightBackground#505050
editor.snippetFinalTabstopHighlightBorder#525252
editor.snippetTabstopHighlightBackground#7c7c7c4d
editor.stackFrameHighlightBackground#ffff0033
editor.symbolHighlightBackground#314365
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editor.wordHighlightTextBackground#575757b8
editorBracketHighlight.foreground1#7bd88f
editorBracketHighlight.foreground2#61afef
editorBracketHighlight.foreground3#fce566
editorBracketHighlight.foreground4#fc6161
editorBracketHighlight.foreground5#948ae3
editorBracketHighlight.foreground6#fd9353
editorBracketHighlight.unexpectedBracket.foreground#ff1212cc
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorBracketPairGuide.activeBackground1#00000000
editorBracketPairGuide.activeBackground2#00000000
editorBracketPairGuide.activeBackground3#00000000
editorBracketPairGuide.activeBackground4#00000000
editorBracketPairGuide.activeBackground5#00000000
editorBracketPairGuide.activeBackground6#00000000
editorBracketPairGuide.background1#00000000
editorBracketPairGuide.background2#00000000
editorBracketPairGuide.background3#00000000
editorBracketPairGuide.background4#00000000
editorBracketPairGuide.background5#00000000
editorBracketPairGuide.background6#00000000
editorCodeLens.foreground#999999
editorCommentsWidget.rangeActiveBackground#2020201a
editorCommentsWidget.rangeActiveBorder#20202066
editorCommentsWidget.rangeBackground#2020201a
editorCommentsWidget.rangeBorder#20202066
editorCommentsWidget.resolvedBorder#cccccc80
editorCommentsWidget.unresolvedBorder#202020
editorCursor.foreground#f8f8f0
editorError.foreground#704040
editorGhostText.foreground#ffffff56
editorGroup.border#181a1f
editorGroup.dropBackground#53595d80
editorGroup.dropIntoPromptBackground#111111
editorGroup.dropIntoPromptForeground#cccccc
editorGroupHeader.noTabsBackground#222222
editorGroupHeader.tabsBackground#222222
editorGutter.addedBackground#487e02
editorGutter.background#222222
editorGutter.commentGlyphForground#bbbbbb
editorGutter.commentRangeForeground#121212
editorGutter.deletedBackground#704040
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#1b81a8
editorHint.foreground#eeeeeeb3
editorHoverWidget.background#111111
editorHoverWidget.border#181a1f
editorHoverWidget.foreground#cccccc
editorHoverWidget.highlightForeground#c5c5c5
editorHoverWidget.statusBarBackground#141414
editorIndentGuide.activeBackground#484a50
editorIndentGuide.background#3b4048
editorInfo.foreground#707040
editorInlayHint.background#4d4d4dcc
editorInlayHint.foreground#ffffff
editorInlayHint.parameterBackground#4d4d4dcc
editorInlayHint.parameterForeground#ffffff
editorInlayHint.typeBackground#4d4d4dcc
editorInlayHint.typeForeground#ffffff
editorLightBulb.foreground#ffcc00
editorLightBulbAutoFix.foreground#75beff
editorLineNumber.activeForeground#c6c6c6
editorLineNumber.foreground#505050
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#222222
editorMarkerNavigationError.background#704040
editorMarkerNavigationError.headerBackground#7040401a
editorMarkerNavigationInfo.background#707040
editorMarkerNavigationInfo.headerBackground#7070401a
editorMarkerNavigationWarning.background#407040
editorMarkerNavigationWarning.headerBackground#4070401a
editorOverviewRuler.addedForeground#487e0299
editorOverviewRuler.border#1c1c1c
editorOverviewRuler.bracketMatchForeground#a0a0a0
editorOverviewRuler.commonContentForeground#60606066
editorOverviewRuler.currentContentForeground#40c8ae80
editorOverviewRuler.deletedForeground#70404099
editorOverviewRuler.errorForeground#ff1212b3
editorOverviewRuler.findMatchForeground#d186167e
editorOverviewRuler.incomingContentForeground#40a6ff80
editorOverviewRuler.infoForeground#707040
editorOverviewRuler.modifiedForeground#1b81a899
editorOverviewRuler.rangeHighlightForeground#007acc99
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#407040
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
editorOverviewRuler.wordHighlightTextForeground#a0a0a0cc
editorPane.background#222222
editorRuler.foreground#484848
editorStickyScroll.background#222222
editorStickyScrollHover.background#2a2d2e
editorSuggestWidget.background#111111
editorSuggestWidget.border#181a1f
editorSuggestWidget.focusHighlightForeground#c5c5c5
editorSuggestWidget.foreground#bbbbbb
editorSuggestWidget.highlightForeground#c5c5c5
editorSuggestWidget.selectedBackground#303030
editorSuggestWidget.selectedForeground#d7dae0
editorSuggestWidgetStatus.foreground#bbbbbb80
editorUnicodeHighlight.background#bd9b0326
editorUnicodeHighlight.border#bd9b03
editorUnnecessaryCode.opacity#000000aa
editorWarning.foreground#407040
editorWhitespace.foreground#484a50
editorWidget.background#111111
editorWidget.border#454545
editorWidget.foreground#cccccc
errorForeground#f48771
errorLens.errorBackground#e454541b
errorLens.errorBackgroundLight#e4545420
errorLens.errorForeground#ff6464
errorLens.errorForegroundLight#e45454
errorLens.errorMessageBackground#e4545419
errorLens.hintBackground#17a2a220
errorLens.hintBackgroundLight#17a2a220
errorLens.hintForeground#2faf64
errorLens.hintForegroundLight#2faf64
errorLens.hintMessageBackground#17a2a219
errorLens.infoBackground#00b7e420
errorLens.infoBackgroundLight#00b7e420
errorLens.infoForeground#00b7e4
errorLens.infoForegroundLight#00b7e4
errorLens.infoMessageBackground#00b7e419
errorLens.statusBarErrorForeground#ff6464
errorLens.statusBarHintForeground#2faf64
errorLens.statusBarIconErrorForeground#ff6464
errorLens.statusBarIconWarningForeground#fa973a
errorLens.statusBarInfoForeground#00b7e4
errorLens.statusBarWarningForeground#fa973a
errorLens.warningBackground#ff942f1b
errorLens.warningBackgroundLight#ff942f20
errorLens.warningForeground#fa973a
errorLens.warningForegroundLight#ff942f
errorLens.warningMessageBackground#ff942f19
extensionBadge.remoteBackground#528bff
extensionBadge.remoteForeground#f8fafd
extensionButton.background#528bff
extensionButton.foreground#ffffff
extensionButton.hoverBackground#95b9ff
extensionButton.prominentBackground#528bff
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#95b9ff
extensionButton.separator#ffffff66
extensionIcon.preReleaseForeground#1d9271
extensionIcon.sponsorForeground#d758b3
extensionIcon.starForeground#ff8e00
extensionIcon.verifiedForeground#3794ff
focusBorder#181a1f
foreground#cccccc
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#e4676b
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#e2c08d
gitDecoration.renamedResourceForeground#73c991
gitDecoration.stageDeletedResourceForeground#c74e39
gitDecoration.stageModifiedResourceForeground#e2c08d
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
icon.foreground#c5c5c5
input.background#222222
input.foreground#cccccc
input.placeholderForeground#cccccc80
inputOption.activeBackground#181a1f66
inputOption.activeBorder#007acc00
inputOption.activeForeground#ffffff
inputOption.hoverBackground#5a5d5e80
inputValidation.errorBackground#5a1d1d
inputValidation.errorBorder#be1100
inputValidation.infoBackground#063b49
inputValidation.infoBorder#007acc
inputValidation.warningBackground#352a05
inputValidation.warningBorder#b89500
interactive.activeCodeBorder#202020
interactive.inactiveCodeBorder#121212
keybindingLabel.background#8080802b
keybindingLabel.border#33333399
keybindingLabel.bottomBorder#44444499
keybindingLabel.foreground#cccccc
keybindingTable.headerBackground#cccccc0a
keybindingTable.rowsBackground#cccccc0a
list.activeSelectionBackground#121212
list.activeSelectionForeground#d7dae0
list.deemphasizedForeground#8c8c8c
list.dropBackground#062f4a
list.errorForeground#f88070
list.filterMatchBackground#314365
list.focusBackground#303030
list.focusHighlightForeground#c5c5c5
list.focusOutline#181a1f
list.highlightForeground#c5c5c5
list.hoverBackground#121212
list.inactiveSelectionBackground#121212
list.inactiveSelectionForeground#d7dae0
list.invalidItemForeground#b89500
list.warningForeground#cca700
listFilterWidget.background#111111
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
listFilterWidget.shadow#0000005c
menu.background#222222
menu.foreground#f0f0f0
menu.selectionBackground#121212
menu.selectionForeground#d7dae0
menu.separatorBackground#111111
menubar.selectionBackground#111111
menubar.selectionForeground#999999
merge.commonContentBackground#60606029
merge.commonHeaderBackground#60606066
merge.currentContentBackground#40c8ae33
merge.currentHeaderBackground#40c8ae80
merge.incomingContentBackground#40a6ff33
merge.incomingHeaderBackground#40a6ff80
mergeEditor.change.background#9bb95533
mergeEditor.change.word.background#9ccc2c33
mergeEditor.changeBase.background#4b1818
mergeEditor.changeBase.word.background#6f1313
mergeEditor.conflict.handled.minimapOverViewRuler#adaca8ee
mergeEditor.conflict.handledFocused.border#c1c1c1cc
mergeEditor.conflict.handledUnfocused.border#86868649
mergeEditor.conflict.input1.background#40c8ae33
mergeEditor.conflict.input2.background#40a6ff33
mergeEditor.conflict.unhandled.minimapOverViewRuler#fcba03
mergeEditor.conflict.unhandledFocused.border#ffa600
mergeEditor.conflict.unhandledUnfocused.border#ffa6007a
mergeEditor.conflictingLines.background#ffea0047
minimap.background#00000000
minimap.errorHighlight#ff1212b3
minimap.findMatchHighlight#d18616
minimap.foregroundOpacity#000000
minimap.selectionHighlight#000000
minimap.selectionOccurrenceHighlight#676767
minimap.warningHighlight#407040
minimapGutter.addedBackground#487e02
minimapGutter.deletedBackground#704040
minimapGutter.modifiedBackground#1b81a8
minimapSlider.activeBackground#1111115e
minimapSlider.background#1111115e
minimapSlider.hoverBackground#0000005e
notebook.cellBorderColor#121212
notebook.cellEditorBackground#222222
notebook.cellInsertionIndicator#181a1f
notebook.cellStatusBarItemHoverBackground#ffffff26
notebook.cellToolbarSeparator#80808059
notebook.editorBackground#222222
notebook.focusedCellBorder#181a1f
notebook.focusedEditorBorder#181a1f
notebook.inactiveFocusedCellBorder#121212
notebook.selectedCellBackground#121212
notebook.selectedCellBorder#121212
notebook.symbolHighlightBackground#ffffff0b
notebookEditorOverviewRuler.runningCellForeground#89d185
notebookScrollbarSlider.activeBackground#111111bb
notebookScrollbarSlider.background#111111bb
notebookScrollbarSlider.hoverBackground#000000bb
notebookStatusErrorIcon.foreground#f48771
notebookStatusRunningIcon.foreground#cccccc
notebookStatusSuccessIcon.foreground#89d185
notificationCenterHeader.background#161616
notificationLink.foreground#3794ff
notifications.background#111111
notifications.border#161616
notifications.foreground#cccccc
notificationsErrorIcon.foreground#704040
notificationsInfoIcon.foreground#707040
notificationsWarningIcon.foreground#407040
panel.background#222222
panel.border#1c1c1c
panel.dropBorder#e7e7e7
panelSection.border#1c1c1c
panelSection.dropBackground#53595d80
panelSectionHeader.background#80808033
panelTitle.activeBorder#e7e7e7
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#e7e7e799
peekView.border#202020
peekViewEditor.background#202020
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditorGutter.background#202020
peekViewEditorStickScroll.background#202020
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#7070401a
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#3f3f46
pickerGroup.foreground#3794ff
ports.iconRunningProcessForeground#222222
problemsErrorIcon.foreground#704040
problemsInfoIcon.foreground#707040
problemsWarningIcon.foreground#407040
progressBar.background#0e70c0
quickInput.background#111111
quickInput.foreground#cccccc
quickInputList.focusBackground#222222
quickInputList.focusForeground#d7dae0
quickInputTitle.background#ffffff1b
sash.hoverBorder#181a1f
scm.providerBorder#454545
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#111111bb
scrollbarSlider.background#111111bb
scrollbarSlider.hoverBackground#000000bb
searchEditor.findMatchBackground#314365a8
settings.checkboxBackground#1d1f23
settings.checkboxBorder#181a1f
settings.checkboxForeground#f0f0f0
settings.dropdownBackground#1d1f23
settings.dropdownBorder#181a1f
settings.dropdownForeground#f0f0f0
settings.dropdownListBorder#454545
settings.focusedRowBackground#12121299
settings.focusedRowBorder#181a1f
settings.headerBorder#1c1c1c
settings.headerForeground#e7e7e7
settings.modifiedItemIndicator#0c7d9d
settings.numberInputBackground#222222
settings.numberInputForeground#cccccc
settings.rowHoverBackground#1212124d
settings.sashBorder#1c1c1c
settings.settingsHeaderHoverForeground#e7e7e7b3
settings.textInputBackground#222222
settings.textInputForeground#cccccc
sideBar.background#222222
sideBar.border#1c1c1c
sideBar.dropBackground#53595d80
sideBarSectionHeader.background#111111
sideBySideEditor.horizontalBorder#181a1f
sideBySideEditor.verticalBorder#181a1f
statusBar.background#222222
statusBar.debuggingBackground#020202
statusBar.debuggingForeground#999999
statusBar.focusBorder#999999
statusBar.foreground#999999
statusBar.noFolderBackground#020202
statusBar.noFolderForeground#999999
statusBarItem.activeBackground#ffffff2e
statusBarItem.compactHoverBackground#ffffff33
statusBarItem.errorBackground#c72e0f
statusBarItem.errorForeground#ffffff
statusBarItem.focusBorder#999999
statusBarItem.hoverBackground#111111
statusBarItem.prominentBackground#00000080
statusBarItem.prominentForeground#999999
statusBarItem.prominentHoverBackground#0000004d
statusBarItem.remoteBackground#222222
statusBarItem.remoteForeground#f8fafd
statusBarItem.warningBackground#264326
statusBarItem.warningForeground#ffffff
symbolIcon.arrayForeground#cccccc
symbolIcon.booleanForeground#cccccc
symbolIcon.classForeground#ee9d28
symbolIcon.colorForeground#cccccc
symbolIcon.constantForeground#cccccc
symbolIcon.constructorForeground#b180d7
symbolIcon.enumeratorForeground#ee9d28
symbolIcon.enumeratorMemberForeground#75beff
symbolIcon.eventForeground#ee9d28
symbolIcon.fieldForeground#75beff
symbolIcon.fileForeground#cccccc
symbolIcon.folderForeground#cccccc
symbolIcon.functionForeground#b180d7
symbolIcon.interfaceForeground#75beff
symbolIcon.keyForeground#cccccc
symbolIcon.keywordForeground#cccccc
symbolIcon.methodForeground#b180d7
symbolIcon.moduleForeground#cccccc
symbolIcon.namespaceForeground#cccccc
symbolIcon.nullForeground#cccccc
symbolIcon.numberForeground#cccccc
symbolIcon.objectForeground#cccccc
symbolIcon.operatorForeground#cccccc
symbolIcon.packageForeground#cccccc
symbolIcon.propertyForeground#cccccc
symbolIcon.referenceForeground#cccccc
symbolIcon.snippetForeground#cccccc
symbolIcon.stringForeground#cccccc
symbolIcon.structForeground#cccccc
symbolIcon.textForeground#cccccc
symbolIcon.typeParameterForeground#cccccc
symbolIcon.unitForeground#cccccc
symbolIcon.variableForeground#75beff
tab.activeBackground#222222
tab.activeForeground#ffffff
tab.activeModifiedBorder#3399cc
tab.border#181a1f
tab.inactiveBackground#222222
tab.inactiveForeground#ffffff80
tab.inactiveModifiedBorder#3399cc80
tab.lastPinnedBorder#585858
tab.unfocusedActiveBackground#222222
tab.unfocusedActiveForeground#ffffff80
tab.unfocusedActiveModifiedBorder#3399cc80
tab.unfocusedInactiveBackground#222222
tab.unfocusedInactiveForeground#ffffff40
tab.unfocusedInactiveModifiedBorder#3399cc40
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#e5e510
terminal.border#1c1c1c
terminal.dropBackground#53595d80
terminal.findMatchBackground#515c6a
terminal.findMatchHighlightBackground#314365
terminal.foreground#cccccc
terminal.inactiveSelectionBackground#11111180
terminal.selectionBackground#111111
terminalCommandDecoration.defaultBackground#ffffff40
terminalCommandDecoration.errorBackground#f14c4c
terminalCommandDecoration.successBackground#1b81a8
terminalOverviewRuler.cursorForeground#a0a0a0cc
terminalOverviewRuler.findMatchForeground#d186167e
testing.iconErrored#f14c4c
testing.iconFailed#f14c4c
testing.iconPassed#73c991
testing.iconQueued#cca700
testing.iconSkipped#848484
testing.iconUnset#848484
testing.message.error.decorationForeground#704040
testing.message.error.lineBackground#ff000033
testing.message.info.decorationForeground#bbbbbb80
testing.peekBorder#704040
testing.peekHeaderBackground#7040401a
testing.runAction#73c991
textBlockQuote.background#7f7f7f1a
textBlockQuote.border#007acc80
textCodeBlock.background#0a0a0a66
textLink.activeForeground#3794ff
textLink.foreground#3794ff
textPreformat.foreground#d7ba7d
textSeparator.foreground#ffffff2e
titleBar.activeBackground#222222
titleBar.activeForeground#999999
titleBar.inactiveBackground#222222
titleBar.inactiveForeground#6b717d
toolbar.activeBackground#63666750
toolbar.hoverBackground#5a5d5e50
tree.inactiveIndentGuidesStroke#50505066
tree.indentGuidesStroke#505050
tree.tableColumnsBorder#cccccc20
tree.tableOddRowsBackground#cccccc0a
walkthrough.stepTitle.foreground#ffffff
welcomeOverlay.background#00000085
welcomePage.progress.background#222222
welcomePage.progress.foreground#3794ff
welcomePage.tileBackground#111111
welcomePage.tileBorder#ffffff1a
welcomePage.tileHoverBackground#141414
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.comment	#5C6370	italic
string	#E5C07B	—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts	#C678DD	—
string.template.js	#E5C07B	—
meta.template.expression.js	#ABB2BF	—
constant.numeric	#C678DD	—
string.embedded.begin, string.embedded.end	#C678DD	—
string.embedded	#98C379	—
constant.language	#56B6C2	—
constant.character, constant.other	#56B6C2	—
variable.language	#E06C75	—
variable.readwrite, variable.readwrite.other.block	#61AFEF	—
keyword, keyword.operator.logical, keyword.operator.constructor	#E06C75	—
keyword.operator	#E06C75	—
storage	#E06C75	—
storage.type	#56B6C2	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class	#61AFEF	—
variable.other.object	#61AFEF	—
variable.other.property, variable.other.block	#ABB2BF	—
entity.other.inherited-class	#98C379	—
entity.name.function, support.function	#98C379	—
variable.parameter	#D19A66	italic
entity.name.function-call	#ABB2BF	—
function.support.builtin, function.support.core	#98C379	—
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx	#E06C75	—
entity.name.tag.class, entity.name.tag.id	#56B6C2	—
entity.other.attribute-name	#98C379	—
support.constant	#56B6C2	—
support.type, support.variable	#56B6C2	—
support.dictionary.json	#56B6C2	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#ABB2BF	—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass	#98C379	—
variable.css, variable.scss, variable.less, variable.sass	#56B6C2	—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string	#E5C07B	—
unit.css, unit.scss, unit.less, unit.sass	#C678DD	—
function.css, function.scss, function.less, function.sass	#56B6C2	—
support.other.variable	—
invalid	#F8F8F0	—
invalid.deprecated	#F8F8F0	—
structure.dictionary.property-name.json	#56B6C2	—
string.detected-link	#61AFEF	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#C678DD	—
markup.inserted	#E5C07B	—
markup.changed	#E5C07B	—
constant.numeric.line-number.find-in-files - match	#56B6C2A0	—
entity.name.filename.find-in-files	#E5C07B	—
markup.italic, markup.italic.markdown	—	italic
punctuation.definition.italic.markdown	#696969	—
markup.underline.link.markdown	#61AFEF	—
markup.bold.markdown	—	bold
punctuation.definition.bold.markdown	#696969	—
markup.heading.markdown	#E06C75	bold
punctuation.definition.heading.markdown	#696969	—
markup.quote.markdown	#98C379	—
meta.separator.markdown	#C678DD	bold
markup.raw.inline.markdown, markup.raw.block.markdown	#56B6C2	—
punctuation.definition.list_item.markdown	#FFFFFF	bold
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, storage.type.modifier, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter	—
variable.other.global.cpp, meta.function.definition.cpp	#F7F1FF	—
comment, punctuation.separator.namespace.access, entity.name, punctuation.definition, punctuation.section	#6C6C6C	—
string.embedded, entity.other.inherited-class, entity.name.function, support.function, function.support.builtin, function.support.core, entity.other.attribute-name, support.constant.css, support.constant.scss, support.constant.less, support.constant.sass, markup.quote.markdown	#7BD88F	—
string, string.template.js, variable.css.string, variable.scss.string, variable.less.string, variable.sass.string, markup.inserted, markup.changed, entity.name.filename.find-in-files	#FCE566	—
variable.parameter	#FD9353	—
variable.other.global.cpp	#B5DBF1	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component, entity.name.lifetime.rust, invalid, keyword, keyword.control, keyword.control.directive, keyword.operator, keyword.operator.member, keyword.operator.new, keyword.other.template.begin, keyword.other.template.end, keyword.control.rust, keyword.operator.misc.rust, keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby, markup.deleted, markup.deleted punctuation.definition.deleted, source.yaml meta.mapping.key string, punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, region.redish, region.pinkish, storage, storage.type.extends, storage.type.function.arrow, storage.modifier, storage.type.modifier, storage.modifier.visibility.rust, storage.modifier.lifetime.rust, string.other.link.title, string.other.link.description, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end, string.other.git-status.remote, punctuation.terminator.statement, punctuation.separator.delimiter	#FC6161	—
comment keyword.codetag.notation, constant, constant.other.caps, constant.other.property, constant.other.citation.latex, constant.other.color, constant.other.character-class.escape, constant.other.key, constant.numeric, constant.language, constant.character.escape, entity.name.label, entity.name.constant, entity.other.git-status.hex, entity.name.operator.custom-literal.number, entity.name.constant.preprocessor, meta.preprocessor, region.purplish, source.git-show.commit.sha, storage.class.restructuredtext.ref, support.constant.core.rust, variable.language.arguments, variable.other.constant, variable.other.enummember	#948AE3	—
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, storage.type.modifier, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter	—
variable.other.global.cpp, meta.function.definition.cpp	#F7F1FF	—
comment, punctuation.separator.namespace.access, entity.name, punctuation.definition, punctuation.section	#6C6C6C	—
string.embedded, entity.other.inherited-class, entity.name.function, support.function, function.support.builtin, function.support.core, entity.other.attribute-name, support.constant.css, support.constant.scss, support.constant.less, support.constant.sass, markup.quote.markdown	#7BD88F	—
string, string.template.js, variable.css.string, variable.scss.string, variable.less.string, variable.sass.string, markup.inserted, markup.changed, entity.name.filename.find-in-files	#FCE566	—
variable.parameter	#FD9353	—
variable.other.global.cpp	#B5DBF1	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component, entity.name.lifetime.rust, invalid, keyword, keyword.control, keyword.control.directive, keyword.operator, keyword.operator.member, keyword.operator.new, keyword.other.template.begin, keyword.other.template.end, keyword.control.rust, keyword.operator.misc.rust, keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby, markup.deleted, markup.deleted punctuation.definition.deleted, source.yaml meta.mapping.key string, punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, region.redish, region.pinkish, storage, storage.type.extends, storage.type.function.arrow, storage.modifier, storage.type.modifier, storage.modifier.visibility.rust, storage.modifier.lifetime.rust, string.other.link.title, string.other.link.description, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end, string.other.git-status.remote, punctuation.terminator.statement, punctuation.separator.delimiter	#FF6B6C	—
comment keyword.codetag.notation, constant, constant.other.caps, constant.other.property, constant.other.citation.latex, constant.other.color, constant.other.character-class.escape, constant.other.key, constant.numeric, constant.language, constant.character.escape, entity.name.label, entity.name.constant, entity.other.git-status.hex, entity.name.operator.custom-literal.number, entity.name.constant.preprocessor, meta.preprocessor, region.purplish, source.git-show.commit.sha, storage.class.restructuredtext.ref, support.constant.core.rust, variable.language.arguments, variable.other.constant, variable.other.enummember	#948AE3	—
constant.language, constant.character, constant.other, storage.type, entity.name.tag.class, entity.name.tag.id, support.constant, support.type, support.variable, support.dictionary.json, variable.css, variable.scss, variable.less, variable.sass, function.css, function.scss, function.less, function.sass, structure.dictionary.property-name.json	#5AD4E6	—
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, storage.type.modifier, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter	—
variable.other.global.cpp, meta.function.definition.cpp	#F7F1FF	—
comment, punctuation.separator.namespace.access, entity.name, punctuation.definition, punctuation.section	#6C6C6C	—
string.embedded, entity.other.inherited-class, entity.name.function, support.function, function.support.builtin, function.support.core, entity.other.attribute-name, support.constant.css, support.constant.scss, support.constant.less, support.constant.sass, markup.quote.markdown	#7BD88F	—
string, string.template.js, variable.css.string, variable.scss.string, variable.less.string, variable.sass.string, markup.inserted, markup.changed, entity.name.filename.find-in-files	#FCE566	—
variable.parameter	#FD9353	—
variable.other.global.cpp	#FC618D	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component, entity.name.lifetime.rust, invalid, keyword, keyword.control, keyword.control.directive, keyword.operator, keyword.operator.constructor, keyword.operator.logical, keyword.operator.member, keyword.operator.new, keyword.other.template.begin, keyword.other.template.end, keyword.control.rust, keyword.operator.misc.rust, keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby, markup.deleted, markup.deleted punctuation.definition.deleted, source.yaml meta.mapping.key string, punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, region.redish, region.pinkish, storage, entity.name.tag, storage.type.extends, storage.type.function.arrow, storage.modifier, storage.type.modifier, storage.modifier.visibility.rust, storage.modifier.lifetime.rust, string.other.link.title, string.other.link.description, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end, string.other.git-status.remote, punctuation.terminator.statement, punctuation.separator.delimiter	#FF6B6C	—
variable.language, markup.heading.markdown	#FC618D	—
comment keyword.codetag.notation, constant, constant.other.caps, constant.other.property, constant.other.citation.latex, constant.other.color, constant.other.character-class.escape, constant.other.key, constant.numeric, constant.language, constant.character.escape, entity.name.label, entity.name.constant, entity.other.git-status.hex, entity.name.operator.custom-literal.number, entity.name.constant.preprocessor, meta.preprocessor, region.purplish, source.git-show.commit.sha, storage.class.restructuredtext.ref, support.constant.core.rust, variable.language.arguments, variable.other.constant, variable.other.enummember	#948AE3	—
constant.language, constant.character, constant.other, storage.type, entity.name.tag.class, entity.name.tag.id, support.constant, support.type, support.variable, support.dictionary.json, variable.css, variable.scss, variable.less, variable.sass, function.css, function.scss, function.less, function.sass, structure.dictionary.property-name.json	#5AD4E6	—
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, storage.type.modifier, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter	—
variable.other.global.cpp, meta.function.definition.cpp	#F7F1FF	—
comment, punctuation.separator.namespace.access, entity.name, punctuation.definition, punctuation.section	#6C6C6C	—
string.embedded, entity.other.inherited-class, entity.name.function, support.function, function.support.builtin, function.support.core, entity.other.attribute-name, support.constant.css, support.constant.scss, support.constant.less, support.constant.sass, markup.quote.markdown	#7BD88F	—
string, string.template.js, variable.css.string, variable.scss.string, variable.less.string, variable.sass.string, markup.inserted, markup.changed, entity.name.filename.find-in-files	#FCE566	—
variable.parameter	#FD9353	—
variable.other.global.cpp	#FC618D	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component, entity.name.lifetime.rust, invalid, keyword, keyword.control, keyword.control.directive, keyword.operator, keyword.operator.constructor, keyword.operator.logical, keyword.operator.member, keyword.operator.new, keyword.other.template.begin, keyword.other.template.end, keyword.control.rust, keyword.operator.misc.rust, keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby, markup.deleted, markup.deleted punctuation.definition.deleted, source.yaml meta.mapping.key string, punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, region.redish, region.pinkish, storage, entity.name.tag, storage.type.extends, storage.type.function.arrow, storage.modifier, storage.type.modifier, storage.modifier.visibility.rust, storage.modifier.lifetime.rust, string.other.link.title, string.other.link.description, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end, string.other.git-status.remote, punctuation.terminator.statement, punctuation.separator.delimiter	#FF6B6C	—
variable.language, markup.heading.markdown	#FC618D	—
comment keyword.codetag.notation, constant, constant.other.caps, constant.other.property, constant.other.citation.latex, constant.other.color, constant.other.character-class.escape, constant.other.key, constant.numeric, constant.language, constant.character.escape, entity.name.label, entity.name.constant, entity.other.git-status.hex, entity.name.operator.custom-literal.number, entity.name.constant.preprocessor, meta.preprocessor, region.purplish, source.git-show.commit.sha, storage.class.restructuredtext.ref, support.constant.core.rust, variable.language.arguments, variable.other.constant, variable.other.enummember	#948AE3	—
constant.language, constant.character, constant.other, storage.type, entity.name.tag.class, entity.name.tag.id, support.constant, support.type, support.variable, support.dictionary.json, variable.css, variable.scss, variable.less, variable.sass, function.css, function.scss, function.less, function.sass, structure.dictionary.property-name.json	#5AD4E6	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}