AtomAx Theme

Name: AtomAx Theme
Author: Vela Inc

Publisher: Vela IncThemes in package: 9

AtomAx Theme for VS Code

GitHub

Color themes

VS Code preview

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

AtomAx Theme — AtomAx Dark+

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.

activityBar.activeBackground#010409
activityBar.activeBorder#23863680
activityBar.activeFocusBorder#238636
activityBar.background#010409
activityBar.border#21262d
activityBar.dropBorder#21262d
activityBar.foreground#238636cd
activityBar.inactiveForeground#c9d1d980
activityBarBadge.background#238636
activityBarBadge.foreground#c9d1d9
badge.foreground#c9d1d9
banner.background#23863680
banner.foreground#c9d1d9
banner.iconForeground#23863680
breadcrumb.activeSelectionforeground#c9d1d9
breadcrumb.background#010409
breadcrumb.focusforeground#c9d1d9
breadcrumb.foreground#c9d1d980
breadcrumbPicker.background#010409
button.background#23863680
button.border#2386364d
button.foreground#c9d1d9
button.hoverBackground#2386364d
button.secondaryBackground#23863680
button.secondaryforeground#c9d1d9
button.secondaryHoverBackground#2386364d
button.separator#2386364d
charts.blue#388bfd66
charts.foreground#c9d1d9
charts.green#238636
charts.lines#8b949e
charts.orange#db6d2866
charts.purple#238636
charts.red#f8514966
charts.yellow#d29922
checkbox.background#010409
checkbox.border#21262d
checkbox.foreground#c9d1d9
commandCenter.activeBackground#23863680
commandCenter.activeforeground#c9d1d9
commandCenter.background#010409
commandCenter.border#21262d
commandCenter.foreground#c9d1d9
contrastActiveborder#21262d
contrastBorder#010409
debugConsole.errorForeground#f8514966
debugConsole.infoForeground#58a6ff
debugConsole.sourceForeground#c9d1d9
debugConsole.warningForeground#db6d28
debugConsoleInputIcon.foreground#238636
debugExceptionWidget.background#010409
debugExceptionWidget.border#21262d
debugIcon.breakpointCurrentStackframeForeground#238636
debugIcon.breakpointDisabledForeground#6e7681
debugIcon.breakpointForeground#bd561d
debugIcon.breakpointStackframeForeground#c9d1d9
debugIcon.breakpointUnverifiedForeground#d29922
debugIcon.continueForeground#238636
debugIcon.disconnectForeground#f85149
debugIcon.pauseForeground#58a6ff
debugIcon.restartForeground#58a6ff80
debugIcon.startForeground#58a6ff80
debugIcon.stepBackForeground#58a6ff80
debugIcon.stepIntoForeground#58a6ff80
debugIcon.stepOutForeground#58a6ff80
debugIcon.stopForeground#f85149
debugTokenExpression.boolean#d2992280
debugTokenExpression.error#f8514980
debugTokenExpression.name#58a6ff80
debugTokenExpression.number#db6d2880
debugTokenExpression.string#8b949e80
debugTokenExpression.value#db61a280
debugView.exceptionLabelBackground#21262d
debugView.exceptionLabelforeground#c9d1d9
debugView.stateLabelBackground#21262d
debugView.stateLabelforeground#c9d1d9
debugView.valueChangedHighlight#23863680
descriptionForeground#c9d1d9
diffEditor.border#21262d
diffEditor.diagonalFill#c9d1d9
diffEditor.insertedLineBackground#23863680
diffEditor.insertedTextBackground#23863680
diffEditor.insertedTextBorder#23863680
diffEditorGutter.insertedLineBackground#23863680
diffEditorOverview.insertedForeground#23863680
disabledForeground#8b949e
dropdown.background#010409
dropdown.border#21262d
dropdown.foreground#23863680
dropdown.listBackground#21262d
editor.background#010409
editor.findMatchBackground#23863633
editor.findMatchBorder#23863666
editor.findMatchHighlightBackground#9e6a0333
editor.findMatchHighlightBorder#9e6a0333
editor.findRangeHighlightBackground#238636b3
editor.findRangeHighlightBorder#238636b3
editor.focusedStackFrameHighlightBackground#23863680
editor.foldBackground#21262d
editor.foreground#c9d1d9
editor.hoverHighlightBackground#23863666
editor.inactiveSelectionBackground#21262d
editor.inlineValuesBackground#23863680
editor.inlineValuesforeground#c9d1d9
editor.lineHighlightBackground#23863633
editor.lineHighlightBorder#23863633
editor.linkedEditingBackground#d2992233
editor.rangeHighlightBackground#2386364d
editor.rangeHighlightBorder#23863680
editor.selectionBackground#21262d
editor.selectionHighlightBackground#2386364d
editor.selectionHighlightborder#21262d
editor.snippetFinalTabstopHighlightBackground#010409
editor.snippetFinalTabstopHighlightborder#21262d
editor.snippetTabstopHighlightBackground#21262d
editor.snippetTabstopHighlightborder#21262d
editor.stackFrameHighlightbackground#c9d1d9
editor.symbolHighlightBackground#8957e580
editor.symbolHighlightBorder#8957e566
editor.wordHighlightBackground#23863680
editor.wordHighlightBorder#21262d
editor.wordHighlightStrongBackground#23863633
editor.wordHighlightStrongBorder#21262d
editorBracketHighlight.foreground1#db61a2
editorBracketHighlight.foreground2#238636
editorBracketHighlight.foreground3#a371f7
editorBracketHighlight.foreground4#f85149
editorBracketHighlight.foreground5#d29922
editorBracketHighlight.foreground6#db6d28
editorBracketHighlight.unexpectedBracket.foreground#db61a266
editorBracketMatch.background#010409
editorBracketMatch.border#21262d
editorBracketPairGuide.activeBackground1#db61a2b3
editorBracketPairGuide.activeBackground2#23863680
editorBracketPairGuide.activeBackground3#a371f7b3
editorBracketPairGuide.activeBackground4#f85149b3
editorBracketPairGuide.activeBackground5#d29922b3
editorBracketPairGuide.activeBackground6#db6d28b3
editorBracketPairGuide.background1#db61a2b3
editorBracketPairGuide.background2#23863680
editorBracketPairGuide.background3#a371f7b3
editorBracketPairGuide.background4#f85149b3
editorBracketPairGuide.background5#d29922b3
editorBracketPairGuide.background6#db6d28b3
editorCodeLens.foreground#c9d1d9
editorCommentsWidget.rangeActiveBackground#21262d
editorCommentsWidget.rangeActiveborder#21262d
editorCommentsWidget.rangeBackground#238636
editorCommentsWidget.rangeborder#21262d
editorCommentsWidget.resolvedBorder#21262d
editorCommentsWidget.unresolvedBorder#21262d
editorCursor.background#010409
editorCursor.foreground#3fb950
editorError.border#f8514966
editorGhostText.background#238636b3
editorGhostText.border#23863680
editorGhostText.foreground#58a6ff
editorGroup.border#21262d
editorGroup.dropBackground#2386364d
editorGroup.dropIntoPromptBackground#010409
editorGroup.dropIntoPromptborder#21262d
editorGroup.dropIntoPromptforeground#c9d1d9
editorGroup.emptyBackground#010409
editorGroup.focusedEmptyBorder#21262d
editorGroupHeader.border#21262d
editorGroupHeader.noTabsBackground#010409
editorGroupHeader.tabsBackground#010409
editorGutter.addedBackground#58a6ff80
editorGutter.background#010409
editorGutter.commentRangeforeground#c9d1d9
editorGutter.deletedBackground#f8514980
editorGutter.foldingControlforeground#c9d1d9
editorGutter.modifiedBackground#3fb950
editorHint.border#23863680
editorHint.foreground#58a6ff80
editorHoverWidget.background#010409
editorHoverWidget.border#21262d
editorHoverWidget.foreground#c9d1d980
editorHoverWidget.highlightForeground#238636
editorIndentGuide.background#c9d1d900
editorInfo.background#010409
editorInfo.border#58a6ff4d
editorInfo.foreground#58a6ff
editorInlayHint.background#010409
editorInlayHint.foreground#c9d1d966
editorInlayHint.parameterBackground#21262d80
editorInlayHint.parameterForeground#58a6ff80
editorInlayHint.typeBackground#21262d80
editorInlayHint.typeForeground#58a6ff80
editorLightBulb.foreground#d29922
editorLightBulbAutoFix.foreground#23863680
editorLineNumber.activeForeground#238636
editorLineNumber.foreground#c9d1d980
editorLink.activeForeground#58a6ff
editorMarkerNavigation.background#010409
editorMarkerNavigationError.headerBackground#f8514966
editorMarkerNavigationInfo.background#58a6ff
editorMarkerNavigationInfo.headerBackground#010409
editorOverviewRuler.addedForeground#58a6ff
editorOverviewRuler.background#010409
editorOverviewRuler.border#23863680
editorOverviewRuler.commonContentforeground#c9d1d9
editorOverviewRuler.currentContentForeground#23863680
editorOverviewRuler.deletedForeground#d2992280
editorOverviewRuler.findMatchForeground#23863680
editorOverviewRuler.incomingContentforeground#c9d1d9
editorOverviewRuler.infoForeground#58a6ff80
editorOverviewRuler.modifiedForeground#23863680
editorOverviewRuler.rangeHighlightForeground#23863633
editorOverviewRuler.selectionHighlightForeground#23863680
editorOverviewRuler.wordHighlightForeground#23863680
editorOverviewRuler.wordHighlightStrongForeground#23863680
editorPane.background#21262d
editorRuler.foreground#23863680
editorStickyScroll.background#010409
editorStickyScrollHover.background#2386364d
editorSuggestWidget.background#010409
editorSuggestWidget.border#21262d
editorSuggestWidget.focusHighlightforeground#c9d1d9
editorSuggestWidget.foreground#c9d1d9
editorSuggestWidget.highlightforeground#c9d1d9
editorSuggestWidget.selectedBackground#21262d
editorSuggestWidget.selectedforeground#c9d1d9
editorSuggestWidget.selectedIconforeground#c9d1d9
editorSuggestWidgetStatus.foreground#58a6ff
editorUnicodeHighlight.background#23863680
editorUnicodeHighlight.border#23863680
editorUnnecessaryCode.border#21262d
editorWarning.foreground#f8514966
editorWhitespace.foreground#db61a266
editorWidget.background#010409
editorWidget.border#21262d
editorWidget.foreground#c9d1d9
editorWidget.resizeBorder#23863680
errorForeground#f8514966
extensionBadge.remoteBackground#23863680
extensionButton.prominentBackground#23863680
extensionButton.prominentforeground#c9d1d9
extensionButton.prominentHoverBackground#23863699
extensionIcon.preReleaseForeground#db6d2866
extensionIcon.sponsorForeground#a371f766
extensionIcon.starForeground#d29922
extensionIcon.verifiedForeground#58a6ff
focusBorder#01040980
foreground#c9d1d980
gitDecoration.addedResourceForeground#23863680
gitDecoration.conflictingResourceForeground#bd561d
gitDecoration.deletedResourceForeground#f8514966
gitDecoration.modifiedResourceForeground#58a6ff
gitDecoration.renamedResourceforeground#c9d1d9
gitDecoration.stageDeletedResourceForeground#58a6ff80
gitDecoration.stageModifiedResourceForeground#238636
gitDecoration.submoduleResourceForeground#8b949e
gitDecoration.untrackedResourceforeground#c9d1d9
icon.foreground#c9d1d980
input.background#2386364d
input.border#23863666
input.foreground#c9d1d9
input.placeholderForeground#c9d1d9
inputOption.activeBackground#21262d
inputOption.activeBorder#21262d
inputOption.activeForeground#c9d1d9
inputOption.hoverBackground#c9d1d94d
inputValidation.infoBorder#58a6ff80
inputValidation.infoForeground#58a6ff80
inputValidation.warningBackground#58a6ff80
inputValidation.warningBorder#f8514980
inputValidation.warningForeground#f8514980
interactive.activeCodeBorder#d29922b3
interactive.inactiveCodeBorder#2386364d
issues.closed#f8514980
issues.newIssueDecoration#c9d1d9
issues.open#238636
keybindingLabel.background#010409
keybindingLabel.border#23863680
keybindingLabel.bottomBorder#21262d
keybindingLabel.foreground#c9d1d9
keybindingTable.headerBackground#23863633
keybindingTable.rowsBackground#21262d4d
list.activeSelectionBackground#21262d
list.activeSelectionforeground#c9d1d9
list.activeSelectionIconForeground#238636
list.deemphasizedForeground#d29922
list.dropBackground#23863680
list.errorForeground#f8514966
list.filterMatchBackground#23863666
list.filterMatchBorder#23863699
list.focusAndSelectionOutline#23863680
list.focusBackground#23863680
list.focusforeground#c9d1d980
list.focusHighlightForeground#23863680
list.focusOutline#23863680
list.highlightforeground#c9d1d9
list.hoverBackground#2386364d
list.hoverforeground#c9d1d9
list.inactiveFocusBackground#6e768180
list.inactiveFocusOutline#238636e6
list.inactiveSelectionBackground#2386364d
list.inactiveSelectionforeground#c9d1d9
list.inactiveSelectionIconForeground#238636
list.warningForeground#db6d2866
listFilterWidget.background#58a6ff80
listFilterWidget.noMatchesOutline#6e768180
listFilterWidget.outline#58a6ff66
listFilterWidget.shadow#21262d
menu.background#010409
menu.border#21262d
menu.foreground#c9d1d9
menu.selectionBackground#23863680
menu.selectionBorder#23863680
menu.selectionforeground#c9d1d9
menu.separatorBackground#21262d
menubar.selectionBackground#23863680
menubar.selectionBorder#238636
menubar.selectionForeground#c9d1d9
merge.border#21262d
merge.commonContentBackground#23863680
merge.commonHeaderBackground#23863680
merge.incomingContentBackground#23863680
merge.incomingHeaderBackground#23863680
mergeEditor.change.background#010409
mergeEditor.change.word.background#010409
mergeEditor.conflict.handled.minimapOverViewRuler#23863680
mergeEditor.conflict.handledFocused.border#21262d
mergeEditor.conflict.handledUnfocused.border#23863680
mergeEditor.conflict.unhandled.minimapOverViewRuler#58a6ff
mergeEditor.conflict.unhandledFocused.border#d2992280
mergeEditor.conflict.unhandledUnfocused.border#21262d
minimap.background#21262d4d
minimap.errorHighlight#f8514966
minimap.findMatchHighlight#23863680
minimap.foregroundOpacity#c9d1d9
minimap.selectionHighlight#23863680
minimap.selectionOccurrenceHighlight#238636cd
minimap.warningHighlight#f8514966
minimapGutter.addedBackground#58a6ffb3
minimapGutter.deletedBackground#f8514966
minimapGutter.modifiedBackground#58a6ff
minimapSlider.activeBackground#c9d1d9
minimapSlider.background#2386364d
minimapSlider.hoverBackground#23863680
notebook.cellBorderColor#21262d
notebook.cellEditorBackground#010409
notebook.cellHoverBackground#8b949e
notebook.cellInsertionIndicator#238636
notebook.cellToolbarSeparator#21262d
notebook.editorBackground#010409
notebook.focusedCellBorder#23863680
notebook.focusedEditorborder#21262d
notebook.inactiveFocusedCellBorder#23863680
notebook.inactiveSelectedCellBorder#21262d
notebook.outputContainerBackgroundColor#010409
notebook.outputContainerBorderColor#21262d
notebook.selectedCellBackground#2386364d
notebook.selectedCellBorder#2386364d
notebook.symbolHighlightBackground#2386364d
notebookScrollbarSlider.activeBackground#c9d1d9
notebookScrollbarSlider.background#23863680
notebookScrollbarSlider.hoverBackground#21262d
notebookStatusErrorIcon.foreground#f8514966
notebookStatusRunningIcon.foreground#58a6ff
notebookStatusSuccessIcon.foreground#238636
notificationCenter.border#21262d
notificationCenterHeader.background#010409
notificationCenterHeader.foreground#c9d1d9
notificationLink.foreground#58a6ff
notifications.background#010409
notifications.border#21262d
notifications.foreground#c9d1d9
notificationsInfoIcon.foreground#58a6ff
notificationsWarningIcon.foreground#58a6ff
notificationToast.border#21262d
panel.background#010409
panel.border#21262d
panel.dropBorder#21262d
panelInput.border#58a6ff
panelSection.border#f8514966
panelSection.dropBackground#010409
panelSectionHeader.background#010409
panelSectionHeader.border#21262d
panelSectionHeader.foreground#c9d1d9
panelTitle.activeBorder#23863680
panelTitle.activeforeground#c9d1d9
panelTitle.inactiveforeground#c9d1d9
peekView.border#d29922b3
peekViewEditor.background#010409
peekViewEditor.matchHighlightBackground#23863666
peekViewEditor.matchHighlightBorder#23863666
peekViewEditorGutter.background#010409
peekViewResult.background#010409
peekViewResult.fileforeground#c9d1d9
peekViewResult.lineforeground#c9d1d9
peekViewResult.matchHighlightBackground#23863666
peekViewResult.selectionBackground#23863666
peekViewResult.selectionForeground#238636
peekViewTitle.background#23863680
peekViewTitleDescription.foreground#f8514966
peekViewTitleLabel.foreground#23863680
pickerGroup.border#23863680
pickerGroup.foreground#c9d1d9
ports.iconRunningProcessForeground#f8514966
problemsErrorIcon.foreground#23863666
problemsInfoIcon.foreground#58a6ff80
progressBar.background#238636
pullRequests.notification#58a6ff80
quickInput.background#010409
quickInput.foreground#c9d1d9
quickInputList.focusBackground#23863680
quickInputList.focusforeground#c9d1d9
quickInputList.focusIconForeground#23863680
quickInputTitle.background#c9d1d9
sash.hoverBorder#23863680
scm.providerborder#21262d
scrollbar.shadow#21262d
scrollbarSlider.activeBackground#21262d
scrollbarSlider.background#23863680
scrollbarSlider.hoverbackground#c9d1d9
searchEditor.findMatchBackground#21262d
searchEditor.findMatchBorder#238636
searchEditor.textInputborder#21262d
selection.background#23863680
settings.checkboxBackground#21262d
settings.checkboxBorder#21262d
settings.checkboxForeground#c9d1d980
settings.dropdownBackground#21262d
settings.dropdownBorder#21262d
settings.dropdownForeground#c9d1d980
settings.dropdownListBorder#21262d
settings.focusedRowBackground#23863633
settings.focusedRowBorder#2386364d
settings.headerBorder#21262d
settings.headerForeground#23863680
settings.modifiedItemIndicator#f8514966
settings.numberInputBackground#010409
settings.numberInputBorder#21262d
settings.numberInputForeground#c9d1d9
settings.rowHoverBackground#21262d
settings.sashBorder#21262d
settings.textInputBackground#010409
settings.textInputBorder#21262d
settings.textInputForeground#c9d1d980
sideBar.background#010409
sideBar.border#21262d
sideBar.dropBackground#21262d
sideBar.foreground#c9d1d980
sideBarSectionHeader.background#010409
sideBarSectionHeader.border#21262d
sideBarSectionHeader.foreground#c9d1d9b3
sideBarTitle.foreground#c9d1d980
sideBySideEditor.horizontalBorder#238636
sideBySideEditor.verticalBorder#238636
statusBar.background#010409
statusBar.border#21262d
statusBar.debuggingBorder#a371f766
statusBar.debuggingforeground#c9d1d9
statusBar.focusborder#21262d
statusBar.foreground#c9d1d9
statusBar.noFolderforeground#c9d1d9
statusBarItem.activeBackground#010409
statusBarItem.compactHoverBackground#010409
statusBarItem.focusborder#21262d
statusBarItem.hoverBackground#23863680
statusBarItem.prominentBackground#010409
statusBarItem.prominentForeground#238636
statusBarItem.prominentHoverBackground#21262d4d
statusBarItem.remoteBackground#23863680
statusBarItem.remoteforeground#c9d1d9
statusBarItem.settingsProfilesBackground#010409
statusBarItem.settingsProfilesforeground#c9d1d9
statusBarItem.warningBackground#58a6ff80
statusBarItem.warningForeground#58a6ff80
symbolIcon.arrayForeground#58a6ff
symbolIcon.booleanForeground#a371f766
symbolIcon.classForeground#238636
symbolIcon.colorForeground#238636
symbolIcon.constantForeground#d29922
symbolIcon.constructorForeground#a371f7
symbolIcon.enumeratorForeground#3fb950
symbolIcon.enumeratorMemberForeground#238636
symbolIcon.eventForeground#db61a2
symbolIcon.fieldForeground#f8514966
symbolIcon.fileForeground#58a6ff
symbolIcon.folderForeground#23863680
symbolIcon.functionForeground#a371f7
symbolIcon.interfaceForeground#f85149
symbolIcon.keyForeground#3fb950
symbolIcon.keywordForeground#d29922
symbolIcon.methodForeground#db61a2
symbolIcon.moduleForeground#3fb950
symbolIcon.namespaceForeground#9e6a03
symbolIcon.nullForeground#6e7681
symbolIcon.numberForeground#bd561d
symbolIcon.objectForeground#238636
symbolIcon.operatorForeground#8957e5
symbolIcon.packageForeground#9e6a03
symbolIcon.propertyforeground#c9d1d9
symbolIcon.referenceForeground#8b949e
symbolIcon.snippetForeground#f8514966
symbolIcon.stringForeground#6e768166
symbolIcon.structForeground#388bfd66
symbolIcon.textForeground#2ea04366
symbolIcon.typeParameterForeground#da3633
symbolIcon.unitForeground#a371f766
symbolIcon.variableForeground#db61a266
tab.activeBackground#23863633
tab.activeBorder#23863680
tab.activeBorderTop#238636
tab.activeForeground#23863680
tab.activeModifiedBorder#23863680
tab.border#23863680
tab.hoverBackground#010409
tab.hoverBorder#9e6a0380
tab.hoverforeground#c9d1d9cd
tab.inactiveBackground#01040980
tab.inactiveForeground#8b949e80
tab.inactiveModifiedBorder#23863680
tab.lastPinnedborder#21262d
tab.unfocusedActiveBackground#23863633
tab.unfocusedActiveBorder#23863680
tab.unfocusedActiveBorderTop#238636
tab.unfocusedActiveForeground#23863680
tab.unfocusedActiveModifiedBorder#f8514966
tab.unfocusedHoverBackground#21262d
tab.unfocusedHoverBorder#23863680
tab.unfocusedHoverforeground#c9d1d9cd
tab.unfocusedInactiveBackground#010409
tab.unfocusedInactiveForeground#8b949e80
tab.unfocusedInactiveModifiedBorder#f8514966
terminal.ansiBlack#484f58e6
terminal.ansiBlue#58a6ff
terminal.ansiBrightBlack#6e7681
terminal.ansiBrightBlue#79c0ff
terminal.ansiBrightCyan#56d4dd
terminal.ansiBrightGreen#56d364
terminal.ansiBrightMagenta#d2a8ff
terminal.ansiBrightRed#ffa198
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e3b341
terminal.ansiCyan#39c5cf
terminal.ansiGreen#3fb950
terminal.ansiMagenta#bc8cff
terminal.ansiRed#ff7b72
terminal.ansiWhite#b1bac4
terminal.ansiYellow#d29922
terminal.background#010409
terminal.border#21262d
terminal.dropBackground#2386364d
terminal.findMatchBackground#2386364d
terminal.findMatchBorder#2386364d
terminal.findMatchHighlightBackground#58a6ff33
terminal.findMatchHighlightBorder#d2992233
terminal.inactiveSelectionBackground#d299224d
terminal.selectionBackground#23863680
terminal.selectionForeground#c9d1d9
terminal.tab.activeBorder#238636
terminalCommandDecoration.defaultBackground#21262d
terminalCommandDecoration.successBackground#23863680
terminalCursor.background#3fb95033
terminalCursor.foreground#3fb950
terminalOverviewRuler.cursorForeground#238636
terminalOverviewRuler.findMatchForeground#238636
termnal.foreground#8b949e4d
testing.iconErrored#f8514966
testing.iconFailed#f8514966
testing.iconPassed#238636
testing.iconQueued#d29922
testing.iconSkipped#db6d2866
testing.iconUnset#db6d2866
testing.message.error.decorationForeground#f8514966
testing.message.info.decorationForeground#58a6ff80
testing.message.info.lineBackground#58a6ff
testing.peekBorder#21262d
testing.peekHeaderBackground#f8514966
testing.runAction#58a6ff
textBlockQuote.background#238636
textBlockQuote.border#21262d
textCodeBlock.background#010409
textLink.activeForeground#58a6ff
textLink.foreground#58a6ff
textPreformat.foreground#c9d1d9
textSeparator.foreground#c9d1d9
titleBar.activeBackground#010409
titleBar.activeForeground#c9d1d9
titleBar.border#58a6ff80
titleBar.inactiveBackground#010409
titleBar.inactiveForeground#c9d1d9
toolbar.activeBackground#010409
toolbar.hoverBackground#010409
toolbar.hoverOutline#8b949e
tree.indentGuidesStroke#23863680
tree.tableColumnsborder#21262d
tree.tableOddRowsBackground#21262d
walkThrough.embeddedEditorBackground#21262d
welcomePage.background#010409
welcomePage.progress.background#010409
welcomePage.progress.foreground#238636
welcomePage.tileBackground#21262d
welcomePage.tileHoverBackground#010409
welcomePage.tileShadow#8b949e
widget.shadow#21262d
window.activeBorder#c9d1d9
window.inactiveBorder#c9d1d9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#8b949e	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity	#1f6feb	—
entity.name, meta.export.default, meta.definition.variable	#bd561d	—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression	#c9d1d9	—
entity.name.function	#a371f7	—
entity.name.tag, support.class.component	#3fb950	—
keyword	#da3633	—
storage, storage.type	#da3633	—
storage.modifier.package, storage.modifier.import, storage.type.java	#bd561d	—
string, string punctuation.section.embedded source	#58a6ff	—
support	#1f6feb	—
meta.property-name	#1f6feb	—
variable	#bd561d	—
variable.other	#bd561d	—
invalid.broken	#da3633	italic
invalid.deprecated	#da3633	italic
invalid.illegal	#da3633	italic
invalid.unimplemented	#da3633	italic
carriage-return	#f85149	italic underline
message.error	#da3633	—
string variable	#1f6feb	—
source.regexp, string.regexp	#58a6ff	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#58a6ff	—
string.regexp constant.character.escape	#238636	bold
support.constant	#1f6feb	—
support.variable	#1f6feb	—
support.type.property-name.json	#238636	—
meta.module-reference	#1f6feb	—
punctuation.definition.list.end.markdown	#bd561d	—
markup.heading, markup.heading entity.name	#1f6feb	bold
markup.quote	#238636	—
markup.italic	#bd561d	italic
markup.bold	#bd561d	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#1f6feb	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#da3633	—
punctuation.section.embedded	#da3633	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#238636	—
markup.changed, punctuation.definition.changed	#bd561d	—
markup.ignored, markup.untracked	#6e7681	—
meta.diff.range	#a371f7	bold
meta.diff.header	#1f6feb	—
meta.separator	#1f6feb	bold
meta.output	#1f6feb	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#6e7681	—
brackethighlighter.unmatched	#da3633	—
constant.other.reference.link, string.other.link	#58a6ff	underline
constant.language, constant.numeric	#da3633
support.type.property-name	#a371f7
string	#a371f7
string.regexp, constant.character.escape	#c9d1d9	—
string	#c9d1d9	—
keyword	#1f6feb	—
support.type.property-name	#238636
entity.name.function	#58a6ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.definition.parameters.end	#db61a2
entity.name.type	#d29922
meta.embedded	#db61a2	—
support.function	#58a6ff	—
storage.type	#58a6ff	—
storage.modifier	#db61a2	—
variable	#238636	—
variable.other.readwrite.js	#db61a2	—
variable, keyword.control	#a371f7	—
variable.language	#8b949e	—
variable	#1f6feb	—
keyword.operator	#58a6ff
keyword.operator	#c9d1d9	—
support.class	#d29922
keyword	#db61a2
comment	#6e7681
punctuation.separator.key-value.html	#db61a2
punctuation.definition.tag	#db61a2
punctuation.definition.string.begin.json.comments, punctuation.definition.string.end.json.comments, punctuation.definition.string.begin.js, punctuation.definition.string.end.js	#db61a2
punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments	#238636
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js	#a371f7
source.sql.embedded.php	#db61a2
punctuation.definition.string.begin.sql, punctuation.definition.string.end.sql, punctuation.separator.dictionary.key-value.json.comments	#238636
keyword.other.DML.sql, source.sql.embedded.php, string.quoted.single.sql.php, string.quoted.single.php	#db6d28
string.quoted.other.backtick.sql	#db6d28
variable.other.property.js, entity.name.function.member	#db6d28
punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js	#db6d28
string.quoted.double.html, string.quoted.single.js, string.quoted.double.js, string.template.js	#8b949e
text.html.php	#8b949e
variable.other.constant, variable.other.constant.object.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#d29922
punctuation.separator.comma.js, punctuation.separator.dictionary.pair.json.comments	#238636
punctuation.definition.string.begin.php, punctuation.definition.string.end.php	#db61a2
punctuation.accessor.js	#c9d1d9	—
punctuation.accessor.js	#c9d1d9	—
support.type.property-name.json	#a371f7	—
variable.css	#a371f7	—
variable.argument.css	#d29922	—
constant.other.color.rgb-value, support.constant.property-value	#db6d28	—
punctuation.separator.list.comma.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css, meta.function.calc.css, keyword.operator.arithmetic.css, punctuation.definition.entity.css	#238636	—
punctuation.definition.string.begin.css, punctuation.definition.string.end.css	#db61a2	—
string.quoted.single.css	#8b949e	—
constant.numeric.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.ms.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit, keyword.other.unit.s.css	#d29922	—
constant.numeric.css	#db6d28	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.class.css	#58a6ff	—
entity.name.tag.css	#d29922	—
support.type.property-name.css, entity.other.keyframe-offset.css	#58a6ff	—
support.constant.vendored.property-value.css, support.constant.font-name.css, entity.other.attribute-name.class.css	#db61a2	—
entity.other.attribute-name.pseudo-element.css	#58a6ff	—
support.type.property-name.media.css, support.constant.media.css	#a371f7	—
keyword.operator.logical.only.media.css, keyword.operator.logical.and.media.css, string.quoted.double.css	#238636	—
entity.other.attribute-name.id.css	#58a6ff	—
support.function.transform.css	#58a6ff	—
entity.other.keyframe-offset.percentage.css	#db61a2	—
token.info-token	#58a6ff	—
token.warn-token	#d29922	—
token.error-token	#da3633	—
variable.other.global.php	#a371f7	—
token.debug-token	#a371f7	—

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