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 Colorblind 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#f6f8fa
activityBar.activeBorder#218bff80
activityBar.activeFocusBorder#218bff
activityBar.background#f6f8fa
activityBar.border#d8dee4ff
activityBar.dropBorder#d8dee4ff
activityBar.foreground#218bffcd
activityBar.inactiveForeground#24292f80
activityBarBadge.background#218bff
activityBarBadge.foreground#24292f
badge.foreground#24292f
banner.background#218bff80
banner.foreground#24292f
banner.iconForeground#218bff80
breadcrumb.activeSelectionforeground#24292f
breadcrumb.background#f6f8fa
breadcrumb.focusforeground#24292f
breadcrumb.foreground#24292f80
breadcrumbPicker.background#f6f8fa
button.background#218bff80
button.border#218bff4d
button.foreground#24292f
button.hoverBackground#218bff4d
button.secondaryBackground#218bff80
button.secondaryforeground#24292f
button.secondaryHoverBackground#218bff4d
button.separator#218bff4d
charts.blue#54aeff66
charts.foreground#24292f
charts.green#218bff
charts.lines#57606a
charts.orange#f7993966
charts.purple#218bff
charts.red#f7993966
charts.yellow#9a6700
checkbox.background#f6f8fa
checkbox.border#d8dee4ff
checkbox.foreground#24292f
commandCenter.activeBackground#218bff80
commandCenter.activeforeground#24292f
commandCenter.background#f6f8fa
commandCenter.border#d8dee4ff
commandCenter.foreground#24292f
contrastActiveborder#d8dee4ff
contrastBorder#f6f8fa
debugConsole.errorForeground#f7993966
debugConsole.infoForeground#0969da
debugConsole.sourceForeground#24292f
debugConsole.warningForeground#b35900
debugConsoleInputIcon.foreground#218bff
debugExceptionWidget.background#f6f8fa
debugExceptionWidget.border#d8dee4ff
debugIcon.breakpointCurrentStackframeForeground#218bff
debugIcon.breakpointDisabledForeground#6e7781
debugIcon.breakpointForeground#b35900
debugIcon.breakpointStackframeForeground#24292f
debugIcon.breakpointUnverifiedForeground#9a6700
debugIcon.continueForeground#218bff
debugIcon.disconnectForeground#b35900
debugIcon.pauseForeground#0969da
debugIcon.restartForeground#0969da80
debugIcon.startForeground#0969da80
debugIcon.stepBackForeground#0969da80
debugIcon.stepIntoForeground#0969da80
debugIcon.stepOutForeground#0969da80
debugIcon.stopForeground#b35900
debugTokenExpression.boolean#9a670080
debugTokenExpression.error#b3590080
debugTokenExpression.name#0969da80
debugTokenExpression.number#b3590080
debugTokenExpression.string#57606a80
debugTokenExpression.value#bf398980
debugView.exceptionLabelBackground#d8dee4ff
debugView.exceptionLabelforeground#24292f
debugView.stateLabelBackground#d8dee4ff
debugView.stateLabelforeground#24292f
debugView.valueChangedHighlight#218bff80
descriptionForeground#24292f
diffEditor.border#d8dee4ff
diffEditor.diagonalFill#24292f
diffEditor.insertedLineBackground#218bff80
diffEditor.insertedTextBackground#218bff80
diffEditor.insertedTextBorder#218bff80
diffEditorGutter.insertedLineBackground#218bff80
diffEditorOverview.insertedForeground#218bff80
disabledForeground#57606a
dropdown.background#f6f8fa
dropdown.border#d8dee4ff
dropdown.foreground#218bff80
dropdown.listBackground#d8dee4ff
editor.background#f6f8fa
editor.findMatchBackground#218bff33
editor.findMatchBorder#218bff66
editor.findMatchHighlightBackground#bf870033
editor.findMatchHighlightBorder#bf870033
editor.findRangeHighlightBackground#218bffb3
editor.findRangeHighlightBorder#218bffb3
editor.focusedStackFrameHighlightBackground#218bff80
editor.foldBackground#d8dee4ff
editor.foreground#24292f
editor.hoverHighlightBackground#218bff66
editor.inactiveSelectionBackground#d8dee4ff
editor.inlineValuesBackground#218bff80
editor.inlineValuesforeground#24292f
editor.lineHighlightBackground#218bff33
editor.lineHighlightBorder#218bff33
editor.linkedEditingBackground#9a670033
editor.rangeHighlightBackground#218bff4d
editor.rangeHighlightBorder#218bff80
editor.selectionBackground#d8dee4ff
editor.selectionHighlightBackground#218bff4d
editor.selectionHighlightborder#d8dee4ff
editor.snippetFinalTabstopHighlightBackground#f6f8fa
editor.snippetFinalTabstopHighlightborder#d8dee4ff
editor.snippetTabstopHighlightBackground#d8dee4ff
editor.snippetTabstopHighlightborder#d8dee4ff
editor.stackFrameHighlightbackground#24292f
editor.symbolHighlightBackground#8250df80
editor.symbolHighlightBorder#8250df66
editor.wordHighlightBackground#218bff80
editor.wordHighlightBorder#d8dee4ff
editor.wordHighlightStrongBackground#218bff33
editor.wordHighlightStrongBorder#d8dee4ff
editorBracketHighlight.foreground1#bf3989
editorBracketHighlight.foreground2#218bff
editorBracketHighlight.foreground3#8250df
editorBracketHighlight.foreground4#6e7781
editorBracketHighlight.foreground5#9a6700
editorBracketHighlight.foreground6#b35900
editorBracketHighlight.unexpectedBracket.foreground#ff80c866
editorBracketMatch.background#f6f8fa
editorBracketMatch.border#d8dee4ff
editorBracketPairGuide.activeBackground1#bf3989b3
editorBracketPairGuide.activeBackground2#218bff80
editorBracketPairGuide.activeBackground3#8250dfb3
editorBracketPairGuide.activeBackground4#6e7781b3
editorBracketPairGuide.activeBackground5#9a6700b3
editorBracketPairGuide.activeBackground6#b35900b3
editorBracketPairGuide.background1#bf3989b3
editorBracketPairGuide.background2#218bff80
editorBracketPairGuide.background3#8250dfb3
editorBracketPairGuide.background4#6e7781b3
editorBracketPairGuide.background5#9a6700b3
editorBracketPairGuide.background6#b35900b3
editorCodeLens.foreground#24292f
editorCommentsWidget.rangeActiveBackground#d8dee4ff
editorCommentsWidget.rangeActiveborder#d8dee4ff
editorCommentsWidget.rangeBackground#218bff
editorCommentsWidget.rangeborder#d8dee4ff
editorCommentsWidget.resolvedBorder#d8dee4ff
editorCommentsWidget.unresolvedBorder#d8dee4ff
editorCursor.background#f6f8fa
editorCursor.foreground#0969da
editorError.border#f7993966
editorGhostText.background#218bffb3
editorGhostText.border#218bff80
editorGhostText.foreground#0969da
editorGroup.border#d8dee4ff
editorGroup.dropBackground#218bff4d
editorGroup.dropIntoPromptBackground#f6f8fa
editorGroup.dropIntoPromptborder#d8dee4ff
editorGroup.dropIntoPromptforeground#24292f
editorGroup.emptyBackground#f6f8fa
editorGroup.focusedEmptyBorder#d8dee4ff
editorGroupHeader.border#d8dee4ff
editorGroupHeader.noTabsBackground#f6f8fa
editorGroupHeader.tabsBackground#f6f8fa
editorGutter.addedBackground#0969da80
editorGutter.background#f6f8fa
editorGutter.commentRangeforeground#24292f
editorGutter.deletedBackground#b3590080
editorGutter.foldingControlforeground#24292f
editorGutter.modifiedBackground#0969da
editorHint.border#218bff80
editorHint.foreground#0969da80
editorHoverWidget.background#f6f8fa
editorHoverWidget.border#d8dee4ff
editorHoverWidget.foreground#24292f80
editorHoverWidget.highlightForeground#218bff
editorIndentGuide.background#24292f00
editorInfo.background#f6f8fa
editorInfo.border#0969da4d
editorInfo.foreground#0969da
editorInlayHint.background#f6f8fa
editorInlayHint.foreground#24292f66
editorInlayHint.parameterForeground#0969da80
editorInlayHint.typeForeground#0969da80
editorLightBulb.foreground#9a6700
editorLightBulbAutoFix.foreground#218bff80
editorLineNumber.activeForeground#218bff
editorLineNumber.foreground#24292f80
editorLink.activeForeground#0969da
editorMarkerNavigation.background#f6f8fa
editorMarkerNavigationError.headerBackground#f7993966
editorMarkerNavigationInfo.background#0969da
editorMarkerNavigationInfo.headerBackground#f6f8fa
editorOverviewRuler.addedForeground#0969da
editorOverviewRuler.background#f6f8fa
editorOverviewRuler.border#218bff80
editorOverviewRuler.commonContentforeground#24292f
editorOverviewRuler.currentContentForeground#218bff80
editorOverviewRuler.deletedForeground#9a670080
editorOverviewRuler.findMatchForeground#218bff80
editorOverviewRuler.incomingContentforeground#24292f
editorOverviewRuler.infoForeground#0969da80
editorOverviewRuler.modifiedForeground#218bff80
editorOverviewRuler.rangeHighlightForeground#218bff33
editorOverviewRuler.selectionHighlightForeground#218bff80
editorOverviewRuler.wordHighlightForeground#218bff80
editorOverviewRuler.wordHighlightStrongForeground#218bff80
editorPane.background#d8dee4ff
editorRuler.foreground#218bff80
editorStickyScroll.background#f6f8fa
editorStickyScrollHover.background#218bff4d
editorSuggestWidget.background#f6f8fa
editorSuggestWidget.border#d8dee4ff
editorSuggestWidget.focusHighlightforeground#24292f
editorSuggestWidget.foreground#24292f
editorSuggestWidget.highlightforeground#24292f
editorSuggestWidget.selectedBackground#d8dee4ff
editorSuggestWidget.selectedforeground#24292f
editorSuggestWidget.selectedIconforeground#24292f
editorSuggestWidgetStatus.foreground#0969da
editorUnicodeHighlight.background#218bff80
editorUnicodeHighlight.border#218bff80
editorUnnecessaryCode.border#d8dee4ff
editorWarning.foreground#f7993966
editorWhitespace.foreground#ff80c866
editorWidget.background#f6f8fa
editorWidget.border#d8dee4ff
editorWidget.foreground#24292f
editorWidget.resizeBorder#218bff80
errorForeground#f7993966
extensionBadge.remoteBackground#218bff80
extensionButton.prominentBackground#218bff80
extensionButton.prominentforeground#24292f
extensionButton.prominentHoverBackground#218bff99
extensionIcon.preReleaseForeground#f7993966
extensionIcon.sponsorForeground#c297ff66
extensionIcon.starForeground#9a6700
extensionIcon.verifiedForeground#0969da
focusBorder#f6f8fa80
foreground#24292f80
gitDecoration.addedResourceForeground#218bff80
gitDecoration.conflictingResourceForeground#b35900
gitDecoration.deletedResourceForeground#f7993966
gitDecoration.modifiedResourceForeground#0969da
gitDecoration.renamedResourceforeground#24292f
gitDecoration.stageDeletedResourceForeground#0969da80
gitDecoration.stageModifiedResourceForeground#218bff
gitDecoration.submoduleResourceForeground#57606a
gitDecoration.untrackedResourceforeground#24292f
icon.foreground#24292f80
input.background#218bff4d
input.border#218bff66
input.foreground#24292f
input.placeholderForeground#24292f
inputOption.activeBackground#d8dee4ff
inputOption.activeBorder#d8dee4ff
inputOption.activeForeground#24292f
inputOption.hoverBackground#24292f4d
inputValidation.infoBorder#0969da80
inputValidation.infoForeground#0969da80
inputValidation.warningBackground#0969da80
inputValidation.warningBorder#b3590080
inputValidation.warningForeground#b3590080
interactive.activeCodeBorder#9a6700b3
interactive.inactiveCodeBorder#218bff4d
issues.closed#b3590080
issues.newIssueDecoration#24292f
issues.open#218bff
keybindingLabel.background#f6f8fa
keybindingLabel.border#218bff80
keybindingLabel.bottomBorder#d8dee4ff
keybindingLabel.foreground#24292f
keybindingTable.headerBackground#218bff33
list.activeSelectionBackground#d8dee4ff
list.activeSelectionforeground#24292f
list.activeSelectionIconForeground#218bff
list.deemphasizedForeground#9a6700
list.dropBackground#218bff80
list.errorForeground#f7993966
list.filterMatchBackground#218bff66
list.filterMatchBorder#218bff99
list.focusAndSelectionOutline#218bff80
list.focusBackground#218bff80
list.focusforeground#24292f80
list.focusHighlightForeground#218bff80
list.focusOutline#218bff80
list.highlightforeground#24292f
list.hoverBackground#218bff4d
list.hoverforeground#24292f
list.inactiveFocusBackground#6e778180
list.inactiveFocusOutline#218bffe6
list.inactiveSelectionBackground#218bff4d
list.inactiveSelectionforeground#24292f
list.inactiveSelectionIconForeground#218bff
list.warningForeground#f7993966
listFilterWidget.background#0969da80
listFilterWidget.noMatchesOutline#6e778180
listFilterWidget.outline#0969da66
listFilterWidget.shadow#d8dee4ff
menu.background#f6f8fa
menu.border#d8dee4ff
menu.foreground#24292f
menu.selectionBackground#218bff80
menu.selectionBorder#218bff80
menu.selectionforeground#24292f
menu.separatorBackground#d8dee4ff
menubar.selectionBackground#218bff80
menubar.selectionBorder#218bff
menubar.selectionForeground#24292f
merge.border#d8dee4ff
merge.commonContentBackground#218bff80
merge.commonHeaderBackground#218bff80
merge.incomingContentBackground#218bff80
merge.incomingHeaderBackground#218bff80
mergeEditor.change.background#f6f8fa
mergeEditor.change.word.background#f6f8fa
mergeEditor.conflict.handled.minimapOverViewRuler#218bff80
mergeEditor.conflict.handledFocused.border#d8dee4ff
mergeEditor.conflict.handledUnfocused.border#218bff80
mergeEditor.conflict.unhandled.minimapOverViewRuler#0969da
mergeEditor.conflict.unhandledFocused.border#9a670080
mergeEditor.conflict.unhandledUnfocused.border#d8dee4ff
minimap.errorHighlight#f7993966
minimap.findMatchHighlight#218bff80
minimap.foregroundOpacity#24292f
minimap.selectionHighlight#218bff80
minimap.selectionOccurrenceHighlight#218bffcd
minimap.warningHighlight#f7993966
minimapGutter.addedBackground#0969dab3
minimapGutter.deletedBackground#f7993966
minimapGutter.modifiedBackground#0969da
minimapSlider.activeBackground#24292f
minimapSlider.background#218bff4d
minimapSlider.hoverBackground#218bff80
notebook.cellBorderColor#d8dee4ff
notebook.cellEditorBackground#f6f8fa
notebook.cellHoverBackground#57606a
notebook.cellInsertionIndicator#218bff
notebook.cellToolbarSeparator#d8dee4ff
notebook.editorBackground#f6f8fa
notebook.focusedCellBorder#218bff80
notebook.focusedEditorborder#d8dee4ff
notebook.inactiveFocusedCellBorder#218bff80
notebook.inactiveSelectedCellBorder#d8dee4ff
notebook.outputContainerBackgroundColor#f6f8fa
notebook.outputContainerBorderColor#d8dee4ff
notebook.selectedCellBackground#218bff4d
notebook.selectedCellBorder#218bff4d
notebook.symbolHighlightBackground#218bff4d
notebookScrollbarSlider.activeBackground#24292f
notebookScrollbarSlider.background#218bff80
notebookScrollbarSlider.hoverBackground#d8dee4ff
notebookStatusErrorIcon.foreground#f7993966
notebookStatusRunningIcon.foreground#0969da
notebookStatusSuccessIcon.foreground#218bff
notificationCenter.border#d8dee4ff
notificationCenterHeader.background#f6f8fa
notificationCenterHeader.foreground#24292f
notificationLink.foreground#0969da
notifications.background#f6f8fa
notifications.border#d8dee4ff
notifications.foreground#24292f
notificationsInfoIcon.foreground#0969da
notificationsWarningIcon.foreground#0969da
notificationToast.border#d8dee4ff
panel.background#f6f8fa
panel.border#d8dee4ff
panel.dropBorder#d8dee4ff
panelInput.border#0969da
panelSection.border#f7993966
panelSection.dropBackground#f6f8fa
panelSectionHeader.background#f6f8fa
panelSectionHeader.border#d8dee4ff
panelSectionHeader.foreground#24292f
panelTitle.activeBorder#218bff80
panelTitle.activeforeground#24292f
panelTitle.inactiveforeground#24292f
peekView.border#9a6700b3
peekViewEditor.background#f6f8fa
peekViewEditor.matchHighlightBackground#218bff66
peekViewEditor.matchHighlightBorder#218bff66
peekViewEditorGutter.background#f6f8fa
peekViewResult.background#f6f8fa
peekViewResult.fileforeground#24292f
peekViewResult.lineforeground#24292f
peekViewResult.matchHighlightBackground#218bff66
peekViewResult.selectionBackground#218bff66
peekViewResult.selectionForeground#218bff
peekViewTitle.background#218bff80
peekViewTitleDescription.foreground#f7993966
peekViewTitleLabel.foreground#218bff80
pickerGroup.border#218bff80
pickerGroup.foreground#24292f
ports.iconRunningProcessForeground#f7993966
problemsErrorIcon.foreground#218bff66
problemsInfoIcon.foreground#0969da80
progressBar.background#218bff
pullRequests.notification#0969da80
quickInput.background#f6f8fa
quickInput.foreground#24292f
quickInputList.focusBackground#218bff80
quickInputList.focusforeground#24292f
quickInputList.focusIconForeground#218bff80
quickInputTitle.background#24292f
sash.hoverBorder#218bff80
scm.providerborder#d8dee4ff
scrollbar.shadow#d8dee4ff
scrollbarSlider.activeBackground#d8dee4ff
scrollbarSlider.background#218bff80
scrollbarSlider.hoverbackground#24292f
searchEditor.findMatchBackground#d8dee4ff
searchEditor.findMatchBorder#218bff
searchEditor.textInputborder#d8dee4ff
selection.background#218bff80
settings.checkboxBackground#d8dee4ff
settings.checkboxBorder#d8dee4ff
settings.checkboxForeground#24292f80
settings.dropdownBackground#d8dee4ff
settings.dropdownBorder#d8dee4ff
settings.dropdownForeground#24292f80
settings.dropdownListBorder#d8dee4ff
settings.focusedRowBackground#218bff33
settings.focusedRowBorder#218bff4d
settings.headerBorder#d8dee4ff
settings.headerForeground#218bff80
settings.modifiedItemIndicator#f7993966
settings.numberInputBackground#f6f8fa
settings.numberInputBorder#d8dee4ff
settings.numberInputForeground#24292f
settings.rowHoverBackground#d8dee4ff
settings.sashBorder#d8dee4ff
settings.textInputBackground#f6f8fa
settings.textInputBorder#d8dee4ff
settings.textInputForeground#24292f80
sideBar.background#f6f8fa
sideBar.border#d8dee4ff
sideBar.dropBackground#d8dee4ff
sideBar.foreground#24292f80
sideBarSectionHeader.background#f6f8fa
sideBarSectionHeader.border#d8dee4ff
sideBarSectionHeader.foreground#24292fb3
sideBarTitle.foreground#24292f80
sideBySideEditor.horizontalBorder#218bff
sideBySideEditor.verticalBorder#218bff
statusBar.background#f6f8fa
statusBar.border#d8dee4ff
statusBar.debuggingBorder#c297ff66
statusBar.debuggingforeground#24292f
statusBar.focusborder#d8dee4ff
statusBar.foreground#24292f
statusBar.noFolderforeground#24292f
statusBarItem.activeBackground#f6f8fa
statusBarItem.compactHoverBackground#f6f8fa
statusBarItem.focusborder#d8dee4ff
statusBarItem.hoverBackground#218bff80
statusBarItem.prominentBackground#f6f8fa
statusBarItem.prominentForeground#218bff
statusBarItem.remoteBackground#218bff80
statusBarItem.remoteforeground#24292f
statusBarItem.settingsProfilesBackground#f6f8fa
statusBarItem.settingsProfilesforeground#24292f
statusBarItem.warningBackground#0969da80
statusBarItem.warningForeground#0969da80
symbolIcon.arrayForeground#0969da
symbolIcon.booleanForeground#c297ff66
symbolIcon.classForeground#218bff
symbolIcon.colorForeground#218bff
symbolIcon.constantForeground#9a6700
symbolIcon.constructorForeground#8250df
symbolIcon.enumeratorForeground#b35900
symbolIcon.enumeratorMemberForeground#218bff
symbolIcon.eventForeground#bf3989
symbolIcon.fieldForeground#f7993966
symbolIcon.fileForeground#0969da
symbolIcon.folderForeground#218bff80
symbolIcon.functionForeground#8250df
symbolIcon.interfaceForeground#b35900
symbolIcon.keyForeground#b35900
symbolIcon.keywordForeground#9a6700
symbolIcon.methodForeground#bf3989
symbolIcon.moduleForeground#b35900
symbolIcon.namespaceForeground#bf8700
symbolIcon.nullForeground#24292f
symbolIcon.numberForeground#b35900
symbolIcon.objectForeground#dd7815
symbolIcon.operatorForeground#8250df
symbolIcon.packageForeground#bf8700
symbolIcon.propertyforeground#24292f
symbolIcon.referenceForeground#57606a
symbolIcon.snippetForeground#f7993966
symbolIcon.stringForeground#afb8c133
symbolIcon.structForeground#54aeff66
symbolIcon.textForeground#54aeff66
symbolIcon.typeParameterForeground#b35900
symbolIcon.unitForeground#c297ff66
symbolIcon.variableForeground#ff80c866
tab.activeBackground#218bff33
tab.activeBorder#218bff80
tab.activeBorderTop#218bff
tab.activeForeground#218bff80
tab.activeModifiedBorder#218bff80
tab.border#218bff80
tab.hoverBackground#f6f8fa
tab.hoverBorder#bf870080
tab.hoverforeground#24292fcd
tab.inactiveBackground#f6f8fa80
tab.inactiveForeground#57606a80
tab.inactiveModifiedBorder#218bff80
tab.lastPinnedborder#d8dee4ff
tab.unfocusedActiveBackground#218bff33
tab.unfocusedActiveBorder#218bff80
tab.unfocusedActiveBorderTop#218bff
tab.unfocusedActiveForeground#218bff80
tab.unfocusedActiveModifiedBorder#f7993966
tab.unfocusedHoverBackground#d8dee4ff
tab.unfocusedHoverBorder#218bff80
tab.unfocusedHoverforeground#24292fcd
tab.unfocusedInactiveBackground#f6f8fa
tab.unfocusedInactiveForeground#57606a80
tab.unfocusedInactiveModifiedBorder#f7993966
terminal.ansiBlack#24292fe6
terminal.ansiBlue#0969da
terminal.ansiBrightBlack#57606a
terminal.ansiBrightBlue#218bff
terminal.ansiBrightCyan#3192aa
terminal.ansiBrightGreen#0969da
terminal.ansiBrightMagenta#a475f9
terminal.ansiBrightRed#8a4600
terminal.ansiBrightWhite#8c959f
terminal.ansiBrightYellow#633c01
terminal.ansiCyan#1b7c83
terminal.ansiGreen#0550ae
terminal.ansiMagenta#8250df
terminal.ansiRed#b35900
terminal.ansiWhite#6e7781
terminal.ansiYellow#4d2d00
terminal.background#f6f8fa
terminal.border#d8dee4ff
terminal.dropBackground#218bff4d
terminal.findMatchBackground#218bff4d
terminal.findMatchBorder#218bff4d
terminal.findMatchHighlightBackground#0969da33
terminal.findMatchHighlightBorder#9a670033
terminal.inactiveSelectionBackground#9a67004d
terminal.selectionBackground#218bff80
terminal.selectionForeground#24292f
terminal.tab.activeBorder#218bff
terminalCommandDecoration.defaultBackground#d8dee4ff
terminalCommandDecoration.successBackground#218bff80
terminalCursor.background#0969da33
terminalCursor.foreground#0969da
terminalOverviewRuler.cursorForeground#218bff
terminalOverviewRuler.findMatchForeground#218bff
termnal.foreground#57606a4d
testing.iconErrored#f7993966
testing.iconFailed#f7993966
testing.iconPassed#218bff
testing.iconQueued#9a6700
testing.iconSkipped#f7993966
testing.iconUnset#f7993966
testing.message.error.decorationForeground#f7993966
testing.message.info.decorationForeground#0969da80
testing.message.info.lineBackground#0969da
testing.peekBorder#d8dee4ff
testing.peekHeaderBackground#f7993966
testing.runAction#0969da
textBlockQuote.background#218bff
textBlockQuote.border#d8dee4ff
textCodeBlock.background#f6f8fa
textLink.activeForeground#0969da
textLink.foreground#0969da
textPreformat.foreground#24292f
textSeparator.foreground#24292f
titleBar.activeBackground#f6f8fa
titleBar.activeForeground#24292f
titleBar.border#0969da80
titleBar.inactiveBackground#f6f8fa
titleBar.inactiveForeground#24292f
toolbar.activeBackground#f6f8fa
toolbar.hoverBackground#f6f8fa
toolbar.hoverOutline#57606a
tree.indentGuidesStroke#218bff80
tree.tableColumnsborder#d8dee4ff
tree.tableOddRowsBackground#d8dee4ff
walkThrough.embeddedEditorBackground#d8dee4ff
welcomePage.background#f6f8fa
welcomePage.progress.background#f6f8fa
welcomePage.progress.foreground#218bff
welcomePage.tileBackground#d8dee4ff
welcomePage.tileHoverBackground#f6f8fa
welcomePage.tileShadow#57606a
widget.shadow#d8dee4ff
window.activeBorder#24292f
window.inactiveBorder#24292f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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