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 High Contrast

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...

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#09b43a80
activityBar.activeFocusBorder#09b43a
activityBar.background#010409
activityBar.border#7a828e
activityBar.dropBorder#7a828e
activityBar.foreground#09b43acd
activityBar.inactiveForeground#f0f3f680
activityBarBadge.background#09b43a
activityBarBadge.foreground#f0f3f6
badge.background#409effb3
badge.foreground#f0f3f6
banner.background#09b43a80
banner.foreground#f0f3f6
banner.iconForeground#09b43a80
breadcrumb.activeSelectionforeground#f0f3f6
breadcrumb.background#010409
breadcrumb.focusforeground#f0f3f6
breadcrumb.foreground#f0f3f680
breadcrumbPicker.background#010409
button.background#09b43a80
button.border#09b43a4d
button.foreground#f0f3f6
button.hoverBackground#09b43a4d
button.secondaryBackground#09b43a80
button.secondaryforeground#f0f3f6
button.secondaryHoverBackground#09b43a4d
button.separator#09b43a4d
charts.blue#409eff
charts.foreground#f0f3f6
charts.green#09b43a
charts.lines#f0f3f6
charts.orange#e7811d
charts.purple#09b43a
charts.red#ff6a69
charts.yellow#f0b72f
checkbox.background#010409
checkbox.border#7a828e
checkbox.foreground#f0f3f6
commandCenter.activeBackground#09b43a80
commandCenter.activeforeground#f0f3f6
commandCenter.background#010409
commandCenter.border#7a828e
commandCenter.foreground#f0f3f6
contrastActiveborder#7a828e
contrastBorder#010409
debugConsole.errorForeground#ff6a69
debugConsole.infoForeground#71b7ff
debugConsole.sourceForeground#f0f3f6
debugConsole.warningForeground#e7811d
debugConsoleInputIcon.foreground#09b43a
debugExceptionWidget.background#010409
debugExceptionWidget.border#7a828e
debugIcon.breakpointCurrentStackframeForeground#09b43a
debugIcon.breakpointDisabledForeground#9ea7b3
debugIcon.breakpointForeground#e7811d
debugIcon.breakpointStackframeForeground#f0f3f6
debugIcon.breakpointUnverifiedForeground#f0b72f
debugIcon.continueForeground#09b43a
debugIcon.disconnectForeground#ff6a69
debugIcon.pauseForeground#71b7ff
debugIcon.restartForeground#71b7ff80
debugIcon.startForeground#71b7ff80
debugIcon.stepBackForeground#71b7ff80
debugIcon.stepIntoForeground#71b7ff80
debugIcon.stepOutForeground#71b7ff80
debugIcon.stopForeground#ff6a69
debugTokenExpression.boolean#f0b72f80
debugTokenExpression.error#ff6a6980
debugTokenExpression.name#71b7ff80
debugTokenExpression.number#e7811d80
debugTokenExpression.string#f0f3f680
debugTokenExpression.value#ef6eb180
debugToolBar.background#ff6a6980
debugToolBar.border#ff6a6980
debugView.exceptionLabelBackground#7a828e
debugView.exceptionLabelforeground#f0f3f6
debugView.stateLabelBackground#7a828e
debugView.stateLabelforeground#f0f3f6
debugView.valueChangedHighlight#09b43a80
descriptionForeground#f0f3f6
diffEditor.border#7a828e
diffEditor.diagonalFill#f0f3f6
diffEditor.insertedLineBackground#09b43a80
diffEditor.insertedTextBackground#09b43a80
diffEditor.insertedTextBorder#09b43a80
diffEditor.removedLineBackground#ff6a69e6
diffEditor.removedTextBackground#ff6a69b3
diffEditor.removedTextBorder#ff6a69b3
diffEditorGutter.insertedLineBackground#09b43a80
diffEditorGutter.removedLineBackground#ff6a69e6
diffEditorOverview.insertedForeground#09b43a80
diffEditorOverview.removedForeground#ff6a69e6
disabledForeground#f0f3f6
dropdown.background#010409
dropdown.border#7a828e
dropdown.foreground#09b43a80
dropdown.listBackground#7a828e
editor.background#010409
editor.findMatchBackground#09b43a33
editor.findMatchBorder#09b43a66
editor.findMatchHighlightBackground#e09b1333
editor.findMatchHighlightBorder#e09b1333
editor.findRangeHighlightBackground#09b43ab3
editor.findRangeHighlightBorder#09b43ab3
editor.focusedStackFrameHighlightBackground#09b43a80
editor.foldBackground#7a828e
editor.foreground#f0f3f6
editor.hoverHighlightBackground#09b43a66
editor.inactiveSelectionBackground#7a828e
editor.inlineValuesBackground#09b43a80
editor.inlineValuesforeground#f0f3f6
editor.lineHighlightBackground#09b43a33
editor.lineHighlightBorder#09b43a33
editor.linkedEditingBackground#f0b72f33
editor.rangeHighlightBackground#09b43a4d
editor.rangeHighlightBorder#09b43a80
editor.selectionBackground#7a828e
editor.selectionHighlightBackground#09b43a4d
editor.selectionHighlightborder#7a828e
editor.snippetFinalTabstopHighlightBackground#010409
editor.snippetFinalTabstopHighlightborder#7a828e
editor.snippetTabstopHighlightBackground#7a828e
editor.snippetTabstopHighlightborder#7a828e
editor.stackFrameHighlightbackground#f0f3f6
editor.symbolHighlightBackground#b87fff80
editor.symbolHighlightBorder#b87fff66
editor.wordHighlightBackground#09b43a80
editor.wordHighlightBorder#7a828e
editor.wordHighlightStrongBackground#09b43a33
editor.wordHighlightStrongBorder#7a828e
editorBracketHighlight.foreground1#ef6eb1
editorBracketHighlight.foreground2#09b43a
editorBracketHighlight.foreground3#b780ff
editorBracketHighlight.foreground4#ff6a69
editorBracketHighlight.foreground5#f0b72f
editorBracketHighlight.foreground6#e7811d
editorBracketHighlight.unexpectedBracket.foreground#ef6eb1
editorBracketMatch.background#010409
editorBracketMatch.border#7a828e
editorBracketPairGuide.activeBackground1#ef6eb1b3
editorBracketPairGuide.activeBackground2#09b43a80
editorBracketPairGuide.activeBackground3#b780ffb3
editorBracketPairGuide.activeBackground4#ff6a69b3
editorBracketPairGuide.activeBackground5#f0b72fb3
editorBracketPairGuide.activeBackground6#e7811db3
editorBracketPairGuide.background1#ef6eb1b3
editorBracketPairGuide.background2#09b43a80
editorBracketPairGuide.background3#b780ffb3
editorBracketPairGuide.background4#ff6a69b3
editorBracketPairGuide.background5#f0b72fb3
editorBracketPairGuide.background6#e7811db3
editorCodeLens.foreground#f0f3f6
editorCommentsWidget.rangeActiveBackground#7a828e
editorCommentsWidget.rangeActiveborder#7a828e
editorCommentsWidget.rangeBackground#09b43a
editorCommentsWidget.rangeborder#7a828e
editorCommentsWidget.resolvedBorder#7a828e
editorCommentsWidget.unresolvedBorder#7a828e
editorCursor.background#010409
editorCursor.foreground#26cd4d
editorError.background#ff6a69b3
editorError.border#ff6a69
editorError.foreground#ff6a69b3
editorGhostText.background#09b43ab3
editorGhostText.border#09b43a80
editorGhostText.foreground#71b7ff
editorGroup.border#7a828e
editorGroup.dropBackground#09b43a4d
editorGroup.dropIntoPromptBackground#010409
editorGroup.dropIntoPromptborder#7a828e
editorGroup.dropIntoPromptforeground#f0f3f6
editorGroup.emptyBackground#010409
editorGroup.focusedEmptyBorder#7a828e
editorGroupHeader.border#7a828e
editorGroupHeader.noTabsBackground#010409
editorGroupHeader.tabsBackground#010409
editorGutter.addedBackground#71b7ff80
editorGutter.background#010409
editorGutter.commentRangeforeground#f0f3f6
editorGutter.deletedBackground#ff6a6980
editorGutter.foldingControlforeground#f0f3f6
editorGutter.modifiedBackground#26cd4d
editorHint.border#09b43a80
editorHint.foreground#71b7ff80
editorHoverWidget.background#010409
editorHoverWidget.border#7a828e
editorHoverWidget.foreground#f0f3f680
editorHoverWidget.highlightForeground#09b43a
editorHoverWidget.statusBarBackground#ff6a69e6
editorIndentGuide.activeBackground#ff6a69e6
editorIndentGuide.background#f0f3f600
editorInfo.background#010409
editorInfo.border#71b7ff4d
editorInfo.foreground#71b7ff
editorInlayHint.background#010409
editorInlayHint.foreground#f0f3f666
editorInlayHint.parameterBackground#7a828e80
editorInlayHint.parameterForeground#71b7ff80
editorInlayHint.typeBackground#7a828e80
editorInlayHint.typeForeground#71b7ff80
editorLightBulb.foreground#f0b72f
editorLightBulbAutoFix.foreground#09b43a80
editorLineNumber.activeForeground#09b43a
editorLineNumber.foreground#f0f3f680
editorLink.activeForeground#71b7ff
editorMarkerNavigation.background#010409
editorMarkerNavigationError.background#ff6a6980
editorMarkerNavigationError.headerBackground#ff6a69
editorMarkerNavigationInfo.background#71b7ff
editorMarkerNavigationInfo.headerBackground#010409
editorMarkerNavigationWarning.background#e7811d80
editorMarkerNavigationWarning.headerBackground#e7811d80
editorOverviewRuler.addedForeground#71b7ff
editorOverviewRuler.background#010409
editorOverviewRuler.border#09b43a80
editorOverviewRuler.bracketMatchForeground#b780ff80
editorOverviewRuler.commonContentforeground#f0f3f6
editorOverviewRuler.currentContentForeground#09b43a80
editorOverviewRuler.deletedForeground#f0b72f80
editorOverviewRuler.errorForeground#ff6a6980
editorOverviewRuler.findMatchForeground#09b43a80
editorOverviewRuler.incomingContentforeground#f0f3f6
editorOverviewRuler.infoForeground#71b7ff80
editorOverviewRuler.modifiedForeground#09b43a80
editorOverviewRuler.rangeHighlightForeground#09b43a33
editorOverviewRuler.selectionHighlightForeground#09b43a80
editorOverviewRuler.warningForeground#e7811d80
editorOverviewRuler.wordHighlightForeground#09b43a80
editorOverviewRuler.wordHighlightStrongForeground#09b43a80
editorPane.background#7a828e
editorRuler.foreground#09b43a80
editorStickyScroll.background#010409
editorStickyScrollHover.background#09b43a4d
editorSuggestWidget.background#010409
editorSuggestWidget.border#7a828e
editorSuggestWidget.focusHighlightforeground#f0f3f6
editorSuggestWidget.foreground#f0f3f6
editorSuggestWidget.highlightforeground#f0f3f6
editorSuggestWidget.selectedBackground#7a828e
editorSuggestWidget.selectedforeground#f0f3f6
editorSuggestWidget.selectedIconforeground#f0f3f6
editorSuggestWidgetStatus.foreground#71b7ff
editorUnicodeHighlight.background#09b43a80
editorUnicodeHighlight.border#09b43a80
editorUnnecessaryCode._x_#ff6a694d
editorUnnecessaryCode.border#7a828e
editorWarning.background#e7811d00
editorWarning.border#e7811dcd
editorWarning.foreground#ff6a69
editorWhitespace.foreground#ef6eb1
editorWidget.background#010409
editorWidget.border#7a828e
editorWidget.foreground#f0f3f6
editorWidget.resizeBorder#09b43a80
errorForeground#ff6a69
extensionBadge.remoteBackground#09b43a80
extensionButton.prominentBackground#09b43a80
extensionButton.prominentforeground#f0f3f6
extensionButton.prominentHoverBackground#09b43a99
extensionIcon.preReleaseForeground#e7811d
extensionIcon.sponsorForeground#b780ff
extensionIcon.starForeground#f0b72f
extensionIcon.verifiedForeground#71b7ff
focusBorder#01040980
foreground#f0f3f680
gitDecoration.addedResourceForeground#09b43a80
gitDecoration.conflictingResourceForeground#e7811d
gitDecoration.deletedResourceForeground#ff6a69
gitDecoration.ignoredResourceForeground#e7811d80
gitDecoration.modifiedResourceForeground#71b7ff
gitDecoration.renamedResourceforeground#f0f3f6
gitDecoration.stageDeletedResourceForeground#71b7ff80
gitDecoration.stageModifiedResourceForeground#09b43a
gitDecoration.submoduleResourceForeground#f0f3f6
gitDecoration.untrackedResourceforeground#f0f3f6
icon.foreground#f0f3f680
input.background#09b43a4d
input.border#09b43a66
input.foreground#f0f3f6
input.placeholderForeground#f0f3f6
inputOption.activeBackground#7a828e
inputOption.activeBorder#7a828e
inputOption.activeForeground#f0f3f6
inputOption.hoverBackground#f0f3f64d
inputValidation.errorBackground#ff6a6980
inputValidation.errorBorder#ff6a6980
inputValidation.errorForeground#ff6a6980
inputValidation.infoBackground#ff6a6980
inputValidation.infoBorder#71b7ff80
inputValidation.infoForeground#71b7ff80
inputValidation.warningBackground#71b7ff80
inputValidation.warningBorder#ff6a6980
inputValidation.warningForeground#ff6a6980
interactive.activeCodeBorder#f0b72fb3
interactive.inactiveCodeBorder#09b43a4d
issues.closed#ff6a6980
issues.newIssueDecoration#f0f3f6
issues.open#09b43a
keybindingLabel.background#010409
keybindingLabel.border#09b43a80
keybindingLabel.bottomBorder#7a828e
keybindingLabel.foreground#f0f3f6
keybindingTable.headerBackground#09b43a33
keybindingTable.rowsBackground#7a828e4d
list.activeSelectionBackground#7a828e
list.activeSelectionforeground#f0f3f6
list.activeSelectionIconForeground#09b43a
list.deemphasizedForeground#f0b72f
list.dropBackground#09b43a80
list.errorForeground#ff6a69
list.filterMatchBackground#09b43a66
list.filterMatchBorder#09b43a99
list.focusAndSelectionOutline#09b43a80
list.focusBackground#09b43a80
list.focusforeground#f0f3f680
list.focusHighlightForeground#09b43a80
list.focusOutline#09b43a80
list.highlightforeground#f0f3f6
list.hoverBackground#09b43a4d
list.hoverforeground#f0f3f6
list.inactiveFocusBackground#9ea7b380
list.inactiveFocusOutline#09b43ae6
list.inactiveSelectionBackground#09b43a4d
list.inactiveSelectionforeground#f0f3f6
list.inactiveSelectionIconForeground#09b43a
list.invalidItemForeground#ff6a6966
list.warningForeground#e7811d
listFilterWidget.background#71b7ff80
listFilterWidget.noMatchesOutline#9ea7b380
listFilterWidget.outline#71b7ff66
listFilterWidget.shadow#7a828e
menu.background#010409
menu.border#7a828e
menu.foreground#f0f3f6
menu.selectionBackground#09b43a80
menu.selectionBorder#09b43a80
menu.selectionforeground#f0f3f6
menu.separatorBackground#7a828e
menubar.selectionBackground#09b43a80
menubar.selectionBorder#09b43a
menubar.selectionForeground#f0f3f6
merge.border#7a828e
merge.commonContentBackground#09b43a80
merge.commonHeaderBackground#09b43a80
merge.currentContentBackground#ff6a6999
merge.currentHeaderBackground#ff6a69cd
merge.incomingContentBackground#09b43a80
merge.incomingHeaderBackground#09b43a80
mergeEditor.change.background#010409
mergeEditor.change.word.background#010409
mergeEditor.conflict.handled.minimapOverViewRuler#09b43a80
mergeEditor.conflict.handledFocused.border#7a828e
mergeEditor.conflict.handledUnfocused.border#09b43a80
mergeEditor.conflict.unhandled.minimapOverViewRuler#71b7ff
mergeEditor.conflict.unhandledFocused.border#f0b72f80
mergeEditor.conflict.unhandledUnfocused.border#7a828e
mergeEditor.conflictingLines.background#ff6a694d
minimap.background#7a828e4d
minimap.errorHighlight#ff6a69
minimap.findMatchHighlight#09b43a80
minimap.foregroundOpacity#f0f3f6
minimap.selectionHighlight#09b43a80
minimap.selectionOccurrenceHighlight#09b43acd
minimap.warningHighlight#ff6a69
minimapGutter.addedBackground#71b7ffb3
minimapGutter.deletedBackground#ff6a69
minimapGutter.modifiedBackground#71b7ff
minimapSlider.activeBackground#f0f3f6
minimapSlider.background#09b43a4d
minimapSlider.hoverBackground#09b43a80
notebook.cellBorderColor#7a828e
notebook.cellEditorBackground#010409
notebook.cellHoverBackground#f0f3f6
notebook.cellInsertionIndicator#09b43a
notebook.cellToolbarSeparator#7a828e
notebook.editorBackground#010409
notebook.focusedCellBackground#ff6a694d
notebook.focusedCellBorder#09b43a80
notebook.focusedEditorborder#7a828e
notebook.inactiveFocusedCellBorder#09b43a80
notebook.inactiveSelectedCellBorder#7a828e
notebook.outputContainerBackgroundColor#010409
notebook.outputContainerBorderColor#7a828e
notebook.selectedCellBackground#09b43a4d
notebook.selectedCellBorder#09b43a4d
notebook.symbolHighlightBackground#09b43a4d
notebookScrollbarSlider.activeBackground#f0f3f6
notebookScrollbarSlider.background#09b43a80
notebookScrollbarSlider.hoverBackground#7a828e
notebookStatusErrorIcon.foreground#ff6a69
notebookStatusRunningIcon.foreground#71b7ff
notebookStatusSuccessIcon.foreground#09b43a
notificationCenter.border#7a828e
notificationCenterHeader.background#010409
notificationCenterHeader.foreground#f0f3f6
notificationLink.foreground#71b7ff
notifications.background#010409
notifications.border#7a828e
notifications.foreground#f0f3f6
notificationsErrorIcon.foreground#ff6a6980
notificationsInfoIcon.foreground#71b7ff
notificationsWarningIcon.foreground#71b7ff
notificationToast.border#7a828e
panel.background#010409
panel.border#7a828e
panel.dropBorder#7a828e
panelInput.border#71b7ff
panelSection.border#ff6a69
panelSection.dropBackground#010409
panelSectionHeader.background#010409
panelSectionHeader.border#7a828e
panelSectionHeader.foreground#f0f3f6
panelTitle.activeBorder#09b43a80
panelTitle.activeforeground#f0f3f6
panelTitle.inactiveforeground#f0f3f6
peekView.border#f0b72fb3
peekViewEditor.background#010409
peekViewEditor.matchHighlightBackground#09b43a66
peekViewEditor.matchHighlightBorder#09b43a66
peekViewEditorGutter.background#010409
peekViewResult.background#010409
peekViewResult.fileforeground#f0f3f6
peekViewResult.lineforeground#f0f3f6
peekViewResult.matchHighlightBackground#09b43a66
peekViewResult.selectionBackground#09b43a66
peekViewResult.selectionForeground#09b43a
peekViewTitle.background#09b43a80
peekViewTitleDescription.foreground#ff6a69
peekViewTitleLabel.foreground#09b43a80
pickerGroup.border#09b43a80
pickerGroup.foreground#f0f3f6
ports.iconRunningProcessForeground#ff6a69
problemsErrorIcon.foreground#09b43a66
problemsInfoIcon.foreground#71b7ff80
problemsWarningIcon.foreground#e7811d80
progressBar.background#09b43a
pullRequests.notification#71b7ff80
quickInput.background#010409
quickInput.foreground#f0f3f6
quickInputList.focusBackground#09b43a80
quickInputList.focusforeground#f0f3f6
quickInputList.focusIconForeground#09b43a80
quickInputTitle.background#f0f3f6
sash.hoverBorder#09b43a80
scm.providerborder#7a828e
scrollbar.shadow#7a828e
scrollbarSlider.activeBackground#7a828e
scrollbarSlider.background#09b43a80
scrollbarSlider.hoverbackground#f0f3f6
searchEditor.findMatchBackground#7a828e
searchEditor.findMatchBorder#09b43a
searchEditor.textInputborder#7a828e
selection.background#09b43a80
settings.checkboxBackground#7a828e
settings.checkboxBorder#7a828e
settings.checkboxForeground#f0f3f680
settings.dropdownBackground#7a828e
settings.dropdownBorder#7a828e
settings.dropdownForeground#f0f3f680
settings.dropdownListBorder#7a828e
settings.focusedRowBackground#09b43a33
settings.focusedRowBorder#09b43a4d
settings.headerBorder#7a828e
settings.headerForeground#09b43a80
settings.modifiedItemIndicator#ff6a69
settings.numberInputBackground#010409
settings.numberInputBorder#7a828e
settings.numberInputForeground#f0f3f6
settings.rowHoverBackground#7a828e
settings.sashBorder#7a828e
settings.textInputBackground#010409
settings.textInputBorder#7a828e
settings.textInputForeground#f0f3f680
sideBar.background#010409
sideBar.border#7a828e
sideBar.dropBackground#7a828e
sideBar.foreground#f0f3f680
sideBarSectionHeader.background#010409
sideBarSectionHeader.border#7a828e
sideBarSectionHeader.foreground#f0f3f6b3
sideBarTitle.foreground#f0f3f680
sideBySideEditor.horizontalBorder#09b43a
sideBySideEditor.verticalBorder#09b43a
statusBar.background#010409
statusBar.border#7a828e
statusBar.debuggingBackground#ff6a6999
statusBar.debuggingBorder#b780ff
statusBar.debuggingforeground#f0f3f6
statusBar.focusborder#7a828e
statusBar.foreground#f0f3f6
statusBar.noFolderBackground#e7811d80
statusBar.noFolderBorder#e7811d80
statusBar.noFolderforeground#f0f3f6
statusBarItem.activeBackground#010409
statusBarItem.compactHoverBackground#010409
statusBarItem.errorBackground#ff6a6980
statusBarItem.errorForeground#ff6a6980
statusBarItem.focusborder#7a828e
statusBarItem.hoverBackground#09b43a80
statusBarItem.prominentBackground#010409
statusBarItem.prominentForeground#09b43a
statusBarItem.prominentHoverBackground#7a828e4d
statusBarItem.remoteBackground#09b43a80
statusBarItem.remoteforeground#f0f3f6
statusBarItem.settingsProfilesBackground#010409
statusBarItem.settingsProfilesforeground#f0f3f6
statusBarItem.warningBackground#71b7ff80
statusBarItem.warningForeground#71b7ff80
symbolIcon.arrayForeground#71b7ff
symbolIcon.booleanForeground#b780ff
symbolIcon.classForeground#09b43a
symbolIcon.colorForeground#09b43a
symbolIcon.constantForeground#f0b72f
symbolIcon.constructorForeground#b780ff
symbolIcon.enumeratorForeground#26cd4d
symbolIcon.enumeratorMemberForeground#09b43a
symbolIcon.eventForeground#ef6eb1
symbolIcon.fieldForeground#ff6a69
symbolIcon.fileForeground#71b7ff
symbolIcon.folderForeground#09b43a80
symbolIcon.functionForeground#b780ff
symbolIcon.interfaceForeground#ff6a69
symbolIcon.keyForeground#26cd4d
symbolIcon.keywordForeground#f0b72f
symbolIcon.methodForeground#ef6eb1
symbolIcon.moduleForeground#26cd4d
symbolIcon.namespaceForeground#e09b13
symbolIcon.nullForeground#ffffff
symbolIcon.numberForeground#e7811d
symbolIcon.objectForeground#09b43a
symbolIcon.operatorForeground#b87fff
symbolIcon.packageForeground#e09b13
symbolIcon.propertyforeground#f0f3f6
symbolIcon.referenceForeground#f0f3f6
symbolIcon.snippetForeground#ff6a69
symbolIcon.stringForeground#9ea7b366
symbolIcon.structForeground#409eff
symbolIcon.textForeground#09b43a
symbolIcon.typeParameterForeground#ff6a69
symbolIcon.unitForeground#b780ff
symbolIcon.variableForeground#ef6eb1
tab.activeBackground#09b43a33
tab.activeBorder#09b43a80
tab.activeBorderTop#09b43a
tab.activeForeground#09b43a80
tab.activeModifiedBorder#09b43a80
tab.border#09b43a80
tab.hoverBackground#010409
tab.hoverBorder#e09b1380
tab.hoverforeground#f0f3f6cd
tab.inactiveBackground#01040980
tab.inactiveForeground#f0f3f680
tab.inactiveModifiedBorder#09b43a80
tab.lastPinnedborder#7a828e
tab.unfocusedActiveBackground#09b43a33
tab.unfocusedActiveBorder#09b43a80
tab.unfocusedActiveBorderTop#09b43a
tab.unfocusedActiveForeground#09b43a80
tab.unfocusedActiveModifiedBorder#ff6a69
tab.unfocusedHoverBackground#7a828e
tab.unfocusedHoverBorder#09b43a80
tab.unfocusedHoverforeground#f0f3f6cd
tab.unfocusedInactiveBackground#010409
tab.unfocusedInactiveForeground#f0f3f680
tab.unfocusedInactiveModifiedBorder#ff6a69
terminal.ansiBlack#7a828ee6
terminal.ansiBlue#71b7ff
terminal.ansiBrightBlack#9ea7b3
terminal.ansiBrightBlue#91cbff
terminal.ansiBrightCyan#56d4dd
terminal.ansiBrightGreen#4ae168
terminal.ansiBrightMagenta#dbb7ff
terminal.ansiBrightRed#ffb1af
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f7c843
terminal.ansiCyan#39c5cf
terminal.ansiGreen#26cd4d
terminal.ansiMagenta#cb9eff
terminal.ansiRed#ff9492
terminal.ansiWhite#d9dee3
terminal.ansiYellow#f0b72f
terminal.background#010409
terminal.border#7a828e
terminal.dropBackground#09b43a4d
terminal.findMatchBackground#09b43a4d
terminal.findMatchBorder#09b43a4d
terminal.findMatchHighlightBackground#71b7ff33
terminal.findMatchHighlightBorder#f0b72f33
terminal.inactiveSelectionBackground#f0b72f4d
terminal.selectionBackground#09b43a80
terminal.selectionForeground#f0f3f6
terminal.tab.activeBorder#09b43a
terminalCommandDecoration.defaultBackground#7a828e
terminalCommandDecoration.errorBackground#ff6a6980
terminalCommandDecoration.successBackground#09b43a80
terminalCursor.background#26cd4d33
terminalCursor.foreground#26cd4d
terminalOverviewRuler.cursorForeground#09b43a
terminalOverviewRuler.findMatchForeground#09b43a
termnal.foreground#f0f3f64d
testing.iconErrored#ff6a69
testing.iconFailed#ff6a69
testing.iconPassed#09b43a
testing.iconQueued#f0b72f
testing.iconSkipped#e7811d
testing.iconUnset#e7811d
testing.message.error.decorationForeground#ff6a69
testing.message.error.lineBackground#ff6a6980
testing.message.info.decorationForeground#71b7ff80
testing.message.info.lineBackground#71b7ff
testing.peekBorder#7a828e
testing.peekHeaderBackground#ff6a69
testing.runAction#71b7ff
textBlockQuote.background#09b43a
textBlockQuote.border#7a828e
textCodeBlock.background#010409
textLink.activeForeground#71b7ff
textLink.foreground#71b7ff
textPreformat.foreground#f0f3f6
textSeparator.foreground#f0f3f6
titleBar.activeBackground#010409
titleBar.activeForeground#f0f3f6
titleBar.border#71b7ff80
titleBar.inactiveBackground#010409
titleBar.inactiveForeground#f0f3f6
toolbar.activeBackground#010409
toolbar.hoverBackground#010409
toolbar.hoverOutline#f0f3f6
tree.indentGuidesStroke#09b43a80
tree.tableColumnsborder#7a828e
tree.tableOddRowsBackground#7a828e
walkThrough.embeddedEditorBackground#7a828e
welcomePage.background#010409
welcomePage.progress.background#010409
welcomePage.progress.foreground#09b43a
welcomePage.tileBackground#7a828e
welcomePage.tileHoverBackground#010409
welcomePage.tileShadow#f0f3f6
widget.shadow#7a828e
window.activeBorder#f0f3f6
window.inactiveBorder#f0f3f6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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