Dark Modern (OLED Black) Theme Set

Name: Dark Modern (OLED Black) Theme Set
Author: Binary Ink

Publisher: Binary InkThemes in package: 26

Visual Studio Code theme designed to be the OLED Black variant of the default Dark/Light Modern themes shipped with the application.

GitHub

Color themes

VS Code preview

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

Dark Modern (OLED Black) Theme Set — Dark Modern (OLED Black) [White]

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#000
activityBar.activeBackground#000
activityBar.activeBorder#0078d4
activityBar.activeFocusBorderdefault
activityBar.background#181818
activityBar.border#ffffff15
activityBar.dropBorderdefault
activityBar.foreground#d7d7d7
activityBar.inactiveForeground#ffffff80
activityBarBadge.background#007ACC
activityBarBadge.foreground#ffffff
activityBarTop.activeBackgrounddefault
activityBarTop.activeBorder#41aafa
activityBarTop.background#000
activityBarTop.dropBorderdefault
activityBarTop.foreground#fff
activityBarTop.inactiveForegrounddefault
activityErrorBadge.backgrounddefault
activityErrorBadge.foregrounddefault
activityWarningBadge.backgrounddefault
activityWarningBadge.foregrounddefault
badge.background#0078d4
badge.foreground#ffffff
banner.background#000
banner.foreground#fff
banner.iconForeground#fff
bookmarks.lineBackgrounddefault
bookmarks.lineBorderdefault
bookmarks.overviewRulerdefault
breadcrumb.activeSelectionForeground#41aafa
breadcrumb.background#000
breadcrumb.focusForegrounddefault
breadcrumb.foregrounddefault
breadcrumbPicker.background#000
button.background#0078d4
button.border#ffffff12
button.foreground#ffffff
button.hoverBackground#0078d4e6
button.secondaryBackground#FFFFFF0F
button.secondaryForeground#cccccc
button.secondaryHoverBackground#ffffff15
button.separator#fff
charts.bluedefault
charts.foreground#fff
charts.greendefault
charts.lines#444
charts.orangedefault
charts.purpledefault
charts.reddefault
charts.yellowdefault
chat.avatarBackground#000
chat.avatarForeground#fff
chat.requestBackground#000
chat.requestBorder#41aafa
chat.slashCommandBackground#000
chat.slashCommandForeground#000
checkbox.background#313131
checkbox.border#6B6B6B
checkbox.foreground#41aafa
checkbox.selectBackground#000
checkbox.selectBorder#fff
commandCenter.activeBackground#000
commandCenter.activeBorder#aaa
commandCenter.activeForeground#41aafa
commandCenter.background#000
commandCenter.border#444
commandCenter.debuggingBackground#ea6c1333
commandCenter.foreground#fff
commandCenter.inactiveBorder#222
commandCenter.inactiveForeground#222
commentsView.resolvedIcondefault
commentsView.unresolvedIcondefault
contrastActiveBorderdefault
contrastBorderdefault
debugConsole.errorForegrounddefault
debugConsole.infoForegrounddefault
debugConsole.sourceForegrounddefault
debugConsole.warningForegrounddefault
debugConsoleInputIcon.foregrounddefault
debugExceptionWidget.backgrounddefault
debugExceptionWidget.borderdefault
debugIcon.breakpointCurrentStackframeForegrounddefault
debugIcon.breakpointDisabledForegrounddefault
debugIcon.breakpointForegrounddefault
debugIcon.breakpointStackframeForegrounddefault
debugIcon.breakpointUnverifiedForegrounddefault
debugIcon.continueForegrounddefault
debugIcon.disconnectForegrounddefault
debugIcon.pauseForegrounddefault
debugIcon.restartForegrounddefault
debugIcon.startForegrounddefault
debugIcon.stepBackForegrounddefault
debugIcon.stepIntoForegrounddefault
debugIcon.stepOutForegrounddefault
debugIcon.stepOverForegrounddefault
debugIcon.stopForegrounddefault
debugTokenExpression.booleandefault
debugTokenExpression.errordefault
debugTokenExpression.namedefault
debugTokenExpression.numberdefault
debugTokenExpression.stringdefault
debugTokenExpression.typedefault
debugTokenExpression.valuedefault
debugToolBar.background#181818
debugToolBar.border#ea6c13
debugView.exceptionLabelBackgrounddefault
debugView.exceptionLabelForegrounddefault
debugView.stateLabelBackgrounddefault
debugView.stateLabelForegrounddefault
debugView.valueChangedHighlightdefault
descriptionForeground#8b949e
diffEditor.borderdefault
diffEditor.diagonalFilldefault
diffEditor.insertedLineBackground#23863633
diffEditor.insertedTextBackground#2386364d
diffEditor.insertedTextBorderdefault
diffEditor.move.borderdefault
diffEditor.moveActive.borderdefault
diffEditor.removedLineBackground#da363333
diffEditor.removedTextBackground#da36334d
diffEditor.removedTextBorderdefault
diffEditor.unchangedCodeBackgrounddefault
diffEditor.unchangedRegionBackgrounddefault
diffEditor.unchangedRegionForegrounddefault
diffEditor.unchangedRegionShadowdefault
diffEditorGutter.insertedLineBackgrounddefault
diffEditorGutter.removedLineBackgrounddefault
diffEditorOverview.insertedForegrounddefault
diffEditorOverview.removedForegrounddefault
disabledForeground#222
dropdown.background#313131
dropdown.border#ffffff1f
dropdown.foreground#cccccc
dropdown.listBackground#1f1f1f
editor.background#1E1E1E
editor.findMatchBackground#9e6a03
editor.findMatchBorderdefault
editor.findMatchForegrounddefault
editor.findMatchHighlightBackgrounddefault
editor.findMatchHighlightBorderdefault
editor.findMatchHighlightForegrounddefault
editor.findRangeHighlightBackgrounddefault
editor.findRangeHighlightBorderdefault
editor.focusedStackFrameHighlightBackgrounddefault
editor.foldBackgrounddefault
editor.foldPlaceholderForegrounddefault
editor.foreground#D4D4D4
editor.hoverHighlightBackgrounddefault
editor.inactiveSelectionBackground#3A3D41
editor.inlineValuesBackgrounddefault
editor.inlineValuesForegrounddefault
editor.lineHighlightBackgrounddefault
editor.lineHighlightBorderdefault
editor.linkedEditingBackgrounddefault
editor.placeholder.foregrounddefault
editor.rangeHighlightBackground#ffffff11
editor.rangeHighlightBorder#ccc
editor.selectionBackground#ffffff44
editor.selectionForegrounddefault
editor.selectionHighlightBackground#ADD6FF26
editor.selectionHighlightBorder#41aafa
editor.snippetFinalTabstopHighlightBackgrounddefault
editor.snippetFinalTabstopHighlightBorderdefault
editor.snippetTabstopHighlightBackgrounddefault
editor.snippetTabstopHighlightBorderdefault
editor.stackFrameHighlightBackgrounddefault
editor.symbolHighlightBackgrounddefault
editor.symbolHighlightBorderdefault
editor.wordHighlightBackground#ffffff11
editor.wordHighlightBorder#ccc
editor.wordHighlightStrongBackgrounddefault
editor.wordHighlightStrongBorderdefault
editor.wordHighlightTextBackgrounddefault
editor.wordHighlightTextBorderdefault
editorActionList.backgrounddefault
editorActionList.focusBackgrounddefault
editorActionList.focusForegrounddefault
editorActionList.foregrounddefault
editorActiveLineNumber.foregrounddefault
editorBracketHighlight.foreground1default
editorBracketHighlight.foreground2default
editorBracketHighlight.foreground3default
editorBracketHighlight.foreground4default
editorBracketHighlight.foreground5default
editorBracketHighlight.foreground6default
editorBracketHighlight.unexpectedBracket.foregrounddefault
editorBracketMatch.backgrounddefault
editorBracketMatch.borderdefault
editorBracketPairGuide.activeBackground1default
editorBracketPairGuide.activeBackground2default
editorBracketPairGuide.activeBackground3default
editorBracketPairGuide.activeBackground4default
editorBracketPairGuide.activeBackground5default
editorBracketPairGuide.activeBackground6default
editorBracketPairGuide.background1default
editorBracketPairGuide.background2default
editorBracketPairGuide.background3default
editorBracketPairGuide.background4default
editorBracketPairGuide.background5default
editorBracketPairGuide.background6default
editorCodeLens.foreground#fff
editorCommentsWidget.rangeActiveBackgrounddefault
editorCommentsWidget.rangeBackgrounddefault
editorCommentsWidget.replyInputBackgrounddefault
editorCommentsWidget.resolvedBorderdefault
editorCommentsWidget.unresolvedBorderdefault
editorCursor.backgrounddefault
editorCursor.foregrounddefault
editorError.backgrounddefault
editorError.borderdefault
editorError.foregrounddefault
editorGhostText.backgrounddefault
editorGhostText.borderdefault
editorGhostText.foregrounddefault
editorGroup.border#ffffff17
editorGroup.dropBackgrounddefault
editorGroup.dropIntoPromptBackgrounddefault
editorGroup.dropIntoPromptBorderdefault
editorGroup.dropIntoPromptForegrounddefault
editorGroup.emptyBackground#000
editorGroup.focusedEmptyBorderdefault
editorGroupHeader.borderdefault
editorGroupHeader.noTabsBackground#000
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#ffffff15
editorGutter.addedBackground#2ea043
editorGutter.backgrounddefault
editorGutter.commentGlyphForegrounddefault
editorGutter.commentRangeForegrounddefault
editorGutter.commentUnresolvedGlyphForegrounddefault
editorGutter.deletedBackground#f85149
editorGutter.foldingControlForegrounddefault
editorGutter.modifiedBackground#0078d4
editorHint.borderdefault
editorHint.foregrounddefault
editorHoverWidget.background#000
editorHoverWidget.borderdefault
editorHoverWidget.foreground#fff
editorHoverWidget.highlightForegrounddefault
editorHoverWidget.statusBarBackgrounddefault
editorIndentGuide.activeBackground#707070
editorIndentGuide.activeBackground1default
editorIndentGuide.activeBackground2default
editorIndentGuide.activeBackground3default
editorIndentGuide.activeBackground4default
editorIndentGuide.activeBackground5default
editorIndentGuide.activeBackground6default
editorIndentGuide.background#404040
editorIndentGuide.background1default
editorIndentGuide.background2default
editorIndentGuide.background3default
editorIndentGuide.background4default
editorIndentGuide.background5default
editorIndentGuide.background6default
editorInfo.backgrounddefault
editorInfo.borderdefault
editorInfo.foregrounddefault
editorInlayHint.background#8b949e1b
editorInlayHint.foregrounddefault
editorInlayHint.parameterBackgrounddefault
editorInlayHint.parameterForegrounddefault
editorInlayHint.typeBackground#8b949e1b
editorInlayHint.typeForegrounddefault
editorLightBulb.foregrounddefault
editorLightBulbAi.foregrounddefault
editorLightBulbAutoFix.foregrounddefault
editorLineNumber.activeForeground#cccccc
editorLineNumber.dimmedForeground#222
editorLineNumber.foreground#6e7681
editorLink.activeForegrounddefault
editorMarkerNavigation.backgrounddefault
editorMarkerNavigationError.backgrounddefault
editorMarkerNavigationError.headerBackgrounddefault
editorMarkerNavigationInfo.backgrounddefault
editorMarkerNavigationInfo.headerBackgrounddefault
editorMarkerNavigationWarning.backgrounddefault
editorMarkerNavigationWarning.headerBackgrounddefault
editorMultiCursor.primary.backgrounddefault
editorMultiCursor.primary.foregrounddefault
editorMultiCursor.secondary.backgrounddefault
editorMultiCursor.secondary.foregrounddefault
editorOverviewRuler.addedForegrounddefault
editorOverviewRuler.background#000
editorOverviewRuler.border#010409
editorOverviewRuler.bracketMatchForegrounddefault
editorOverviewRuler.commentForegrounddefault
editorOverviewRuler.commentUnresolvedForegrounddefault
editorOverviewRuler.commonContentForegrounddefault
editorOverviewRuler.currentContentForegrounddefault
editorOverviewRuler.deletedForegrounddefault
editorOverviewRuler.errorForegrounddefault
editorOverviewRuler.findMatchForegrounddefault
editorOverviewRuler.incomingContentForegrounddefault
editorOverviewRuler.infoForegrounddefault
editorOverviewRuler.inlineChatInserteddefault
editorOverviewRuler.inlineChatRemoveddefault
editorOverviewRuler.modifiedForegrounddefault
editorOverviewRuler.rangeHighlightForegrounddefault
editorOverviewRuler.selectionHighlightForegrounddefault
editorOverviewRuler.warningForegrounddefault
editorOverviewRuler.wordHighlightForegrounddefault
editorOverviewRuler.wordHighlightStrongForegrounddefault
editorOverviewRuler.wordHighlightTextForegrounddefault
editorPane.background#000
editorRuler.foregrounddefault
editorStickyScroll.backgrounddefault
editorStickyScroll.borderdefault
editorStickyScroll.shadowdefault
editorStickyScrollHover.backgrounddefault
editorSuggestWidget.backgrounddefault
editorSuggestWidget.borderdefault
editorSuggestWidget.focusHighlightForegrounddefault
editorSuggestWidget.foregrounddefault
editorSuggestWidget.highlightForegrounddefault
editorSuggestWidget.selectedBackgrounddefault
editorSuggestWidget.selectedForegrounddefault
editorSuggestWidget.selectedIconForegrounddefault
editorSuggestWidgetStatus.foregrounddefault
editorUnicodeHighlight.backgrounddefault
editorUnicodeHighlight.borderdefault
editorUnnecessaryCode.borderdefault
editorUnnecessaryCode.opacitydefault
editorWarning.backgrounddefault
editorWarning.borderdefault
editorWarning.foregrounddefault
editorWatermark.foregrounddefault
editorWhitespace.foregrounddefault
editorWidget.background#1f1f1f
editorWidget.border#444
editorWidget.foreground#fff
editorWidget.resizeBorder#41aafa
errorForeground#f85149
extensionBadge.remoteBackground#41aafa
extensionBadge.remoteForeground#000
extensionButton.background#000
extensionButton.foreground#fff
extensionButton.hoverBackground#41aafa50
extensionButton.prominentBackground#000
extensionButton.prominentForeground#41aafa
extensionButton.prominentHoverBackground#ffffff99
extensionButton.separator#fff
extensionIcon.preReleaseForegrounddefault
extensionIcon.sponsorForegrounddefault
extensionIcon.starForegrounddefault
extensionIcon.verifiedForegrounddefault
focusBorder#0078d4
foreground#cccccc
gitDecoration.addedResourceForegrounddefault
gitDecoration.conflictingResourceForegrounddefault
gitDecoration.deletedResourceForegrounddefault
gitDecoration.ignoredResourceForegrounddefault
gitDecoration.modifiedResourceForegrounddefault
gitDecoration.renamedResourceForegrounddefault
gitDecoration.stageDeletedResourceForegrounddefault
gitDecoration.stageModifiedResourceForegrounddefault
gitDecoration.submoduleResourceForegrounddefault
gitDecoration.untrackedResourceForegrounddefault
icon.foreground#cccccc
inlineChat.background#000
inlineChat.borderdefault
inlineChat.foregrounddefault
inlineChat.shadowdefault
inlineChatDiff.inserteddefault
inlineChatDiff.removeddefault
inlineChatInput.background#000
inlineChatInput.borderdefault
inlineChatInput.focusBorderdefault
inlineChatInput.placeholderForegrounddefault
input.background#2a2a2a
input.border#ffffff1f
input.foreground#cccccc
input.placeholderForeground#A6A6A6
inputOption.activeBackground#2489db82
inputOption.activeBorder#2488db
inputOption.activeForegrounddefault
inputOption.hoverBackgrounddefault
inputValidation.errorBackgrounddefault
inputValidation.errorBorderdefault
inputValidation.errorForegrounddefault
inputValidation.infoBackgrounddefault
inputValidation.infoBorderdefault
inputValidation.infoForegrounddefault
inputValidation.warningBackgrounddefault
inputValidation.warningBorderdefault
inputValidation.warningForegrounddefault
interactive.activeCodeBorderdefault
interactive.inactiveCodeBorderdefault
issues.closeddefault
issues.newIssueDecorationdefault
issues.opendefault
keybindingLabel.background#080808
keybindingLabel.border#444
keybindingLabel.bottomBorder#888
keybindingLabel.foreground#cccccc
keybindingTable.headerBackgrounddefault
keybindingTable.rowsBackgrounddefault
list.activeSelectionBackground#323232
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#FFF
list.deemphasizedForegrounddefault
list.dropBackground#383B3D
list.dropBetweenBackgrounddefault
list.errorForegrounddefault
list.filterMatchBackgrounddefault
list.filterMatchBorderdefault
list.focusAndSelectionOutlinedefault
list.focusBackgrounddefault
list.focusForegrounddefault
list.focusHighlightForegrounddefault
list.focusOutlinedefault
list.highlightForegrounddefault
list.hoverBackground#222
list.hoverForegrounddefault
list.inactiveFocusBackgrounddefault
list.inactiveFocusOutlinedefault
list.inactiveSelectionBackground#111
list.inactiveSelectionForeground#41aafa
list.inactiveSelectionIconForegrounddefault
list.invalidItemForegrounddefault
list.warningForegrounddefault
listFilterWidget.background#000
listFilterWidget.noMatchesOutline#888
listFilterWidget.outlinedefault
listFilterWidget.shadow#00000000
menu.background#252526
menu.border#454545
menu.foreground#CCCCCC
menu.selectionBackground#000
menu.selectionBorder#000
menu.selectionForeground#41aafa
menu.separatorBackground#454545
menubar.selectionBackground#000
menubar.selectionBorder#000
menubar.selectionForeground#41aafa
merge.borderdefault
merge.commonContentBackgrounddefault
merge.commonHeaderBackgrounddefault
merge.currentContentBackgrounddefault
merge.currentHeaderBackgrounddefault
merge.incomingContentBackgrounddefault
merge.incomingHeaderBackgrounddefault
mergeEditor.change.backgrounddefault
mergeEditor.change.word.backgrounddefault
mergeEditor.changeBase.backgrounddefault
mergeEditor.changeBase.word.backgrounddefault
mergeEditor.conflict.handled.minimapOverViewRulerdefault
mergeEditor.conflict.handledFocused.borderdefault
mergeEditor.conflict.handledUnfocused.borderdefault
mergeEditor.conflict.input1.backgrounddefault
mergeEditor.conflict.input2.backgrounddefault
mergeEditor.conflict.unhandled.minimapOverViewRulerdefault
mergeEditor.conflict.unhandledFocused.borderdefault
mergeEditor.conflict.unhandledUnfocused.borderdefault
mergeEditor.conflictingLines.backgrounddefault
minimap.background#000
minimap.errorHighlightdefault
minimap.findMatchHighlightdefault
minimap.foregroundOpacitydefault
minimap.infoHighlightdefault
minimap.selectionHighlightdefault
minimap.selectionOccurrenceHighlightdefault
minimap.warningHighlightdefault
minimapGutter.addedBackgrounddefault
minimapGutter.deletedBackgrounddefault
minimapGutter.modifiedBackgrounddefault
minimapSlider.activeBackgrounddefault
minimapSlider.backgrounddefault
minimapSlider.hoverBackgrounddefault
multiDiffEditor.backgrounddefault
multiDiffEditor.borderdefault
multiDiffEditor.headerBackgrounddefault
notebook.cellBorderColordefault
notebook.cellEditorBackgrounddefault
notebook.cellHoverBackgrounddefault
notebook.cellInsertionIndicatordefault
notebook.cellStatusBarItemHoverBackgrounddefault
notebook.cellToolbarSeparatordefault
notebook.editorBackground#000
notebook.focusedCellBackgrounddefault
notebook.focusedCellBorderdefault
notebook.focusedEditorBorderdefault
notebook.inactiveFocusedCellBorderdefault
notebook.inactiveSelectedCellBorderdefault
notebook.outputContainerBackgroundColordefault
notebook.outputContainerBorderColordefault
notebook.selectedCellBackgrounddefault
notebook.selectedCellBorderdefault
notebook.symbolHighlightBackgrounddefault
notebookEditorOverviewRuler.runningCellForegrounddefault
notebookScrollbarSlider.activeBackgrounddefault
notebookScrollbarSlider.backgrounddefault
notebookScrollbarSlider.hoverBackgrounddefault
notebookStatusErrorIcon.foregrounddefault
notebookStatusRunningIcon.foregrounddefault
notebookStatusSuccessIcon.foregrounddefault
notificationCenter.border#41aafa
notificationCenterHeader.background#1f1f1f
notificationCenterHeader.foreground#cccccc
notificationLink.foreground#41aafa
notifications.background#1f1f1f
notifications.border#ffffff15
notifications.foreground#cccccc
notificationsErrorIcon.foregrounddefault
notificationsInfoIcon.foregrounddefault
notificationsWarningIcon.foregrounddefault
notificationToast.border#41aafa
outputView.background#000
outputViewStickyScroll.backgrounddefault
panel.background#181818
panel.border#ffffff15
panel.dropBorder#fff
panelInput.border#ffffff15
panelSection.border#000
panelSection.dropBackgrounddefault
panelSectionHeader.background#000
panelSectionHeader.border#000
panelSectionHeader.foreground#fff
panelStickyScroll.backgrounddefault
panelStickyScroll.borderdefault
panelStickyScroll.shadowdefault
panelTitle.activeBorder#0078d4
panelTitle.activeForeground#cccccc
panelTitle.inactiveForeground#8b949e
peekView.borderdefault
peekViewEditor.background#1f1f1f
peekViewEditor.matchHighlightBackground#bb800966
peekViewEditor.matchHighlightBorderdefault
peekViewEditorGutter.backgrounddefault
peekViewEditorStickyScroll.backgrounddefault
peekViewResult.background#1f1f1f
peekViewResult.fileForegrounddefault
peekViewResult.lineForegrounddefault
peekViewResult.matchHighlightBackground#bb800966
peekViewResult.selectionBackgrounddefault
peekViewResult.selectionForegrounddefault
peekViewTitle.background#000
peekViewTitleDescription.foregrounddefault
peekViewTitleLabel.foregrounddefault
pickerGroup.border#ffffff15
pickerGroup.foreground#8b949e
ports.iconRunningProcessForeground#369432
problemsErrorIcon.foregrounddefault
problemsInfoIcon.foregrounddefault
problemsWarningIcon.foregrounddefault
profileBadge.background#000
profileBadge.foreground#fff
profiles.sashBorderdefault
progressBar.background#0078d4
pullRequests.closeddefault
pullRequests.draftdefault
pullRequests.mergeddefault
pullRequests.notificationdefault
pullRequests.opendefault
quickInput.background#1f1f1f
quickInput.foreground#cccccc
quickInputList.focusBackground#222
quickInputList.focusForeground#41aafa
quickInputList.focusIconForeground#41aafa
quickInputTitle.backgrounddefault
radio.activeBackground#000
radio.activeBorder#000
radio.activeForeground#41aafa
radio.inactiveBackground#000
radio.inactiveBorder#fff
radio.inactiveForeground#fff
radio.inactiveHoverBackground#444
remoteHub.decorations.addedForegroundColordefault
remoteHub.decorations.conflictForegroundColordefault
remoteHub.decorations.deletedForegroundColordefault
remoteHub.decorations.ignoredResourceForegrounddefault
remoteHub.decorations.incomingAddedForegroundColordefault
remoteHub.decorations.incomingDeletedForegroundColordefault
remoteHub.decorations.incomingModifiedForegroundColordefault
remoteHub.decorations.incomingRenamedForegroundColordefault
remoteHub.decorations.modifiedForegroundColordefault
remoteHub.decorations.possibleConflictForegroundColordefault
remoteHub.decorations.submoduleForegroundColordefault
remoteHub.decorations.workspaceRepositoriesView.hasUncommittedChangesForegroundColordefault
rust_analyzer.syntaxTreeBorderdefault
sash.hoverBorder#41aafa
scmGraph.foreground1default
scmGraph.foreground2default
scmGraph.foreground3default
scmGraph.foreground4default
scmGraph.foreground5default
scmGraph.historyItemBaseRefColordefault
scmGraph.historyItemHoverAdditionsForegrounddefault
scmGraph.historyItemHoverDefaultLabelBackgrounddefault
scmGraph.historyItemHoverDefaultLabelForegrounddefault
scmGraph.historyItemHoverDeletionsForegrounddefault
scmGraph.historyItemHoverLabelForeground#000000
scmGraph.historyItemRefColordefault
scmGraph.historyItemRemoteRefColordefault
scrollbar.shadow#484f5833
scrollbarSlider.activeBackground#6e768187
scrollbarSlider.background#6e768133
scrollbarSlider.hoverBackground#6e768145
search.resultsInfoForegrounddefault
searchEditor.findMatchBackgrounddefault
searchEditor.findMatchBorderdefault
searchEditor.textInputBorder#222
selection.background#444
settings.checkboxBackgrounddefault
settings.checkboxBorderdefault
settings.checkboxForegrounddefault
settings.dropdownBackground#313131
settings.dropdownBorder#ffffff1f
settings.dropdownForegrounddefault
settings.dropdownListBorderdefault
settings.focusedRowBackgrounddefault
settings.focusedRowBorderdefault
settings.headerBorderdefault
settings.headerForeground#ffffff
settings.modifiedItemIndicator#bb800966
settings.numberInputBackgrounddefault
settings.numberInputBorder#222
settings.numberInputForegrounddefault
settings.rowHoverBackgrounddefault
settings.sashBorderdefault
settings.settingsHeaderHoverForegrounddefault
settings.textInputBackgrounddefault
settings.textInputBorder#222
settings.textInputForegrounddefault
sideBar.background#181818
sideBar.border#ffffff15
sideBar.dropBackground#fff
sideBar.foreground#cccccc
sideBarActivityBarTop.border#000
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#ccc3
sideBarSectionHeader.foreground#cccccc
sideBarStickyScroll.backgrounddefault
sideBarStickyScroll.borderdefault
sideBarStickyScroll.shadowdefault
sideBarTitle.background#000
sideBarTitle.foreground#BBBBBB
sideBySideEditor.horizontalBorderdefault
sideBySideEditor.verticalBorderdefault
simpleFindWidget.sashBorderdefault
statusBar.background#181818
statusBar.border#ffffff15
statusBar.debuggingBackground#0078d4
statusBar.debuggingBorder#ea6c1322
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#0078d4
statusBar.foreground#cccccc
statusBar.noFolderBackground#1f1f1f
statusBar.noFolderBorder#000
statusBar.noFolderForeground#aaa
statusBarItem.activeBackground#444
statusBarItem.compactHoverBackground#222
statusBarItem.errorBackgrounddefault
statusBarItem.errorForegrounddefault
statusBarItem.errorHoverBackgrounddefault
statusBarItem.errorHoverForegrounddefault
statusBarItem.focusBorder#0078d4
statusBarItem.hoverBackground#000
statusBarItem.hoverForeground#41aafa
statusBarItem.offlineBackgrounddefault
statusBarItem.offlineForegrounddefault
statusBarItem.offlineHoverBackgrounddefault
statusBarItem.offlineHoverForegrounddefault
statusBarItem.prominentBackground#6e768166
statusBarItem.prominentForegrounddefault
statusBarItem.prominentHoverBackgrounddefault
statusBarItem.prominentHoverForegrounddefault
statusBarItem.remoteBackground#16825D
statusBarItem.remoteForeground#FFF
statusBarItem.remoteHoverBackground#41aafa
statusBarItem.remoteHoverForeground#000
statusBarItem.warningBackgrounddefault
statusBarItem.warningForegrounddefault
statusBarItem.warningHoverBackgrounddefault
statusBarItem.warningHoverForegrounddefault
symbolIcon.arrayForegrounddefault
symbolIcon.booleanForegrounddefault
symbolIcon.classForegrounddefault
symbolIcon.colorForegrounddefault
symbolIcon.constantForegrounddefault
symbolIcon.constructorForegrounddefault
symbolIcon.enumeratorForegrounddefault
symbolIcon.enumeratorMemberForegrounddefault
symbolIcon.eventForegrounddefault
symbolIcon.fieldForegrounddefault
symbolIcon.fileForegrounddefault
symbolIcon.folderForegrounddefault
symbolIcon.functionForegrounddefault
symbolIcon.interfaceForegrounddefault
symbolIcon.keyForegrounddefault
symbolIcon.keywordForegrounddefault
symbolIcon.methodForegrounddefault
symbolIcon.moduleForegrounddefault
symbolIcon.namespaceForegrounddefault
symbolIcon.nullForegrounddefault
symbolIcon.numberForegrounddefault
symbolIcon.objectForegrounddefault
symbolIcon.operatorForegrounddefault
symbolIcon.packageForegrounddefault
symbolIcon.propertyForegrounddefault
symbolIcon.referenceForegrounddefault
symbolIcon.snippetForegrounddefault
symbolIcon.stringForegrounddefault
symbolIcon.structForegrounddefault
symbolIcon.textForegrounddefault
symbolIcon.typeParameterForegrounddefault
symbolIcon.unitForegrounddefault
symbolIcon.variableForegrounddefault
tab.activeBackground#1f1f1f
tab.activeBorder#1f1f1f
tab.activeBorderTop#0078d4
tab.activeForeground#ffffff
tab.activeModifiedBorder#ea6c13
tab.border#ffffff15
tab.dragAndDropBorder#41aafa
tab.hoverBackground#1f1f1f
tab.hoverBorderdefault
tab.hoverForegrounddefault
tab.inactiveBackground#181818
tab.inactiveForeground#ffffff80
tab.inactiveModifiedBorder#ea6c13aa
tab.lastPinnedBorder#ccc3
tab.selectedBackground#444
tab.selectedBorderTop#fff
tab.selectedForeground#fff
tab.unfocusedActiveBackground#000
tab.unfocusedActiveBorder#1f1f1f
tab.unfocusedActiveBorderTop#ffffff15
tab.unfocusedActiveForegrounddefault
tab.unfocusedActiveModifiedBorderdefault
tab.unfocusedHoverBackground#6e76811a
tab.unfocusedHoverBorderdefault
tab.unfocusedHoverForegrounddefault
tab.unfocusedInactiveBackgrounddefault
tab.unfocusedInactiveForegrounddefault
tab.unfocusedInactiveModifiedBorderdefault
terminal.ansiBlack#333
terminal.ansiBluedefault
terminal.ansiBrightBlack#555
terminal.ansiBrightBluedefault
terminal.ansiBrightCyandefault
terminal.ansiBrightGreendefault
terminal.ansiBrightMagentadefault
terminal.ansiBrightReddefault
terminal.ansiBrightWhitedefault
terminal.ansiBrightYellowdefault
terminal.ansiCyandefault
terminal.ansiGreendefault
terminal.ansiMagentadefault
terminal.ansiReddefault
terminal.ansiWhitedefault
terminal.ansiYellowdefault
terminal.background#000
terminal.borderdefault
terminal.dropBackgrounddefault
terminal.findMatchBackgrounddefault
terminal.findMatchBorderdefault
terminal.findMatchHighlightBackgrounddefault
terminal.findMatchHighlightBorderdefault
terminal.foreground#cccccc
terminal.hoverHighlightBackgrounddefault
terminal.inactiveSelectionBackground#3A3D41
terminal.initialHintForegrounddefault
terminal.selectionBackgrounddefault
terminal.selectionForegrounddefault
terminal.tab.activeBorder#0078d4
terminalCommandDecoration.defaultBackgrounddefault
terminalCommandDecoration.errorBackgrounddefault
terminalCommandDecoration.successBackgrounddefault
terminalCommandGuide.foregrounddefault
terminalCursor.background#000
terminalCursor.foreground#fff
terminalOverviewRuler.borderdefault
terminalOverviewRuler.cursorForegrounddefault
terminalOverviewRuler.findMatchForegrounddefault
terminalStickyScroll.backgrounddefault
terminalStickyScroll.borderdefault
terminalStickyScrollHover.backgrounddefault
testing.coverCountBadgeBackground#41aafa
testing.coverCountBadgeForeground#000
testing.coveredBackgrounddefault
testing.coveredBorderdefault
testing.coveredGutterBackgrounddefault
testing.iconErroreddefault
testing.iconErrored.retireddefault
testing.iconFaileddefault
testing.iconFailed.retireddefault
testing.iconPasseddefault
testing.iconPassed.retireddefault
testing.iconQueueddefault
testing.iconQueued.retireddefault
testing.iconSkippeddefault
testing.iconSkipped.retireddefault
testing.iconUnsetdefault
testing.iconUnset.retireddefault
testing.message.error.decorationForegrounddefault
testing.message.error.lineBackgrounddefault
testing.message.info.decorationForegrounddefault
testing.message.info.lineBackgrounddefault
testing.messagePeekBorderdefault
testing.messagePeekHeaderBackgrounddefault
testing.peekBorderdefault
testing.peekHeaderBackgrounddefault
testing.runActiondefault
testing.uncoveredBackgrounddefault
testing.uncoveredBorderdefault
testing.uncoveredBranchBackgrounddefault
testing.uncoveredGutterBackgrounddefault
textBlockQuote.background#010409
textBlockQuote.border#ffffff14
textCodeBlock.background#6e768166
textLink.activeForeground#40A6FF
textLink.foreground#40A6FF
textPreformat.backgrounddefault
textPreformat.foregrounddefault
textSeparator.foreground#21262d
titleBar.activeBackground#181818
titleBar.activeForeground#cccccc
titleBar.border#ffffff15
titleBar.inactiveBackground#1f1f1f
titleBar.inactiveForeground#8b949e
toolbar.activeBackground#41aafa
toolbar.hoverBackground#222
toolbar.hoverOutline#444
tree.inactiveIndentGuidesStrokedefault
tree.indentGuidesStrokedefault
tree.tableColumnsBorderdefault
tree.tableOddRowsBackgrounddefault
walkThrough.embeddedEditorBackground#000
walkthrough.stepTitle.foreground#fff
welcomePage.background#000
welcomePage.progress.background#000
welcomePage.progress.foreground#0078d4
welcomePage.tileBackground#ffffff0f
welcomePage.tileBorder#444
welcomePage.tileHoverBackground#222
widget.border#303031
widget.shadow#00000000
window.activeBorder#00000000
window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#DCDCAA	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#4EC9B0	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#4EC9B0	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator	#C586C0	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder	#9CDCFE	—
variable.other.constant, variable.other.enummember	#4FC1FF	—
meta.object-literal.key	#9CDCFE	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#CE9178	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#CE9178	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#d16969	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#DCDCAA	—
keyword.operator.quantifier.regexp	#d7ba7d	—
constant.character, constant.other.option	#569cd6	—
constant.character.escape	#d7ba7d	—
entity.name.label	#C8C8C8	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#DCDCAA	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#4EC9B0	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#4EC9B0	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator	#C586C0	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder	#9CDCFE	—
variable.other.constant, variable.other.enummember	#4FC1FF	—
meta.object-literal.key	#9CDCFE	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#CE9178	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#CE9178	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#d16969	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#DCDCAA	—
keyword.operator.quantifier.regexp	#d7ba7d	—
constant.character, constant.other.option	#569cd6	—
constant.character.escape	#d7ba7d	—
entity.name.label	#C8C8C8	—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown	#D4D4D4	—
emphasis	—	italic
strong	—	bold
header	#000080	—
comment, string.quoted.docstring	#6A9955	—
constant.language	#569cd6	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#b5cea8	—
constant.regexp	#646695	—
entity.name.tag	#569cd6	—
entity.name.tag.css	#d7ba7d	—
entity.other.attribute-name	#9cdcfe	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss	#d7ba7d	—
invalid	#f44747	—
markup.underline	—	underline
markup.bold	#569cd6	bold
markup.heading	#569cd6	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inserted	#b5cea8	—
markup.deleted	#ce9178	—
markup.changed	#569cd6	—
punctuation.definition.quote.begin.markdown	#6A9955	—
punctuation.definition.list.begin.markdown	#6796e6	—
markup.inline.raw	#ce9178	—
punctuation.definition.tag	#808080	—
meta.preprocessor, entity.name.function.preprocessor	#569cd6	—
meta.preprocessor.string	#ce9178	—
meta.preprocessor.numeric	#b5cea8	—
meta.structure.dictionary.key.python	#9cdcfe	—
meta.diff.header	#569cd6	—
storage	#569cd6	—
storage.type	#569cd6	—
storage.modifier, keyword.operator.noexcept	#569cd6	—
string, meta.embedded.assembly	#ce9178	—
string.tag	#ce9178	—
string.value	#ce9178	—
string.regexp	#d16969	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#569cd6	—
meta.template.expression	#d4d4d4	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded	#9cdcfe	—
keyword	#569cd6	—
keyword.control	#569cd6	—
keyword.operator	#d4d4d4	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#569cd6	—
keyword.other.unit	#b5cea8	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#569cd6	—
support.function.git-rebase	#9cdcfe	—
constant.sha.git-rebase	#b5cea8	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#d4d4d4	—
variable.language	#569cd6	—

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}!`;
}