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 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#2da44e80
activityBar.activeFocusBorder#2da44e
activityBar.background#f6f8fa
activityBar.border#d8dee4ff
activityBar.dropBorder#d8dee4ff
activityBar.foreground#2da44ecd
activityBar.inactiveForeground#24292f80
activityBarBadge.background#2da44e
activityBarBadge.foreground#24292f
badge.foreground#24292f
banner.background#2da44e80
banner.foreground#24292f
banner.iconForeground#2da44e80
breadcrumb.activeSelectionforeground#24292f
breadcrumb.background#f6f8fa
breadcrumb.focusforeground#24292f
breadcrumb.foreground#24292f80
breadcrumbPicker.background#f6f8fa
button.background#2da44e80
button.border#2da44e4d
button.foreground#24292f
button.hoverBackground#2da44e4d
button.secondaryBackground#2da44e80
button.secondaryforeground#24292f
button.secondaryHoverBackground#2da44e4d
button.separator#2da44e4d
charts.blue#54aeff66
charts.foreground#24292f
charts.green#2da44e
charts.lines#57606a
charts.orange#fb8f4466
charts.purple#2da44e
charts.red#ff818266
charts.yellow#9a6700
checkbox.background#f6f8fa
checkbox.border#d8dee4ff
checkbox.foreground#24292f
commandCenter.activeBackground#2da44e80
commandCenter.activeforeground#24292f
commandCenter.background#f6f8fa
commandCenter.border#d8dee4ff
commandCenter.foreground#24292f
contrastActiveborder#d8dee4ff
contrastBorder#f6f8fa
debugConsole.errorForeground#ff818266
debugConsole.infoForeground#0969da
debugConsole.sourceForeground#24292f
debugConsole.warningForeground#bc4c00
debugConsoleInputIcon.foreground#2da44e
debugExceptionWidget.background#f6f8fa
debugExceptionWidget.border#d8dee4ff
debugIcon.breakpointCurrentStackframeForeground#2da44e
debugIcon.breakpointDisabledForeground#6e7781
debugIcon.breakpointForeground#bc4c00
debugIcon.breakpointStackframeForeground#24292f
debugIcon.breakpointUnverifiedForeground#9a6700
debugIcon.continueForeground#2da44e
debugIcon.disconnectForeground#cf222e
debugIcon.pauseForeground#0969da
debugIcon.restartForeground#0969da80
debugIcon.startForeground#0969da80
debugIcon.stepBackForeground#0969da80
debugIcon.stepIntoForeground#0969da80
debugIcon.stepOutForeground#0969da80
debugIcon.stopForeground#cf222e
debugTokenExpression.boolean#9a670080
debugTokenExpression.error#cf222e80
debugTokenExpression.name#0969da80
debugTokenExpression.number#bc4c0080
debugTokenExpression.string#57606a80
debugTokenExpression.value#bf398980
debugView.exceptionLabelBackground#d8dee4ff
debugView.exceptionLabelforeground#24292f
debugView.stateLabelBackground#d8dee4ff
debugView.stateLabelforeground#24292f
debugView.valueChangedHighlight#2da44e80
descriptionForeground#24292f
diffEditor.border#d8dee4ff
diffEditor.diagonalFill#24292f
diffEditor.insertedLineBackground#2da44e80
diffEditor.insertedTextBackground#2da44e80
diffEditor.insertedTextBorder#2da44e80
diffEditorGutter.insertedLineBackground#2da44e80
diffEditorOverview.insertedForeground#2da44e80
disabledForeground#57606a
dropdown.background#f6f8fa
dropdown.border#d8dee4ff
dropdown.foreground#2da44e80
dropdown.listBackground#d8dee4ff
editor.background#f6f8fa
editor.findMatchBackground#2da44e33
editor.findMatchBorder#2da44e66
editor.findMatchHighlightBackground#bf870033
editor.findMatchHighlightBorder#bf870033
editor.findRangeHighlightBackground#2da44eb3
editor.findRangeHighlightBorder#2da44eb3
editor.focusedStackFrameHighlightBackground#2da44e80
editor.foldBackground#d8dee4ff
editor.foreground#24292f
editor.hoverHighlightBackground#2da44e66
editor.inactiveSelectionBackground#d8dee4ff
editor.inlineValuesBackground#2da44e80
editor.inlineValuesforeground#24292f
editor.lineHighlightBackground#2da44e33
editor.lineHighlightBorder#2da44e33
editor.linkedEditingBackground#9a670033
editor.rangeHighlightBackground#2da44e4d
editor.rangeHighlightBorder#2da44e80
editor.selectionBackground#d8dee4ff
editor.selectionHighlightBackground#2da44e4d
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#2da44e80
editor.wordHighlightBorder#d8dee4ff
editor.wordHighlightStrongBackground#2da44e33
editor.wordHighlightStrongBorder#d8dee4ff
editorBracketHighlight.foreground1#bf3989
editorBracketHighlight.foreground2#2da44e
editorBracketHighlight.foreground3#8250df
editorBracketHighlight.foreground4#cf222e
editorBracketHighlight.foreground5#9a6700
editorBracketHighlight.foreground6#bc4c00
editorBracketHighlight.unexpectedBracket.foreground#ff80c866
editorBracketMatch.background#f6f8fa
editorBracketMatch.border#d8dee4ff
editorBracketPairGuide.activeBackground1#bf3989b3
editorBracketPairGuide.activeBackground2#2da44e80
editorBracketPairGuide.activeBackground3#8250dfb3
editorBracketPairGuide.activeBackground4#cf222eb3
editorBracketPairGuide.activeBackground5#9a6700b3
editorBracketPairGuide.activeBackground6#bc4c00b3
editorBracketPairGuide.background1#bf3989b3
editorBracketPairGuide.background2#2da44e80
editorBracketPairGuide.background3#8250dfb3
editorBracketPairGuide.background4#cf222eb3
editorBracketPairGuide.background5#9a6700b3
editorBracketPairGuide.background6#bc4c00b3
editorCodeLens.foreground#24292f
editorCommentsWidget.rangeActiveBackground#d8dee4ff
editorCommentsWidget.rangeActiveborder#d8dee4ff
editorCommentsWidget.rangeBackground#2da44e
editorCommentsWidget.rangeborder#d8dee4ff
editorCommentsWidget.resolvedBorder#d8dee4ff
editorCommentsWidget.unresolvedBorder#d8dee4ff
editorCursor.background#f6f8fa
editorCursor.foreground#1a7f37
editorError.border#ff818266
editorGhostText.background#2da44eb3
editorGhostText.border#2da44e80
editorGhostText.foreground#0969da
editorGroup.border#d8dee4ff
editorGroup.dropBackground#2da44e4d
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#cf222e80
editorGutter.foldingControlforeground#24292f
editorGutter.modifiedBackground#1a7f37
editorHint.border#2da44e80
editorHint.foreground#0969da80
editorHoverWidget.background#f6f8fa
editorHoverWidget.border#d8dee4ff
editorHoverWidget.foreground#24292f80
editorHoverWidget.highlightForeground#2da44e
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#2da44e80
editorLineNumber.activeForeground#2da44e
editorLineNumber.foreground#24292f80
editorLink.activeForeground#0969da
editorMarkerNavigation.background#f6f8fa
editorMarkerNavigationError.headerBackground#ff818266
editorMarkerNavigationInfo.background#0969da
editorMarkerNavigationInfo.headerBackground#f6f8fa
editorOverviewRuler.addedForeground#0969da
editorOverviewRuler.background#f6f8fa
editorOverviewRuler.border#2da44e80
editorOverviewRuler.commonContentforeground#24292f
editorOverviewRuler.currentContentForeground#2da44e80
editorOverviewRuler.deletedForeground#9a670080
editorOverviewRuler.findMatchForeground#2da44e80
editorOverviewRuler.incomingContentforeground#24292f
editorOverviewRuler.infoForeground#0969da80
editorOverviewRuler.modifiedForeground#2da44e80
editorOverviewRuler.rangeHighlightForeground#2da44e33
editorOverviewRuler.selectionHighlightForeground#2da44e80
editorOverviewRuler.wordHighlightForeground#2da44e80
editorOverviewRuler.wordHighlightStrongForeground#2da44e80
editorPane.background#d8dee4ff
editorRuler.foreground#2da44e80
editorStickyScroll.background#f6f8fa
editorStickyScrollHover.background#2da44e4d
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#2da44e80
editorUnicodeHighlight.border#2da44e80
editorUnnecessaryCode.border#d8dee4ff
editorWarning.foreground#ff818266
editorWhitespace.foreground#ff80c866
editorWidget.background#f6f8fa
editorWidget.border#d8dee4ff
editorWidget.foreground#24292f
editorWidget.resizeBorder#2da44e80
errorForeground#ff818266
extensionBadge.remoteBackground#2da44e80
extensionButton.prominentBackground#2da44e80
extensionButton.prominentforeground#24292f
extensionButton.prominentHoverBackground#2da44e99
extensionIcon.preReleaseForeground#fb8f4466
extensionIcon.sponsorForeground#c297ff66
extensionIcon.starForeground#9a6700
extensionIcon.verifiedForeground#0969da
focusBorder#f6f8fa80
foreground#24292f80
gitDecoration.addedResourceForeground#2da44e80
gitDecoration.conflictingResourceForeground#bc4c00
gitDecoration.deletedResourceForeground#ff818266
gitDecoration.modifiedResourceForeground#0969da
gitDecoration.renamedResourceforeground#24292f
gitDecoration.stageDeletedResourceForeground#0969da80
gitDecoration.stageModifiedResourceForeground#2da44e
gitDecoration.submoduleResourceForeground#57606a
gitDecoration.untrackedResourceforeground#24292f
icon.foreground#24292f80
input.background#2da44e4d
input.border#2da44e66
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#cf222e80
inputValidation.warningForeground#cf222e80
interactive.activeCodeBorder#9a6700b3
interactive.inactiveCodeBorder#2da44e4d
issues.closed#cf222e80
issues.newIssueDecoration#24292f
issues.open#2da44e
keybindingLabel.background#f6f8fa
keybindingLabel.border#2da44e80
keybindingLabel.bottomBorder#d8dee4ff
keybindingLabel.foreground#24292f
keybindingTable.headerBackground#2da44e33
list.activeSelectionBackground#d8dee4ff
list.activeSelectionforeground#24292f
list.activeSelectionIconForeground#2da44e
list.deemphasizedForeground#9a6700
list.dropBackground#2da44e80
list.errorForeground#ff818266
list.filterMatchBackground#2da44e66
list.filterMatchBorder#2da44e99
list.focusAndSelectionOutline#2da44e80
list.focusBackground#2da44e80
list.focusforeground#24292f80
list.focusHighlightForeground#2da44e80
list.focusOutline#2da44e80
list.highlightforeground#24292f
list.hoverBackground#2da44e4d
list.hoverforeground#24292f
list.inactiveFocusBackground#6e778180
list.inactiveFocusOutline#2da44ee6
list.inactiveSelectionBackground#2da44e4d
list.inactiveSelectionforeground#24292f
list.inactiveSelectionIconForeground#2da44e
list.warningForeground#fb8f4466
listFilterWidget.background#0969da80
listFilterWidget.noMatchesOutline#6e778180
listFilterWidget.outline#0969da66
listFilterWidget.shadow#d8dee4ff
menu.background#f6f8fa
menu.border#d8dee4ff
menu.foreground#24292f
menu.selectionBackground#2da44e80
menu.selectionBorder#2da44e80
menu.selectionforeground#24292f
menu.separatorBackground#d8dee4ff
menubar.selectionBackground#2da44e80
menubar.selectionBorder#2da44e
menubar.selectionForeground#24292f
merge.border#d8dee4ff
merge.commonContentBackground#2da44e80
merge.commonHeaderBackground#2da44e80
merge.incomingContentBackground#2da44e80
merge.incomingHeaderBackground#2da44e80
mergeEditor.change.background#f6f8fa
mergeEditor.change.word.background#f6f8fa
mergeEditor.conflict.handled.minimapOverViewRuler#2da44e80
mergeEditor.conflict.handledFocused.border#d8dee4ff
mergeEditor.conflict.handledUnfocused.border#2da44e80
mergeEditor.conflict.unhandled.minimapOverViewRuler#0969da
mergeEditor.conflict.unhandledFocused.border#9a670080
mergeEditor.conflict.unhandledUnfocused.border#d8dee4ff
minimap.errorHighlight#ff818266
minimap.findMatchHighlight#2da44e80
minimap.foregroundOpacity#24292f
minimap.selectionHighlight#2da44e80
minimap.selectionOccurrenceHighlight#2da44ecd
minimap.warningHighlight#ff818266
minimapGutter.addedBackground#0969dab3
minimapGutter.deletedBackground#ff818266
minimapGutter.modifiedBackground#0969da
minimapSlider.activeBackground#24292f
minimapSlider.background#2da44e4d
minimapSlider.hoverBackground#2da44e80
notebook.cellBorderColor#d8dee4ff
notebook.cellEditorBackground#f6f8fa
notebook.cellHoverBackground#57606a
notebook.cellInsertionIndicator#2da44e
notebook.cellToolbarSeparator#d8dee4ff
notebook.editorBackground#f6f8fa
notebook.focusedCellBorder#2da44e80
notebook.focusedEditorborder#d8dee4ff
notebook.inactiveFocusedCellBorder#2da44e80
notebook.inactiveSelectedCellBorder#d8dee4ff
notebook.outputContainerBackgroundColor#f6f8fa
notebook.outputContainerBorderColor#d8dee4ff
notebook.selectedCellBackground#2da44e4d
notebook.selectedCellBorder#2da44e4d
notebook.symbolHighlightBackground#2da44e4d
notebookScrollbarSlider.activeBackground#24292f
notebookScrollbarSlider.background#2da44e80
notebookScrollbarSlider.hoverBackground#d8dee4ff
notebookStatusErrorIcon.foreground#ff818266
notebookStatusRunningIcon.foreground#0969da
notebookStatusSuccessIcon.foreground#2da44e
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#ff818266
panelSection.dropBackground#f6f8fa
panelSectionHeader.background#f6f8fa
panelSectionHeader.border#d8dee4ff
panelSectionHeader.foreground#24292f
panelTitle.activeBorder#2da44e80
panelTitle.activeforeground#24292f
panelTitle.inactiveforeground#24292f
peekView.border#9a6700b3
peekViewEditor.background#f6f8fa
peekViewEditor.matchHighlightBackground#2da44e66
peekViewEditor.matchHighlightBorder#2da44e66
peekViewEditorGutter.background#f6f8fa
peekViewResult.background#f6f8fa
peekViewResult.fileforeground#24292f
peekViewResult.lineforeground#24292f
peekViewResult.matchHighlightBackground#2da44e66
peekViewResult.selectionBackground#2da44e66
peekViewResult.selectionForeground#2da44e
peekViewTitle.background#2da44e80
peekViewTitleDescription.foreground#ff818266
peekViewTitleLabel.foreground#2da44e80
pickerGroup.border#2da44e80
pickerGroup.foreground#24292f
ports.iconRunningProcessForeground#ff818266
problemsErrorIcon.foreground#2da44e66
problemsInfoIcon.foreground#0969da80
progressBar.background#2da44e
pullRequests.notification#0969da80
quickInput.background#f6f8fa
quickInput.foreground#24292f
quickInputList.focusBackground#2da44e80
quickInputList.focusforeground#24292f
quickInputList.focusIconForeground#2da44e80
quickInputTitle.background#24292f
sash.hoverBorder#2da44e80
scm.providerborder#d8dee4ff
scrollbar.shadow#d8dee4ff
scrollbarSlider.activeBackground#d8dee4ff
scrollbarSlider.background#2da44e80
scrollbarSlider.hoverbackground#24292f
searchEditor.findMatchBackground#d8dee4ff
searchEditor.findMatchBorder#2da44e
searchEditor.textInputborder#d8dee4ff
selection.background#2da44e80
settings.checkboxBackground#d8dee4ff
settings.checkboxBorder#d8dee4ff
settings.checkboxForeground#24292f80
settings.dropdownBackground#d8dee4ff
settings.dropdownBorder#d8dee4ff
settings.dropdownForeground#24292f80
settings.dropdownListBorder#d8dee4ff
settings.focusedRowBackground#2da44e33
settings.focusedRowBorder#2da44e4d
settings.headerBorder#d8dee4ff
settings.headerForeground#2da44e80
settings.modifiedItemIndicator#ff818266
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#2da44e
sideBySideEditor.verticalBorder#2da44e
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#2da44e80
statusBarItem.prominentBackground#f6f8fa
statusBarItem.prominentForeground#2da44e
statusBarItem.remoteBackground#2da44e80
statusBarItem.remoteforeground#24292f
statusBarItem.settingsProfilesBackground#f6f8fa
statusBarItem.settingsProfilesforeground#24292f
statusBarItem.warningBackground#0969da80
statusBarItem.warningForeground#0969da80
symbolIcon.arrayForeground#0969da
symbolIcon.booleanForeground#c297ff66
symbolIcon.classForeground#2da44e
symbolIcon.colorForeground#2da44e
symbolIcon.constantForeground#9a6700
symbolIcon.constructorForeground#8250df
symbolIcon.enumeratorForeground#1a7f37
symbolIcon.enumeratorMemberForeground#2da44e
symbolIcon.eventForeground#bf3989
symbolIcon.fieldForeground#ff818266
symbolIcon.fileForeground#0969da
symbolIcon.folderForeground#2da44e80
symbolIcon.functionForeground#8250df
symbolIcon.interfaceForeground#cf222e
symbolIcon.keyForeground#1a7f37
symbolIcon.keywordForeground#9a6700
symbolIcon.methodForeground#bf3989
symbolIcon.moduleForeground#1a7f37
symbolIcon.namespaceForeground#bf8700
symbolIcon.nullForeground#24292f
symbolIcon.numberForeground#bc4c00
symbolIcon.objectForeground#2da44e
symbolIcon.operatorForeground#8250df
symbolIcon.packageForeground#bf8700
symbolIcon.propertyforeground#24292f
symbolIcon.referenceForeground#57606a
symbolIcon.snippetForeground#ff818266
symbolIcon.stringForeground#afb8c133
symbolIcon.structForeground#54aeff66
symbolIcon.textForeground#4ac26b66
symbolIcon.typeParameterForeground#cf222e
symbolIcon.unitForeground#c297ff66
symbolIcon.variableForeground#ff80c866
tab.activeBackground#2da44e33
tab.activeBorder#2da44e80
tab.activeBorderTop#2da44e
tab.activeForeground#2da44e80
tab.activeModifiedBorder#2da44e80
tab.border#2da44e80
tab.hoverBackground#f6f8fa
tab.hoverBorder#bf870080
tab.hoverforeground#24292fcd
tab.inactiveBackground#f6f8fa80
tab.inactiveForeground#57606a80
tab.inactiveModifiedBorder#2da44e80
tab.lastPinnedborder#d8dee4ff
tab.unfocusedActiveBackground#2da44e33
tab.unfocusedActiveBorder#2da44e80
tab.unfocusedActiveBorderTop#2da44e
tab.unfocusedActiveForeground#2da44e80
tab.unfocusedActiveModifiedBorder#ff818266
tab.unfocusedHoverBackground#d8dee4ff
tab.unfocusedHoverBorder#2da44e80
tab.unfocusedHoverforeground#24292fcd
tab.unfocusedInactiveBackground#f6f8fa
tab.unfocusedInactiveForeground#57606a80
tab.unfocusedInactiveModifiedBorder#ff818266
terminal.ansiBlack#24292fe6
terminal.ansiBlue#0969da
terminal.ansiBrightBlack#57606a
terminal.ansiBrightBlue#218bff
terminal.ansiBrightCyan#3192aa
terminal.ansiBrightGreen#1a7f37
terminal.ansiBrightMagenta#a475f9
terminal.ansiBrightRed#a40e26
terminal.ansiBrightWhite#8c959f
terminal.ansiBrightYellow#633c01
terminal.ansiCyan#1b7c83
terminal.ansiGreen#116329
terminal.ansiMagenta#8250df
terminal.ansiRed#cf222e
terminal.ansiWhite#6e7781
terminal.ansiYellow#4d2d00
terminal.background#f6f8fa
terminal.border#d8dee4ff
terminal.dropBackground#2da44e4d
terminal.findMatchBackground#2da44e4d
terminal.findMatchBorder#2da44e4d
terminal.findMatchHighlightBackground#0969da33
terminal.findMatchHighlightBorder#9a670033
terminal.inactiveSelectionBackground#9a67004d
terminal.selectionBackground#2da44e80
terminal.selectionForeground#24292f
terminal.tab.activeBorder#2da44e
terminalCommandDecoration.defaultBackground#d8dee4ff
terminalCommandDecoration.successBackground#2da44e80
terminalCursor.background#1a7f3733
terminalCursor.foreground#1a7f37
terminalOverviewRuler.cursorForeground#2da44e
terminalOverviewRuler.findMatchForeground#2da44e
termnal.foreground#57606a4d
testing.iconErrored#ff818266
testing.iconFailed#ff818266
testing.iconPassed#2da44e
testing.iconQueued#9a6700
testing.iconSkipped#fb8f4466
testing.iconUnset#fb8f4466
testing.message.error.decorationForeground#ff818266
testing.message.info.decorationForeground#0969da80
testing.message.info.lineBackground#0969da
testing.peekBorder#d8dee4ff
testing.peekHeaderBackground#ff818266
testing.runAction#0969da
textBlockQuote.background#2da44e
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#2da44e80
tree.tableColumnsborder#d8dee4ff
tree.tableOddRowsBackground#d8dee4ff
walkThrough.embeddedEditorBackground#d8dee4ff
welcomePage.background#f6f8fa
welcomePage.progress.background#f6f8fa
welcomePage.progress.foreground#2da44e
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	#bc4c00	—
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	#1a7f37	—
keyword	#cf222e	—
storage, storage.type	#cf222e	—
storage.modifier.package, storage.modifier.import, storage.type.java	#bc4c00	—
string, string punctuation.section.embedded source	#0969da	—
support	#0969da	—
meta.property-name	#0969da	—
variable	#bc4c00	—
variable.other	#bc4c00	—
invalid.broken	#cf222e	italic
invalid.deprecated	#cf222e	italic
invalid.illegal	#cf222e	italic
invalid.unimplemented	#cf222e	italic
carriage-return	#cf222e	italic underline
message.error	#cf222e	—
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	#2da44e	bold
support.constant	#0969da	—
support.variable	#0969da	—
support.type.property-name.json	#2da44e	—
meta.module-reference	#0969da	—
punctuation.definition.list.end.markdown	#bc4c00	—
markup.heading, markup.heading entity.name	#0969da	bold
markup.quote	#2da44e	—
markup.italic	#bc4c00	italic
markup.bold	#bc4c00	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#0969da	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#cf222e	—
punctuation.section.embedded	#cf222e	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#2da44e	—
markup.changed, punctuation.definition.changed	#bc4c00	—
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	#cf222e	—
constant.other.reference.link, string.other.link	#0969da	underline
constant.language, constant.numeric	#cf222e
support.type.property-name	#8250df
string	#8250df
string.regexp, constant.character.escape	#24292f	—
string	#24292f	—
keyword	#0969da	—
support.type.property-name	#2da44e
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	#2da44e	—
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	#2da44e
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	#2da44e
keyword.other.DML.sql, source.sql.embedded.php, string.quoted.single.sql.php, string.quoted.single.php	#bc4c00
string.quoted.other.backtick.sql	#bc4c00
variable.other.property.js, entity.name.function.member	#bc4c00
punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js	#bc4c00
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	#2da44e
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	#bc4c00	—
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	#2da44e	—
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	#bc4c00	—
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	#2da44e	—
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	#cf222e	—
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}!`;
}