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 Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#ffffff
activityBar.activeBorder#055d2080
activityBar.activeFocusBorder#055d20
activityBar.background#ffffff
activityBar.border#88929d
activityBar.dropBorder#88929d
activityBar.foreground#055d20cd
activityBar.inactiveForeground#0e111680
activityBarBadge.background#055d20
activityBarBadge.foreground#0e1116
badge.background#368cf9b3
badge.foreground#0e1116
banner.background#055d2080
banner.foreground#0e1116
banner.iconForeground#055d2080
breadcrumb.activeSelectionforeground#0e1116
breadcrumb.background#ffffff
breadcrumb.focusforeground#0e1116
breadcrumb.foreground#0e111680
breadcrumbPicker.background#ffffff
button.background#055d2080
button.border#055d204d
button.foreground#0e1116
button.hoverBackground#055d204d
button.secondaryBackground#055d2080
button.secondaryforeground#0e1116
button.secondaryHoverBackground#055d204d
button.separator#055d204d
charts.blue#368cf9
charts.foreground#0e1116
charts.green#055d20
charts.lines#0e1116
charts.orange#dc6d1a
charts.purple#055d20
charts.red#ee5a5d
charts.yellow#744500
checkbox.background#ffffff
checkbox.border#88929d
checkbox.foreground#0e1116
commandCenter.activeBackground#055d2080
commandCenter.activeforeground#0e1116
commandCenter.background#ffffff
commandCenter.border#88929d
commandCenter.foreground#0e1116
contrastActiveborder#88929d
contrastBorder#ffffff
debugConsole.errorForeground#ee5a5d
debugConsole.infoForeground#0349b4
debugConsole.sourceForeground#0e1116
debugConsole.warningForeground#873800
debugConsoleInputIcon.foreground#055d20
debugExceptionWidget.background#ffffff
debugExceptionWidget.border#88929d
debugIcon.breakpointCurrentStackframeForeground#055d20
debugIcon.breakpointDisabledForeground#66707b
debugIcon.breakpointForeground#873800
debugIcon.breakpointStackframeForeground#0e1116
debugIcon.breakpointUnverifiedForeground#744500
debugIcon.continueForeground#055d20
debugIcon.disconnectForeground#a0111f
debugIcon.pauseForeground#0349b4
debugIcon.restartForeground#0349b480
debugIcon.startForeground#0349b480
debugIcon.stepBackForeground#0349b480
debugIcon.stepIntoForeground#0349b480
debugIcon.stepOutForeground#0349b480
debugIcon.stopForeground#a0111f
debugTokenExpression.boolean#74450080
debugTokenExpression.error#a0111f80
debugTokenExpression.name#0349b480
debugTokenExpression.number#87380080
debugTokenExpression.string#0e111680
debugTokenExpression.value#97136880
debugToolBar.background#ee5a5d80
debugToolBar.border#ee5a5d80
debugView.exceptionLabelBackground#88929d
debugView.exceptionLabelforeground#0e1116
debugView.stateLabelBackground#88929d
debugView.stateLabelforeground#0e1116
debugView.valueChangedHighlight#055d2080
descriptionForeground#0e1116
diffEditor.border#88929d
diffEditor.diagonalFill#0e1116
diffEditor.insertedLineBackground#055d2080
diffEditor.insertedTextBackground#055d2080
diffEditor.insertedTextBorder#055d2080
diffEditor.removedLineBackground#ee5a5de6
diffEditor.removedTextBackground#ee5a5db3
diffEditor.removedTextBorder#ee5a5db3
diffEditorGutter.insertedLineBackground#055d2080
diffEditorGutter.removedLineBackground#ee5a5de6
diffEditorOverview.insertedForeground#055d2080
diffEditorOverview.removedForeground#ee5a5de6
disabledForeground#0e1116
dropdown.background#ffffff
dropdown.border#88929d
dropdown.foreground#055d2080
dropdown.listBackground#88929d
editor.background#ffffff
editor.findMatchBackground#055d2033
editor.findMatchBorder#055d2066
editor.findMatchHighlightBackground#74450033
editor.findMatchHighlightBorder#74450033
editor.findRangeHighlightBackground#055d20b3
editor.findRangeHighlightBorder#055d20b3
editor.focusedStackFrameHighlightBackground#055d2080
editor.foldBackground#88929d
editor.foreground#0e1116
editor.hoverHighlightBackground#055d2066
editor.inactiveSelectionBackground#88929d
editor.inlineValuesBackground#055d2080
editor.inlineValuesforeground#0e1116
editor.lineHighlightBackground#055d2033
editor.lineHighlightBorder#055d2033
editor.linkedEditingBackground#74450033
editor.rangeHighlightBackground#055d204d
editor.rangeHighlightBorder#055d2080
editor.selectionBackground#88929d
editor.selectionHighlightBackground#055d204d
editor.selectionHighlightborder#88929d
editor.snippetFinalTabstopHighlightBackground#ffffff
editor.snippetFinalTabstopHighlightborder#88929d
editor.snippetTabstopHighlightBackground#88929d
editor.snippetTabstopHighlightborder#88929d
editor.stackFrameHighlightbackground#0e1116
editor.symbolHighlightBackground#622cbc80
editor.symbolHighlightBorder#622cbc66
editor.wordHighlightBackground#055d2080
editor.wordHighlightBorder#88929d
editor.wordHighlightStrongBackground#055d2033
editor.wordHighlightStrongBorder#88929d
editorBracketHighlight.foreground1#971368
editorBracketHighlight.foreground2#055d20
editorBracketHighlight.foreground3#622cbc
editorBracketHighlight.foreground4#a0111f
editorBracketHighlight.foreground5#744500
editorBracketHighlight.foreground6#873800
editorBracketHighlight.unexpectedBracket.foreground#ed4baf
editorBracketMatch.background#ffffff
editorBracketMatch.border#88929d
editorBracketPairGuide.activeBackground1#971368b3
editorBracketPairGuide.activeBackground2#055d2080
editorBracketPairGuide.activeBackground3#622cbcb3
editorBracketPairGuide.activeBackground4#a0111fb3
editorBracketPairGuide.activeBackground5#744500b3
editorBracketPairGuide.activeBackground6#873800b3
editorBracketPairGuide.background1#971368b3
editorBracketPairGuide.background2#055d2080
editorBracketPairGuide.background3#622cbcb3
editorBracketPairGuide.background4#a0111fb3
editorBracketPairGuide.background5#744500b3
editorBracketPairGuide.background6#873800b3
editorCodeLens.foreground#0e1116
editorCommentsWidget.rangeActiveBackground#88929d
editorCommentsWidget.rangeActiveborder#88929d
editorCommentsWidget.rangeBackground#055d20
editorCommentsWidget.rangeborder#88929d
editorCommentsWidget.resolvedBorder#88929d
editorCommentsWidget.unresolvedBorder#88929d
editorCursor.background#ffffff
editorCursor.foreground#055d20
editorError.background#ee5a5db3
editorError.border#ee5a5d
editorError.foreground#ee5a5db3
editorGhostText.background#055d20b3
editorGhostText.border#055d2080
editorGhostText.foreground#0349b4
editorGroup.border#88929d
editorGroup.dropBackground#055d204d
editorGroup.dropIntoPromptBackground#ffffff
editorGroup.dropIntoPromptborder#88929d
editorGroup.dropIntoPromptforeground#0e1116
editorGroup.emptyBackground#ffffff
editorGroup.focusedEmptyBorder#88929d
editorGroupHeader.border#88929d
editorGroupHeader.noTabsBackground#ffffff
editorGroupHeader.tabsBackground#ffffff
editorGutter.addedBackground#0349b480
editorGutter.background#ffffff
editorGutter.commentRangeforeground#0e1116
editorGutter.deletedBackground#a0111f80
editorGutter.foldingControlforeground#0e1116
editorGutter.modifiedBackground#055d20
editorHint.border#055d2080
editorHint.foreground#0349b480
editorHoverWidget.background#ffffff
editorHoverWidget.border#88929d
editorHoverWidget.foreground#0e111680
editorHoverWidget.highlightForeground#055d20
editorHoverWidget.statusBarBackground#ee5a5de6
editorIndentGuide.activeBackground#ee5a5de6
editorIndentGuide.background#0e111600
editorInfo.background#ffffff
editorInfo.border#0349b44d
editorInfo.foreground#0349b4
editorInlayHint.background#ffffff
editorInlayHint.foreground#0e111666
editorInlayHint.parameterBackground#88929d80
editorInlayHint.parameterForeground#0349b480
editorInlayHint.typeBackground#88929d80
editorInlayHint.typeForeground#0349b480
editorLightBulb.foreground#744500
editorLightBulbAutoFix.foreground#055d2080
editorLineNumber.activeForeground#055d20
editorLineNumber.foreground#0e111680
editorLink.activeForeground#0349b4
editorMarkerNavigation.background#ffffff
editorMarkerNavigationError.background#ee5a5d80
editorMarkerNavigationError.headerBackground#ee5a5d
editorMarkerNavigationInfo.background#0349b4
editorMarkerNavigationInfo.headerBackground#ffffff
editorMarkerNavigationWarning.background#dc6d1a80
editorMarkerNavigationWarning.headerBackground#dc6d1a80
editorOverviewRuler.addedForeground#0349b4
editorOverviewRuler.background#ffffff
editorOverviewRuler.border#055d2080
editorOverviewRuler.bracketMatchForeground#a371f780
editorOverviewRuler.commonContentforeground#0e1116
editorOverviewRuler.currentContentForeground#055d2080
editorOverviewRuler.deletedForeground#74450080
editorOverviewRuler.errorForeground#ee5a5d80
editorOverviewRuler.findMatchForeground#055d2080
editorOverviewRuler.incomingContentforeground#0e1116
editorOverviewRuler.infoForeground#0349b480
editorOverviewRuler.modifiedForeground#055d2080
editorOverviewRuler.rangeHighlightForeground#055d2033
editorOverviewRuler.selectionHighlightForeground#055d2080
editorOverviewRuler.warningForeground#dc6d1a80
editorOverviewRuler.wordHighlightForeground#055d2080
editorOverviewRuler.wordHighlightStrongForeground#055d2080
editorPane.background#88929d
editorRuler.foreground#055d2080
editorStickyScroll.background#ffffff
editorStickyScrollHover.background#055d204d
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#88929d
editorSuggestWidget.focusHighlightforeground#0e1116
editorSuggestWidget.foreground#0e1116
editorSuggestWidget.highlightforeground#0e1116
editorSuggestWidget.selectedBackground#88929d
editorSuggestWidget.selectedforeground#0e1116
editorSuggestWidget.selectedIconforeground#0e1116
editorSuggestWidgetStatus.foreground#0349b4
editorUnicodeHighlight.background#055d2080
editorUnicodeHighlight.border#055d2080
editorUnnecessaryCode._x_#ee5a5d4d
editorUnnecessaryCode.border#88929d
editorWarning.background#dc6d1a00
editorWarning.border#dc6d1acd
editorWarning.foreground#ee5a5d
editorWhitespace.foreground#ed4baf
editorWidget.background#ffffff
editorWidget.border#88929d
editorWidget.foreground#0e1116
editorWidget.resizeBorder#055d2080
errorForeground#ee5a5d
extensionBadge.remoteBackground#055d2080
extensionButton.prominentBackground#055d2080
extensionButton.prominentforeground#0e1116
extensionButton.prominentHoverBackground#055d2099
extensionIcon.preReleaseForeground#dc6d1a
extensionIcon.sponsorForeground#a371f7
extensionIcon.starForeground#744500
extensionIcon.verifiedForeground#0349b4
focusBorder#ffffff80
foreground#0e111680
gitDecoration.addedResourceForeground#055d2080
gitDecoration.conflictingResourceForeground#873800
gitDecoration.deletedResourceForeground#ee5a5d
gitDecoration.ignoredResourceForeground#dc6d1a80
gitDecoration.modifiedResourceForeground#0349b4
gitDecoration.renamedResourceforeground#0e1116
gitDecoration.stageDeletedResourceForeground#0349b480
gitDecoration.stageModifiedResourceForeground#055d20
gitDecoration.submoduleResourceForeground#0e1116
gitDecoration.untrackedResourceforeground#0e1116
icon.foreground#0e111680
input.background#055d204d
input.border#055d2066
input.foreground#0e1116
input.placeholderForeground#0e1116
inputOption.activeBackground#88929d
inputOption.activeBorder#88929d
inputOption.activeForeground#0e1116
inputOption.hoverBackground#0e11164d
inputValidation.errorBackground#ee5a5d80
inputValidation.errorBorder#ee5a5d80
inputValidation.errorForeground#ee5a5d80
inputValidation.infoBackground#ee5a5d80
inputValidation.infoBorder#0349b480
inputValidation.infoForeground#0349b480
inputValidation.warningBackground#0349b480
inputValidation.warningBorder#a0111f80
inputValidation.warningForeground#a0111f80
interactive.activeCodeBorder#744500b3
interactive.inactiveCodeBorder#055d204d
issues.closed#a0111f80
issues.newIssueDecoration#0e1116
issues.open#055d20
keybindingLabel.background#ffffff
keybindingLabel.border#055d2080
keybindingLabel.bottomBorder#88929d
keybindingLabel.foreground#0e1116
keybindingTable.headerBackground#055d2033
keybindingTable.rowsBackground#88929d4d
list.activeSelectionBackground#88929d
list.activeSelectionforeground#0e1116
list.activeSelectionIconForeground#055d20
list.deemphasizedForeground#744500
list.dropBackground#055d2080
list.errorForeground#ee5a5d
list.filterMatchBackground#055d2066
list.filterMatchBorder#055d2099
list.focusAndSelectionOutline#055d2080
list.focusBackground#055d2080
list.focusforeground#0e111680
list.focusHighlightForeground#055d2080
list.focusOutline#055d2080
list.highlightforeground#0e1116
list.hoverBackground#055d204d
list.hoverforeground#0e1116
list.inactiveFocusBackground#66707b80
list.inactiveFocusOutline#055d20e6
list.inactiveSelectionBackground#055d204d
list.inactiveSelectionforeground#0e1116
list.inactiveSelectionIconForeground#055d20
list.invalidItemForeground#ee5a5d66
list.warningForeground#dc6d1a
listFilterWidget.background#0349b480
listFilterWidget.noMatchesOutline#66707b80
listFilterWidget.outline#0349b466
listFilterWidget.shadow#88929d
menu.background#ffffff
menu.border#88929d
menu.foreground#0e1116
menu.selectionBackground#055d2080
menu.selectionBorder#055d2080
menu.selectionforeground#0e1116
menu.separatorBackground#88929d
menubar.selectionBackground#055d2080
menubar.selectionBorder#055d20
menubar.selectionForeground#0e1116
merge.border#88929d
merge.commonContentBackground#055d2080
merge.commonHeaderBackground#055d2080
merge.currentContentBackground#ee5a5d99
merge.currentHeaderBackground#ee5a5dcd
merge.incomingContentBackground#055d2080
merge.incomingHeaderBackground#055d2080
mergeEditor.change.background#ffffff
mergeEditor.change.word.background#ffffff
mergeEditor.conflict.handled.minimapOverViewRuler#055d2080
mergeEditor.conflict.handledFocused.border#88929d
mergeEditor.conflict.handledUnfocused.border#055d2080
mergeEditor.conflict.unhandled.minimapOverViewRuler#0349b4
mergeEditor.conflict.unhandledFocused.border#74450080
mergeEditor.conflict.unhandledUnfocused.border#88929d
mergeEditor.conflictingLines.background#ee5a5d4d
minimap.background#88929d4d
minimap.errorHighlight#ee5a5d
minimap.findMatchHighlight#055d2080
minimap.foregroundOpacity#0e1116
minimap.selectionHighlight#055d2080
minimap.selectionOccurrenceHighlight#055d20cd
minimap.warningHighlight#ee5a5d
minimapGutter.addedBackground#0349b4b3
minimapGutter.deletedBackground#ee5a5d
minimapGutter.modifiedBackground#0349b4
minimapSlider.activeBackground#0e1116
minimapSlider.background#055d204d
minimapSlider.hoverBackground#055d2080
notebook.cellBorderColor#88929d
notebook.cellEditorBackground#ffffff
notebook.cellHoverBackground#0e1116
notebook.cellInsertionIndicator#055d20
notebook.cellToolbarSeparator#88929d
notebook.editorBackground#ffffff
notebook.focusedCellBackground#ee5a5d4d
notebook.focusedCellBorder#055d2080
notebook.focusedEditorborder#88929d
notebook.inactiveFocusedCellBorder#055d2080
notebook.inactiveSelectedCellBorder#88929d
notebook.outputContainerBackgroundColor#ffffff
notebook.outputContainerBorderColor#88929d
notebook.selectedCellBackground#055d204d
notebook.selectedCellBorder#055d204d
notebook.symbolHighlightBackground#055d204d
notebookScrollbarSlider.activeBackground#0e1116
notebookScrollbarSlider.background#055d2080
notebookScrollbarSlider.hoverBackground#88929d
notebookStatusErrorIcon.foreground#ee5a5d
notebookStatusRunningIcon.foreground#0349b4
notebookStatusSuccessIcon.foreground#055d20
notificationCenter.border#88929d
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#0e1116
notificationLink.foreground#0349b4
notifications.background#ffffff
notifications.border#88929d
notifications.foreground#0e1116
notificationsErrorIcon.foreground#ee5a5d80
notificationsInfoIcon.foreground#0349b4
notificationsWarningIcon.foreground#0349b4
notificationToast.border#88929d
panel.background#ffffff
panel.border#88929d
panel.dropBorder#88929d
panelInput.border#0349b4
panelSection.border#ee5a5d
panelSection.dropBackground#ffffff
panelSectionHeader.background#ffffff
panelSectionHeader.border#88929d
panelSectionHeader.foreground#0e1116
panelTitle.activeBorder#055d2080
panelTitle.activeforeground#0e1116
panelTitle.inactiveforeground#0e1116
peekView.border#744500b3
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#055d2066
peekViewEditor.matchHighlightBorder#055d2066
peekViewEditorGutter.background#ffffff
peekViewResult.background#ffffff
peekViewResult.fileforeground#0e1116
peekViewResult.lineforeground#0e1116
peekViewResult.matchHighlightBackground#055d2066
peekViewResult.selectionBackground#055d2066
peekViewResult.selectionForeground#055d20
peekViewTitle.background#055d2080
peekViewTitleDescription.foreground#ee5a5d
peekViewTitleLabel.foreground#055d2080
pickerGroup.border#055d2080
pickerGroup.foreground#0e1116
ports.iconRunningProcessForeground#ee5a5d
problemsErrorIcon.foreground#055d2066
problemsInfoIcon.foreground#0349b480
problemsWarningIcon.foreground#dc6d1a80
progressBar.background#055d20
pullRequests.notification#0349b480
quickInput.background#ffffff
quickInput.foreground#0e1116
quickInputList.focusBackground#055d2080
quickInputList.focusforeground#0e1116
quickInputList.focusIconForeground#055d2080
quickInputTitle.background#0e1116
sash.hoverBorder#055d2080
scm.providerborder#88929d
scrollbar.shadow#88929d
scrollbarSlider.activeBackground#88929d
scrollbarSlider.background#055d2080
scrollbarSlider.hoverbackground#0e1116
searchEditor.findMatchBackground#88929d
searchEditor.findMatchBorder#055d20
searchEditor.textInputborder#88929d
selection.background#055d2080
settings.checkboxBackground#88929d
settings.checkboxBorder#88929d
settings.checkboxForeground#0e111680
settings.dropdownBackground#88929d
settings.dropdownBorder#88929d
settings.dropdownForeground#0e111680
settings.dropdownListBorder#88929d
settings.focusedRowBackground#055d2033
settings.focusedRowBorder#055d204d
settings.headerBorder#88929d
settings.headerForeground#055d2080
settings.modifiedItemIndicator#ee5a5d
settings.numberInputBackground#ffffff
settings.numberInputBorder#88929d
settings.numberInputForeground#0e1116
settings.rowHoverBackground#88929d
settings.sashBorder#88929d
settings.textInputBackground#ffffff
settings.textInputBorder#88929d
settings.textInputForeground#0e111680
sideBar.background#ffffff
sideBar.border#88929d
sideBar.dropBackground#88929d
sideBar.foreground#0e111680
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#88929d
sideBarSectionHeader.foreground#0e1116b3
sideBarTitle.foreground#0e111680
sideBySideEditor.horizontalBorder#055d20
sideBySideEditor.verticalBorder#055d20
statusBar.background#ffffff
statusBar.border#88929d
statusBar.debuggingBackground#ee5a5d99
statusBar.debuggingBorder#a371f7
statusBar.debuggingforeground#0e1116
statusBar.focusborder#88929d
statusBar.foreground#0e1116
statusBar.noFolderBackground#dc6d1a80
statusBar.noFolderBorder#dc6d1a80
statusBar.noFolderforeground#0e1116
statusBarItem.activeBackground#ffffff
statusBarItem.compactHoverBackground#ffffff
statusBarItem.errorBackground#ee5a5d80
statusBarItem.errorForeground#ee5a5d80
statusBarItem.focusborder#88929d
statusBarItem.hoverBackground#055d2080
statusBarItem.prominentBackground#ffffff
statusBarItem.prominentForeground#055d20
statusBarItem.prominentHoverBackground#88929d4d
statusBarItem.remoteBackground#055d2080
statusBarItem.remoteforeground#0e1116
statusBarItem.settingsProfilesBackground#ffffff
statusBarItem.settingsProfilesforeground#0e1116
statusBarItem.warningBackground#0349b480
statusBarItem.warningForeground#0349b480
symbolIcon.arrayForeground#0349b4
symbolIcon.booleanForeground#a371f7
symbolIcon.classForeground#055d20
symbolIcon.colorForeground#055d20
symbolIcon.constantForeground#744500
symbolIcon.constructorForeground#622cbc
symbolIcon.enumeratorForeground#055d20
symbolIcon.enumeratorMemberForeground#055d20
symbolIcon.eventForeground#971368
symbolIcon.fieldForeground#ee5a5d
symbolIcon.fileForeground#0349b4
symbolIcon.folderForeground#055d2080
symbolIcon.functionForeground#622cbc
symbolIcon.interfaceForeground#a0111f
symbolIcon.keyForeground#055d20
symbolIcon.keywordForeground#744500
symbolIcon.methodForeground#971368
symbolIcon.moduleForeground#055d20
symbolIcon.namespaceForeground#744500
symbolIcon.nullForeground#0e1116
symbolIcon.numberForeground#873800
symbolIcon.objectForeground#117f32
symbolIcon.operatorForeground#622cbc
symbolIcon.packageForeground#744500
symbolIcon.propertyforeground#0e1116
symbolIcon.referenceForeground#0e1116
symbolIcon.snippetForeground#ee5a5d
symbolIcon.stringForeground#acb6c033
symbolIcon.structForeground#368cf9
symbolIcon.textForeground#26a148
symbolIcon.typeParameterForeground#a0111f
symbolIcon.unitForeground#a371f7
symbolIcon.variableForeground#ed4baf
tab.activeBackground#055d2033
tab.activeBorder#055d2080
tab.activeBorderTop#055d20
tab.activeForeground#055d2080
tab.activeModifiedBorder#055d2080
tab.border#055d2080
tab.hoverBackground#ffffff
tab.hoverBorder#74450080
tab.hoverforeground#0e1116cd
tab.inactiveBackground#ffffff80
tab.inactiveForeground#0e111680
tab.inactiveModifiedBorder#055d2080
tab.lastPinnedborder#88929d
tab.unfocusedActiveBackground#055d2033
tab.unfocusedActiveBorder#055d2080
tab.unfocusedActiveBorderTop#055d20
tab.unfocusedActiveForeground#055d2080
tab.unfocusedActiveModifiedBorder#ee5a5d
tab.unfocusedHoverBackground#88929d
tab.unfocusedHoverBorder#055d2080
tab.unfocusedHoverforeground#0e1116cd
tab.unfocusedInactiveBackground#ffffff
tab.unfocusedInactiveForeground#0e111680
tab.unfocusedInactiveModifiedBorder#ee5a5d
terminal.ansiBlack#0e1116e6
terminal.ansiBlue#0349b4
terminal.ansiBrightBlack#4b535d
terminal.ansiBrightBlue#1168e3
terminal.ansiBrightCyan#3192aa
terminal.ansiBrightGreen#055d20
terminal.ansiBrightMagenta#844ae7
terminal.ansiBrightRed#86061d
terminal.ansiBrightWhite#88929d
terminal.ansiBrightYellow#4e2c00
terminal.ansiCyan#1b7c83
terminal.ansiGreen#024c1a
terminal.ansiMagenta#622cbc
terminal.ansiRed#a0111f
terminal.ansiWhite#66707b
terminal.ansiYellow#3f2200
terminal.background#ffffff
terminal.border#88929d
terminal.dropBackground#055d204d
terminal.findMatchBackground#055d204d
terminal.findMatchBorder#055d204d
terminal.findMatchHighlightBackground#0349b433
terminal.findMatchHighlightBorder#74450033
terminal.inactiveSelectionBackground#7445004d
terminal.selectionBackground#055d2080
terminal.selectionForeground#0e1116
terminal.tab.activeBorder#055d20
terminalCommandDecoration.defaultBackground#88929d
terminalCommandDecoration.errorBackground#ee5a5d80
terminalCommandDecoration.successBackground#055d2080
terminalCursor.background#055d2033
terminalCursor.foreground#055d20
terminalOverviewRuler.cursorForeground#055d20
terminalOverviewRuler.findMatchForeground#055d20
termnal.foreground#0e11164d
testing.iconErrored#ee5a5d
testing.iconFailed#ee5a5d
testing.iconPassed#055d20
testing.iconQueued#744500
testing.iconSkipped#dc6d1a
testing.iconUnset#dc6d1a
testing.message.error.decorationForeground#ee5a5d
testing.message.error.lineBackground#ee5a5d80
testing.message.info.decorationForeground#0349b480
testing.message.info.lineBackground#0349b4
testing.peekBorder#88929d
testing.peekHeaderBackground#ee5a5d
testing.runAction#0349b4
textBlockQuote.background#055d20
textBlockQuote.border#88929d
textCodeBlock.background#ffffff
textLink.activeForeground#0349b4
textLink.foreground#0349b4
textPreformat.foreground#0e1116
textSeparator.foreground#0e1116
titleBar.activeBackground#ffffff
titleBar.activeForeground#0e1116
titleBar.border#0349b480
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#0e1116
toolbar.activeBackground#ffffff
toolbar.hoverBackground#ffffff
toolbar.hoverOutline#0e1116
tree.indentGuidesStroke#055d2080
tree.tableColumnsborder#88929d
tree.tableOddRowsBackground#88929d
walkThrough.embeddedEditorBackground#88929d
welcomePage.background#ffffff
welcomePage.progress.background#ffffff
welcomePage.progress.foreground#055d20
welcomePage.tileBackground#88929d
welcomePage.tileHoverBackground#ffffff
welcomePage.tileShadow#0e1116
widget.shadow#88929d
window.activeBorder#0e1116
window.inactiveBorder#0e1116

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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