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+ Dimmed

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#1c2128
activityBar.activeBorder#347d3980
activityBar.activeFocusBorder#347d39
activityBar.background#1c2128
activityBar.border#373e47
activityBar.dropBorder#373e47
activityBar.foreground#347d39cd
activityBar.inactiveForeground#adbac780
activityBarBadge.background#347d39
activityBarBadge.foreground#adbac7
badge.foreground#adbac7
banner.background#347d3980
banner.foreground#adbac7
banner.iconForeground#347d3980
breadcrumb.activeSelectionforeground#adbac7
breadcrumb.background#1c2128
breadcrumb.focusforeground#adbac7
breadcrumb.foreground#adbac780
breadcrumbPicker.background#1c2128
button.background#347d3980
button.border#347d394d
button.foreground#adbac7
button.hoverBackground#347d394d
button.secondaryBackground#347d3980
button.secondaryforeground#adbac7
button.secondaryHoverBackground#347d394d
button.separator#347d394d
charts.blue#4184e466
charts.foreground#adbac7
charts.green#347d39
charts.lines#768390
charts.orange#cc6b2c66
charts.purple#347d39
charts.red#e5534b66
charts.yellow#c69026
checkbox.background#1c2128
checkbox.border#373e47
checkbox.foreground#adbac7
commandCenter.activeBackground#347d3980
commandCenter.activeforeground#adbac7
commandCenter.background#1c2128
commandCenter.border#373e47
commandCenter.foreground#adbac7
contrastActiveborder#373e47
contrastBorder#1c2128
debugConsole.errorForeground#e5534b66
debugConsole.infoForeground#539bf5
debugConsole.sourceForeground#adbac7
debugConsole.warningForeground#cc6b2c
debugConsoleInputIcon.foreground#347d39
debugExceptionWidget.background#1c2128
debugExceptionWidget.border#373e47
debugIcon.breakpointCurrentStackframeForeground#347d39
debugIcon.breakpointDisabledForeground#636e7b
debugIcon.breakpointForeground#ae5622
debugIcon.breakpointStackframeForeground#adbac7
debugIcon.breakpointUnverifiedForeground#c69026
debugIcon.continueForeground#347d39
debugIcon.disconnectForeground#e5534b
debugIcon.pauseForeground#539bf5
debugIcon.restartForeground#539bf580
debugIcon.startForeground#539bf580
debugIcon.stepBackForeground#539bf580
debugIcon.stepIntoForeground#539bf580
debugIcon.stepOutForeground#539bf580
debugIcon.stopForeground#e5534b
debugTokenExpression.boolean#c6902680
debugTokenExpression.error#e5534b80
debugTokenExpression.name#539bf580
debugTokenExpression.number#cc6b2c80
debugTokenExpression.string#76839080
debugTokenExpression.value#c9619880
debugView.exceptionLabelBackground#373e47
debugView.exceptionLabelforeground#adbac7
debugView.stateLabelBackground#373e47
debugView.stateLabelforeground#adbac7
debugView.valueChangedHighlight#347d3980
descriptionForeground#adbac7
diffEditor.border#373e47
diffEditor.diagonalFill#adbac7
diffEditor.insertedLineBackground#347d3980
diffEditor.insertedTextBackground#347d3980
diffEditor.insertedTextBorder#347d3980
diffEditorGutter.insertedLineBackground#347d3980
diffEditorOverview.insertedForeground#347d3980
disabledForeground#768390
dropdown.background#1c2128
dropdown.border#373e47
dropdown.foreground#347d3980
dropdown.listBackground#373e47
editor.background#1c2128
editor.findMatchBackground#347d3933
editor.findMatchBorder#347d3966
editor.findMatchHighlightBackground#96660033
editor.findMatchHighlightBorder#96660033
editor.findRangeHighlightBackground#347d39b3
editor.findRangeHighlightBorder#347d39b3
editor.focusedStackFrameHighlightBackground#347d3980
editor.foldBackground#373e47
editor.foreground#adbac7
editor.hoverHighlightBackground#347d3966
editor.inactiveSelectionBackground#373e47
editor.inlineValuesBackground#347d3980
editor.inlineValuesforeground#adbac7
editor.lineHighlightBackground#347d3933
editor.lineHighlightBorder#347d3933
editor.linkedEditingBackground#c6902633
editor.rangeHighlightBackground#347d394d
editor.rangeHighlightBorder#347d3980
editor.selectionBackground#373e47
editor.selectionHighlightBackground#347d394d
editor.selectionHighlightborder#373e47
editor.snippetFinalTabstopHighlightBackground#1c2128
editor.snippetFinalTabstopHighlightborder#373e47
editor.snippetTabstopHighlightBackground#373e47
editor.snippetTabstopHighlightborder#373e47
editor.stackFrameHighlightbackground#adbac7
editor.symbolHighlightBackground#8256d080
editor.symbolHighlightBorder#8256d066
editor.wordHighlightBackground#347d3980
editor.wordHighlightBorder#373e47
editor.wordHighlightStrongBackground#347d3933
editor.wordHighlightStrongBorder#373e47
editorBracketHighlight.foreground1#c96198
editorBracketHighlight.foreground2#347d39
editorBracketHighlight.foreground3#986ee2
editorBracketHighlight.foreground4#e5534b
editorBracketHighlight.foreground5#c69026
editorBracketHighlight.foreground6#cc6b2c
editorBracketHighlight.unexpectedBracket.foreground#c9619866
editorBracketMatch.background#1c2128
editorBracketMatch.border#373e47
editorBracketPairGuide.activeBackground1#c96198b3
editorBracketPairGuide.activeBackground2#347d3980
editorBracketPairGuide.activeBackground3#986ee2b3
editorBracketPairGuide.activeBackground4#e5534bb3
editorBracketPairGuide.activeBackground5#c69026b3
editorBracketPairGuide.activeBackground6#cc6b2cb3
editorBracketPairGuide.background1#c96198b3
editorBracketPairGuide.background2#347d3980
editorBracketPairGuide.background3#986ee2b3
editorBracketPairGuide.background4#e5534bb3
editorBracketPairGuide.background5#c69026b3
editorBracketPairGuide.background6#cc6b2cb3
editorCodeLens.foreground#adbac7
editorCommentsWidget.rangeActiveBackground#373e47
editorCommentsWidget.rangeActiveborder#373e47
editorCommentsWidget.rangeBackground#347d39
editorCommentsWidget.rangeborder#373e47
editorCommentsWidget.resolvedBorder#373e47
editorCommentsWidget.unresolvedBorder#373e47
editorCursor.background#1c2128
editorCursor.foreground#57ab5a
editorError.border#e5534b66
editorGhostText.background#347d39b3
editorGhostText.border#347d3980
editorGhostText.foreground#539bf5
editorGroup.border#373e47
editorGroup.dropBackground#347d394d
editorGroup.dropIntoPromptBackground#1c2128
editorGroup.dropIntoPromptborder#373e47
editorGroup.dropIntoPromptforeground#adbac7
editorGroup.emptyBackground#1c2128
editorGroup.focusedEmptyBorder#373e47
editorGroupHeader.border#373e47
editorGroupHeader.noTabsBackground#1c2128
editorGroupHeader.tabsBackground#1c2128
editorGutter.addedBackground#539bf580
editorGutter.background#1c2128
editorGutter.commentRangeforeground#adbac7
editorGutter.deletedBackground#e5534b80
editorGutter.foldingControlforeground#adbac7
editorGutter.modifiedBackground#57ab5a
editorHint.border#347d3980
editorHint.foreground#539bf580
editorHoverWidget.background#1c2128
editorHoverWidget.border#373e47
editorHoverWidget.foreground#adbac780
editorHoverWidget.highlightForeground#347d39
editorIndentGuide.background#adbac700
editorInfo.background#1c2128
editorInfo.border#539bf54d
editorInfo.foreground#539bf5
editorInlayHint.background#1c2128
editorInlayHint.foreground#adbac766
editorInlayHint.parameterBackground#373e4780
editorInlayHint.parameterForeground#539bf580
editorInlayHint.typeBackground#373e4780
editorInlayHint.typeForeground#539bf580
editorLightBulb.foreground#c69026
editorLightBulbAutoFix.foreground#347d3980
editorLineNumber.activeForeground#347d39
editorLineNumber.foreground#adbac780
editorLink.activeForeground#539bf5
editorMarkerNavigation.background#1c2128
editorMarkerNavigationError.headerBackground#e5534b66
editorMarkerNavigationInfo.background#539bf5
editorMarkerNavigationInfo.headerBackground#1c2128
editorOverviewRuler.addedForeground#539bf5
editorOverviewRuler.background#1c2128
editorOverviewRuler.border#347d3980
editorOverviewRuler.commonContentforeground#adbac7
editorOverviewRuler.currentContentForeground#347d3980
editorOverviewRuler.deletedForeground#c6902680
editorOverviewRuler.findMatchForeground#347d3980
editorOverviewRuler.incomingContentforeground#adbac7
editorOverviewRuler.infoForeground#539bf580
editorOverviewRuler.modifiedForeground#347d3980
editorOverviewRuler.rangeHighlightForeground#347d3933
editorOverviewRuler.selectionHighlightForeground#347d3980
editorOverviewRuler.wordHighlightForeground#347d3980
editorOverviewRuler.wordHighlightStrongForeground#347d3980
editorPane.background#373e47
editorRuler.foreground#347d3980
editorStickyScroll.background#1c2128
editorStickyScrollHover.background#347d394d
editorSuggestWidget.background#1c2128
editorSuggestWidget.border#373e47
editorSuggestWidget.focusHighlightforeground#adbac7
editorSuggestWidget.foreground#adbac7
editorSuggestWidget.highlightforeground#adbac7
editorSuggestWidget.selectedBackground#373e47
editorSuggestWidget.selectedforeground#adbac7
editorSuggestWidget.selectedIconforeground#adbac7
editorSuggestWidgetStatus.foreground#539bf5
editorUnicodeHighlight.background#347d3980
editorUnicodeHighlight.border#347d3980
editorUnnecessaryCode.border#373e47
editorWarning.foreground#e5534b66
editorWhitespace.foreground#c9619866
editorWidget.background#1c2128
editorWidget.border#373e47
editorWidget.foreground#adbac7
editorWidget.resizeBorder#347d3980
errorForeground#e5534b66
extensionBadge.remoteBackground#347d3980
extensionButton.prominentBackground#347d3980
extensionButton.prominentforeground#adbac7
extensionButton.prominentHoverBackground#347d3999
extensionIcon.preReleaseForeground#cc6b2c66
extensionIcon.sponsorForeground#986ee266
extensionIcon.starForeground#c69026
extensionIcon.verifiedForeground#539bf5
focusBorder#1c212880
foreground#adbac780
gitDecoration.addedResourceForeground#347d3980
gitDecoration.conflictingResourceForeground#ae5622
gitDecoration.deletedResourceForeground#e5534b66
gitDecoration.modifiedResourceForeground#539bf5
gitDecoration.renamedResourceforeground#adbac7
gitDecoration.stageDeletedResourceForeground#539bf580
gitDecoration.stageModifiedResourceForeground#347d39
gitDecoration.submoduleResourceForeground#768390
gitDecoration.untrackedResourceforeground#adbac7
icon.foreground#adbac780
input.background#347d394d
input.border#347d3966
input.foreground#adbac7
input.placeholderForeground#adbac7
inputOption.activeBackground#373e47
inputOption.activeBorder#373e47
inputOption.activeForeground#adbac7
inputOption.hoverBackground#adbac74d
inputValidation.infoBorder#539bf580
inputValidation.infoForeground#539bf580
inputValidation.warningBackground#539bf580
inputValidation.warningBorder#e5534b80
inputValidation.warningForeground#e5534b80
interactive.activeCodeBorder#c69026b3
interactive.inactiveCodeBorder#347d394d
issues.closed#e5534b80
issues.newIssueDecoration#adbac7
issues.open#347d39
keybindingLabel.background#1c2128
keybindingLabel.border#347d3980
keybindingLabel.bottomBorder#373e47
keybindingLabel.foreground#adbac7
keybindingTable.headerBackground#347d3933
keybindingTable.rowsBackground#373e474d
list.activeSelectionBackground#373e47
list.activeSelectionforeground#adbac7
list.activeSelectionIconForeground#347d39
list.deemphasizedForeground#c69026
list.dropBackground#347d3980
list.errorForeground#e5534b66
list.filterMatchBackground#347d3966
list.filterMatchBorder#347d3999
list.focusAndSelectionOutline#347d3980
list.focusBackground#347d3980
list.focusforeground#adbac780
list.focusHighlightForeground#347d3980
list.focusOutline#347d3980
list.highlightforeground#adbac7
list.hoverBackground#347d394d
list.hoverforeground#adbac7
list.inactiveFocusBackground#636e7b80
list.inactiveFocusOutline#347d39e6
list.inactiveSelectionBackground#347d394d
list.inactiveSelectionforeground#adbac7
list.inactiveSelectionIconForeground#347d39
list.warningForeground#cc6b2c66
listFilterWidget.background#539bf580
listFilterWidget.noMatchesOutline#636e7b80
listFilterWidget.outline#539bf566
listFilterWidget.shadow#373e47
menu.background#1c2128
menu.border#373e47
menu.foreground#adbac7
menu.selectionBackground#347d3980
menu.selectionBorder#347d3980
menu.selectionforeground#adbac7
menu.separatorBackground#373e47
menubar.selectionBackground#347d3980
menubar.selectionBorder#347d39
menubar.selectionForeground#adbac7
merge.border#373e47
merge.commonContentBackground#347d3980
merge.commonHeaderBackground#347d3980
merge.incomingContentBackground#347d3980
merge.incomingHeaderBackground#347d3980
mergeEditor.change.background#1c2128
mergeEditor.change.word.background#1c2128
mergeEditor.conflict.handled.minimapOverViewRuler#347d3980
mergeEditor.conflict.handledFocused.border#373e47
mergeEditor.conflict.handledUnfocused.border#347d3980
mergeEditor.conflict.unhandled.minimapOverViewRuler#539bf5
mergeEditor.conflict.unhandledFocused.border#c6902680
mergeEditor.conflict.unhandledUnfocused.border#373e47
minimap.background#373e474d
minimap.errorHighlight#e5534b66
minimap.findMatchHighlight#347d3980
minimap.foregroundOpacity#adbac7
minimap.selectionHighlight#347d3980
minimap.selectionOccurrenceHighlight#347d39cd
minimap.warningHighlight#e5534b66
minimapGutter.addedBackground#539bf5b3
minimapGutter.deletedBackground#e5534b66
minimapGutter.modifiedBackground#539bf5
minimapSlider.activeBackground#adbac7
minimapSlider.background#347d394d
minimapSlider.hoverBackground#347d3980
notebook.cellBorderColor#373e47
notebook.cellEditorBackground#1c2128
notebook.cellHoverBackground#768390
notebook.cellInsertionIndicator#347d39
notebook.cellToolbarSeparator#373e47
notebook.editorBackground#1c2128
notebook.focusedCellBorder#347d3980
notebook.focusedEditorborder#373e47
notebook.inactiveFocusedCellBorder#347d3980
notebook.inactiveSelectedCellBorder#373e47
notebook.outputContainerBackgroundColor#1c2128
notebook.outputContainerBorderColor#373e47
notebook.selectedCellBackground#347d394d
notebook.selectedCellBorder#347d394d
notebook.symbolHighlightBackground#347d394d
notebookScrollbarSlider.activeBackground#adbac7
notebookScrollbarSlider.background#347d3980
notebookScrollbarSlider.hoverBackground#373e47
notebookStatusErrorIcon.foreground#e5534b66
notebookStatusRunningIcon.foreground#539bf5
notebookStatusSuccessIcon.foreground#347d39
notificationCenter.border#373e47
notificationCenterHeader.background#1c2128
notificationCenterHeader.foreground#adbac7
notificationLink.foreground#539bf5
notifications.background#1c2128
notifications.border#373e47
notifications.foreground#adbac7
notificationsInfoIcon.foreground#539bf5
notificationsWarningIcon.foreground#539bf5
notificationToast.border#373e47
panel.background#1c2128
panel.border#373e47
panel.dropBorder#373e47
panelInput.border#539bf5
panelSection.border#e5534b66
panelSection.dropBackground#1c2128
panelSectionHeader.background#1c2128
panelSectionHeader.border#373e47
panelSectionHeader.foreground#adbac7
panelTitle.activeBorder#347d3980
panelTitle.activeforeground#adbac7
panelTitle.inactiveforeground#adbac7
peekView.border#c69026b3
peekViewEditor.background#1c2128
peekViewEditor.matchHighlightBackground#347d3966
peekViewEditor.matchHighlightBorder#347d3966
peekViewEditorGutter.background#1c2128
peekViewResult.background#1c2128
peekViewResult.fileforeground#adbac7
peekViewResult.lineforeground#adbac7
peekViewResult.matchHighlightBackground#347d3966
peekViewResult.selectionBackground#347d3966
peekViewResult.selectionForeground#347d39
peekViewTitle.background#347d3980
peekViewTitleDescription.foreground#e5534b66
peekViewTitleLabel.foreground#347d3980
pickerGroup.border#347d3980
pickerGroup.foreground#adbac7
ports.iconRunningProcessForeground#e5534b66
problemsErrorIcon.foreground#347d3966
problemsInfoIcon.foreground#539bf580
progressBar.background#347d39
pullRequests.notification#539bf580
quickInput.background#1c2128
quickInput.foreground#adbac7
quickInputList.focusBackground#347d3980
quickInputList.focusforeground#adbac7
quickInputList.focusIconForeground#347d3980
quickInputTitle.background#adbac7
sash.hoverBorder#347d3980
scm.providerborder#373e47
scrollbar.shadow#373e47
scrollbarSlider.activeBackground#373e47
scrollbarSlider.background#347d3980
scrollbarSlider.hoverbackground#adbac7
searchEditor.findMatchBackground#373e47
searchEditor.findMatchBorder#347d39
searchEditor.textInputborder#373e47
selection.background#347d3980
settings.checkboxBackground#373e47
settings.checkboxBorder#373e47
settings.checkboxForeground#adbac780
settings.dropdownBackground#373e47
settings.dropdownBorder#373e47
settings.dropdownForeground#adbac780
settings.dropdownListBorder#373e47
settings.focusedRowBackground#347d3933
settings.focusedRowBorder#347d394d
settings.headerBorder#373e47
settings.headerForeground#347d3980
settings.modifiedItemIndicator#e5534b66
settings.numberInputBackground#1c2128
settings.numberInputBorder#373e47
settings.numberInputForeground#adbac7
settings.rowHoverBackground#373e47
settings.sashBorder#373e47
settings.textInputBackground#1c2128
settings.textInputBorder#373e47
settings.textInputForeground#adbac780
sideBar.background#1c2128
sideBar.border#373e47
sideBar.dropBackground#373e47
sideBar.foreground#adbac780
sideBarSectionHeader.background#1c2128
sideBarSectionHeader.border#373e47
sideBarSectionHeader.foreground#adbac7b3
sideBarTitle.foreground#adbac780
sideBySideEditor.horizontalBorder#347d39
sideBySideEditor.verticalBorder#347d39
statusBar.background#1c2128
statusBar.border#373e47
statusBar.debuggingBorder#986ee266
statusBar.debuggingforeground#adbac7
statusBar.focusborder#373e47
statusBar.foreground#adbac7
statusBar.noFolderforeground#adbac7
statusBarItem.activeBackground#1c2128
statusBarItem.compactHoverBackground#1c2128
statusBarItem.focusborder#373e47
statusBarItem.hoverBackground#347d3980
statusBarItem.prominentBackground#1c2128
statusBarItem.prominentForeground#347d39
statusBarItem.prominentHoverBackground#373e474d
statusBarItem.remoteBackground#347d3980
statusBarItem.remoteforeground#adbac7
statusBarItem.settingsProfilesBackground#1c2128
statusBarItem.settingsProfilesforeground#adbac7
statusBarItem.warningBackground#539bf580
statusBarItem.warningForeground#539bf580
symbolIcon.arrayForeground#539bf5
symbolIcon.booleanForeground#986ee266
symbolIcon.classForeground#347d39
symbolIcon.colorForeground#347d39
symbolIcon.constantForeground#c69026
symbolIcon.constructorForeground#986ee2
symbolIcon.enumeratorForeground#57ab5a
symbolIcon.enumeratorMemberForeground#347d39
symbolIcon.eventForeground#c96198
symbolIcon.fieldForeground#e5534b66
symbolIcon.fileForeground#539bf5
symbolIcon.folderForeground#347d3980
symbolIcon.functionForeground#986ee2
symbolIcon.interfaceForeground#e5534b
symbolIcon.keyForeground#57ab5a
symbolIcon.keywordForeground#c69026
symbolIcon.methodForeground#c96198
symbolIcon.moduleForeground#57ab5a
symbolIcon.namespaceForeground#966600
symbolIcon.nullForeground#636e7b
symbolIcon.numberForeground#ae5622
symbolIcon.objectForeground#347d39
symbolIcon.operatorForeground#8256d0
symbolIcon.packageForeground#966600
symbolIcon.propertyforeground#adbac7
symbolIcon.referenceForeground#768390
symbolIcon.snippetForeground#e5534b66
symbolIcon.stringForeground#636e7b66
symbolIcon.structForeground#4184e466
symbolIcon.textForeground#46954a66
symbolIcon.typeParameterForeground#c93c37
symbolIcon.unitForeground#986ee266
symbolIcon.variableForeground#c9619866
tab.activeBackground#347d3933
tab.activeBorder#347d3980
tab.activeBorderTop#347d39
tab.activeForeground#347d3980
tab.activeModifiedBorder#347d3980
tab.border#347d3980
tab.hoverBackground#1c2128
tab.hoverBorder#96660080
tab.hoverforeground#adbac7cd
tab.inactiveBackground#1c212880
tab.inactiveForeground#76839080
tab.inactiveModifiedBorder#347d3980
tab.lastPinnedborder#373e47
tab.unfocusedActiveBackground#347d3933
tab.unfocusedActiveBorder#347d3980
tab.unfocusedActiveBorderTop#347d39
tab.unfocusedActiveForeground#347d3980
tab.unfocusedActiveModifiedBorder#e5534b66
tab.unfocusedHoverBackground#373e47
tab.unfocusedHoverBorder#347d3980
tab.unfocusedHoverforeground#adbac7cd
tab.unfocusedInactiveBackground#1c2128
tab.unfocusedInactiveForeground#76839080
tab.unfocusedInactiveModifiedBorder#e5534b66
terminal.ansiBlack#545d68e6
terminal.ansiBlue#539bf5
terminal.ansiBrightBlack#636e7b
terminal.ansiBrightBlue#6cb6ff
terminal.ansiBrightCyan#56d4dd
terminal.ansiBrightGreen#6bc46d
terminal.ansiBrightMagenta#dcbdfb
terminal.ansiBrightRed#ff938a
terminal.ansiBrightWhite#cdd9e5
terminal.ansiBrightYellow#daaa3f
terminal.ansiCyan#39c5cf
terminal.ansiGreen#57ab5a
terminal.ansiMagenta#b083f0
terminal.ansiRed#f47067
terminal.ansiWhite#909dab
terminal.ansiYellow#c69026
terminal.background#1c2128
terminal.border#373e47
terminal.dropBackground#347d394d
terminal.findMatchBackground#347d394d
terminal.findMatchBorder#347d394d
terminal.findMatchHighlightBackground#539bf533
terminal.findMatchHighlightBorder#c6902633
terminal.inactiveSelectionBackground#c690264d
terminal.selectionBackground#347d3980
terminal.selectionForeground#adbac7
terminal.tab.activeBorder#347d39
terminalCommandDecoration.defaultBackground#373e47
terminalCommandDecoration.successBackground#347d3980
terminalCursor.background#57ab5a33
terminalCursor.foreground#57ab5a
terminalOverviewRuler.cursorForeground#347d39
terminalOverviewRuler.findMatchForeground#347d39
termnal.foreground#7683904d
testing.iconErrored#e5534b66
testing.iconFailed#e5534b66
testing.iconPassed#347d39
testing.iconQueued#c69026
testing.iconSkipped#cc6b2c66
testing.iconUnset#cc6b2c66
testing.message.error.decorationForeground#e5534b66
testing.message.info.decorationForeground#539bf580
testing.message.info.lineBackground#539bf5
testing.peekBorder#373e47
testing.peekHeaderBackground#e5534b66
testing.runAction#539bf5
textBlockQuote.background#347d39
textBlockQuote.border#373e47
textCodeBlock.background#1c2128
textLink.activeForeground#539bf5
textLink.foreground#539bf5
textPreformat.foreground#adbac7
textSeparator.foreground#adbac7
titleBar.activeBackground#1c2128
titleBar.activeForeground#adbac7
titleBar.border#539bf580
titleBar.inactiveBackground#1c2128
titleBar.inactiveForeground#adbac7
toolbar.activeBackground#1c2128
toolbar.hoverBackground#1c2128
toolbar.hoverOutline#768390
tree.indentGuidesStroke#347d3980
tree.tableColumnsborder#373e47
tree.tableOddRowsBackground#373e47
walkThrough.embeddedEditorBackground#373e47
welcomePage.background#1c2128
welcomePage.progress.background#1c2128
welcomePage.progress.foreground#347d39
welcomePage.tileBackground#373e47
welcomePage.tileHoverBackground#1c2128
welcomePage.tileShadow#768390
widget.shadow#373e47
window.activeBorder#adbac7
window.inactiveBorder#adbac7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#768390	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity	#316dca	—
entity.name, meta.export.default, meta.definition.variable	#ae5622	—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression	#adbac7	—
entity.name.function	#986ee2	—
entity.name.tag, support.class.component	#57ab5a	—
keyword	#c93c37	—
storage, storage.type	#c93c37	—
storage.modifier.package, storage.modifier.import, storage.type.java	#ae5622	—
string, string punctuation.section.embedded source	#539bf5	—
support	#316dca	—
meta.property-name	#316dca	—
variable	#ae5622	—
variable.other	#ae5622	—
invalid.broken	#c93c37	italic
invalid.deprecated	#c93c37	italic
invalid.illegal	#c93c37	italic
invalid.unimplemented	#c93c37	italic
carriage-return	#e5534b	italic underline
message.error	#c93c37	—
string variable	#316dca	—
source.regexp, string.regexp	#539bf5	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#539bf5	—
string.regexp constant.character.escape	#347d39	bold
support.constant	#316dca	—
support.variable	#316dca	—
support.type.property-name.json	#347d39	—
meta.module-reference	#316dca	—
punctuation.definition.list.end.markdown	#ae5622	—
markup.heading, markup.heading entity.name	#316dca	bold
markup.quote	#347d39	—
markup.italic	#ae5622	italic
markup.bold	#ae5622	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#316dca	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#c93c37	—
punctuation.section.embedded	#c93c37	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#347d39	—
markup.changed, punctuation.definition.changed	#ae5622	—
markup.ignored, markup.untracked	#636e7b	—
meta.diff.range	#986ee2	bold
meta.diff.header	#316dca	—
meta.separator	#316dca	bold
meta.output	#316dca	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#636e7b	—
brackethighlighter.unmatched	#c93c37	—
constant.other.reference.link, string.other.link	#539bf5	underline
constant.language, constant.numeric	#c93c37
support.type.property-name	#986ee2
string	#986ee2
string.regexp, constant.character.escape	#adbac7	—
string	#adbac7	—
keyword	#316dca	—
support.type.property-name	#347d39
entity.name.function	#539bf5
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.definition.parameters.end	#c96198
entity.name.type	#c69026
meta.embedded	#c96198	—
support.function	#539bf5	—
storage.type	#539bf5	—
storage.modifier	#c96198	—
variable	#347d39	—
variable.other.readwrite.js	#c96198	—
variable, keyword.control	#986ee2	—
variable.language	#768390	—
variable	#316dca	—
keyword.operator	#539bf5
keyword.operator	#adbac7	—
support.class	#c69026
keyword	#c96198
comment	#636e7b
punctuation.separator.key-value.html	#c96198
punctuation.definition.tag	#c96198
punctuation.definition.string.begin.json.comments, punctuation.definition.string.end.json.comments, punctuation.definition.string.begin.js, punctuation.definition.string.end.js	#c96198
punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments	#347d39
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js	#986ee2
source.sql.embedded.php	#c96198
punctuation.definition.string.begin.sql, punctuation.definition.string.end.sql, punctuation.separator.dictionary.key-value.json.comments	#347d39
keyword.other.DML.sql, source.sql.embedded.php, string.quoted.single.sql.php, string.quoted.single.php	#cc6b2c
string.quoted.other.backtick.sql	#cc6b2c
variable.other.property.js, entity.name.function.member	#cc6b2c
punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js	#cc6b2c
string.quoted.double.html, string.quoted.single.js, string.quoted.double.js, string.template.js	#768390
text.html.php	#768390
variable.other.constant, variable.other.constant.object.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#c69026
punctuation.separator.comma.js, punctuation.separator.dictionary.pair.json.comments	#347d39
punctuation.definition.string.begin.php, punctuation.definition.string.end.php	#c96198
punctuation.accessor.js	#adbac7	—
punctuation.accessor.js	#adbac7	—
support.type.property-name.json	#986ee2	—
variable.css	#986ee2	—
variable.argument.css	#c69026	—
constant.other.color.rgb-value, support.constant.property-value	#cc6b2c	—
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	#347d39	—
punctuation.definition.string.begin.css, punctuation.definition.string.end.css	#c96198	—
string.quoted.single.css	#768390	—
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	#c69026	—
constant.numeric.css	#cc6b2c	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.class.css	#539bf5	—
entity.name.tag.css	#c69026	—
support.type.property-name.css, entity.other.keyframe-offset.css	#539bf5	—
support.constant.vendored.property-value.css, support.constant.font-name.css, entity.other.attribute-name.class.css	#c96198	—
entity.other.attribute-name.pseudo-element.css	#539bf5	—
support.type.property-name.media.css, support.constant.media.css	#986ee2	—
keyword.operator.logical.only.media.css, keyword.operator.logical.and.media.css, string.quoted.double.css	#347d39	—
entity.other.attribute-name.id.css	#539bf5	—
support.function.transform.css	#539bf5	—
entity.other.keyframe-offset.percentage.css	#c96198	—
token.info-token	#539bf5	—
token.warn-token	#c69026	—
token.error-token	#c93c37	—
variable.other.global.php	#986ee2	—
token.debug-token	#986ee2	—

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