Solarized Chandrian

Name: Solarized Chandrian
Author: Jack Kenney

Publisher: Jack KenneyThemes in package: 3

A semantic solarized color theme

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Solarized Chandrian — Solarized Black Chandrian

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#eee8d5
activityBar.background#383b3d
activityBar.dropBorder#eee8d5
activityBar.foreground#eee8d5
activityBar.inactiveForeground#beb8a5
activityBarBadge.background#2B60C0
activityBarBadge.foreground#FFFFFF
background#383b3d
badge.background#2B60C0
badge.foreground#FFFFFF
banner.background#383b3d
banner.foreground#beb8a5
banner.iconForeground#eee8d5
breadcrumb.activeSelectionForeground#beb8a5
breadcrumb.background#1e1e1e
breadcrumb.focusForeground#beb8a5
breadcrumb.foreground#839496
breadcrumbPicker.background#252526
button.background#2B60C0
button.foreground#FFFFFF
button.hoverBackground#38B0FF
button.secondaryBackground#38B0FFCC
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#38B0FF
charts.blue#38B0FF
charts.foreground#beb8a5
charts.green#83B800
charts.lines#1e1e1e
charts.orange#F08040
charts.purple#A0A0F4
charts.red#FF7070
charts.yellow#F0A000
checkbox.background#252526
checkbox.border#252526
checkbox.foreground#eee8d5
debugConsole.errorForeground#FF60C0
debugConsole.infoForeground#38B0FF
debugConsole.sourceForeground#839496
debugConsole.warningForeground#F0A000
debugConsoleInputIcon.foreground#839496
debugExceptionWidget.background#FF707033
debugExceptionWidget.border#FF7070
debugIcon.breakpointCurrentStackframeForeground#F0A000
debugIcon.breakpointDisabledForeground#383b3d
debugIcon.breakpointForeground#FF7070
debugIcon.breakpointStackframeForeground#FF7070
debugIcon.breakpointUnverifiedForeground#383b3d
debugIcon.continueForeground#38B0FF
debugIcon.disconnectForeground#F08040
debugIcon.pauseForeground#38B0FF
debugIcon.restartForeground#83B800
debugIcon.startForeground#83B800
debugIcon.stepBackForeground#38B0FF
debugIcon.stepIntoForeground#38B0FF
debugIcon.stepOutForeground#38B0FF
debugIcon.stepOverForeground#38B0FF
debugIcon.stopForeground#F08040
debugTokenExpression.boolean#38B0FF
debugTokenExpression.error#F08040
debugTokenExpression.name#FF60C0
debugTokenExpression.number#83B800
debugTokenExpression.string#F08040
debugTokenExpression.value#839496
debugToolBar.background#252526
debugView.exceptionLabelBackground#FF7070
debugView.exceptionLabelForeground#beb8a5
debugView.stateLabelBackground#beb8a534
debugView.stateLabelForeground#beb8a5
debugView.valueChangedHighlight#38B0FF
descriptionForeground#beb8a5b3
diffEditor.diagonalFill#beb8a533
diffEditor.foreground#beb8a5
diffEditor.insertedTextBackground#83B80022
diffEditor.removedTextBackground#FF707022
diffEditorGutter.insertedLineBackground#83B80044
diffEditorGutter.removedLineBackground#FF707044
diffEditorOverview.insertedForeground#beb8a5
diffEditorOverview.removedForeground#beb8a5
disabledForeground#beb8a580
dropdown.background#383b3d
dropdown.border#555555
dropdown.foreground#ded8c5
dropdown.listBackground#252526
editor.background#1e1e1e
editor.findMatchBackground#31313e
editor.findMatchBorder#383848
editor.findMatchHighlightBackground#383848
editor.findMatchHighlightBorder#A0A0F4
editor.findRangeHighlightBackground#252526
editor.focusedStackFrameHighlightBackground#555555
editor.foldBackground#383b3d
editor.foreground#beb8a5
editor.guides.highlightActiveIndentation
editor.guides.indentation
editor.hoverHighlightBackground#555555
editor.inactiveSelectionBackground#38B0FF33
editor.inlineValuesBackground#F0A00033
editor.inlineValuesForeground#beb8a580
editor.lineHighlightBackground#252526
editor.lineHighlightBorder#383b3d
editor.linkedEditingBackground#FF70704d
editor.rangeHighlightBackground#555555
editor.selectionBackground#31313e
editor.selectionHighlightBackground#31313e
editor.selectionHighlightBorder#383848
editor.snippetFinalTabstopHighlightBackground#383b3d
editor.snippetFinalTabstopHighlightBorder#555555
editor.snippetTabstopHighlightBackground#383b3d
editor.snippetTabstopHighlightBorder#555555
editor.stackFrameHighlightBackground#F0A00033
editor.symbolHighlightBackground#F0804055
editor.wordHighlightBackground#31313e
editor.wordHighlightBorder#888883
editor.wordHighlightStrongBackground#31313e
editor.wordHighlightStrongBorder#888883
editorActiveLineNumber.foreground#839496
editorBracketHighlight.foreground1#F0A000
editorBracketHighlight.foreground2#FF60C0
editorBracketHighlight.foreground3#38B0FF
editorBracketHighlight.foreground4#F08040
editorBracketHighlight.foreground5#00BCB0
editorBracketHighlight.foreground6#A0A0F4
editorBracketHighlight.unexpectedBracket.foreground#FF7070cc
editorBracketMatch.background#555555
editorBracketMatch.border#888883
editorCodeLens.foreground#888883
editorCommentsWidget.rangeActiveBackground#38B0FF33
editorCommentsWidget.rangeActiveBorder#38B0FF66
editorCommentsWidget.rangeBackground#38B0FF33
editorCommentsWidget.rangeBorder#38B0FF66
editorCommentsWidget.resolvedBorder#beb8a580
editorCommentsWidget.unresolvedBorder#38B0FF
editorCursor.foreground#ded8c5
editorError.foreground#FF7070
editorGhostText.foreground#beb8a556
editorGroup.border#252526
editorGroup.dropBackground#383b3d80
editorGroup.dropIntoPromptBackground#252526
editorGroup.dropIntoPromptForeground#beb8a5
editorGroup.emptyBackground#383b3d
editorGroupHeader.border#55555588
editorGroupHeader.noTabsBackground#1e1e1e
editorGroupHeader.tabsBackground#383b3d
editorGroupHeader.tabsBorder#55555588
editorGroupHeader.tabsForeground#beb8a5
editorGutter.addedBackground#83B800
editorGutter.background#1e1e1e
editorGutter.border#1e1e1e
editorGutter.commentRangeForeground#555555
editorGutter.deletedBackground#FF7070
editorGutter.foldingControlForeground#beb8a5
editorGutter.modifiedBackground#F0A000
editorHint.foreground#beb8a5
editorHoverWidget.background#252526
editorHoverWidget.border#252526
editorHoverWidget.highlightForeground#38B0FF
editorHoverWidget.statusBarBackground#383b3d
editorIndentGuide.activeBackground#888883
editorIndentGuide.background#888883
editorInfo.background#383b3d
editorInfo.border#555555
editorInfo.foreground#38B0FF
editorInlayHint.background#555555
editorInlayHint.foreground#beb8a5cc
editorInlayHint.parameterBackground#555555
editorInlayHint.parameterForeground#beb8a5cc
editorInlayHint.typeBackground#555555
editorInlayHint.typeForeground#beb8a5cc
editorLightBulb.foreground#F0A000
editorLightBulbAutoFix.foreground#F08040
editorLineNumber.activeForeground#ded8c5
editorLineNumber.foreground#beb8a5
editorLink.activeForeground#F0A000
editorMarkerNavigation.background#1e1e1e
editorMarkerNavigationError.background#FF7070
editorMarkerNavigationError.headerBackground#FF70701a
editorMarkerNavigationInfo.background#38B0FF
editorMarkerNavigationInfo.headerBackground#38B0FF
editorMarkerNavigationWarning.background#F0A000
editorMarkerNavigationWarning.headerBackground#F0A0001a
editorOverviewRuler.addedForeground#83B800
editorOverviewRuler.border#383b3d
editorOverviewRuler.bracketMatchForeground#839496
editorOverviewRuler.commonContentForeground#beb8a566
editorOverviewRuler.currentContentForeground#00BCB080
editorOverviewRuler.deletedForeground#FF7070
editorOverviewRuler.errorForeground#F08040
editorOverviewRuler.findMatchForeground#F080407e
editorOverviewRuler.incomingContentForeground#38B0FF80
editorOverviewRuler.infoForeground#38B0FF
editorOverviewRuler.modifiedForeground#F0A000
editorOverviewRuler.rangeHighlightForeground#38B0FF99
editorOverviewRuler.selectionHighlightForeground#839496cc
editorOverviewRuler.warningForeground#F0A000
editorOverviewRuler.wordHighlightForeground#839496cc
editorOverviewRuler.wordHighlightStrongForeground#FF60C0cc
editorPane.background#1e1e1e
editorRuler.foreground#383b3d
editorSuggestWidget.background#252526
editorSuggestWidget.border#1e1e1e
editorSuggestWidget.focusHighlightForeground#38B0FF
editorSuggestWidget.foreground#beb8a5
editorSuggestWidget.highlightForeground#00BCB0
editorSuggestWidget.selectedBackground#31313e
editorSuggestWidget.selectedIconForeground#beb8a5
editorSuggestWidgetStatus.foreground#beb8a580
editorUnicodeHighlight.background#F0A00026
editorUnicodeHighlight.border#F0A000
editorUnnecessaryCode.opacity#888883aa
editorWarning.foreground#F0A000
editorWhitespace.foreground#888883
editorWidget.background#383b3d
editorWidget.border#555555
editorWidget.foreground#beb8a5
errorForeground#F08040
extensionBadge.remoteBackground#2B60C0
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#38B0FFCC
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#2B60C0
extensionIcon.preReleaseForeground#83B800
extensionIcon.starForeground#F08040
extensionIcon.verifiedForeground#38B0FF
focusBorder#888883
foreground#beb8a5
gitDecoration.addedResourceForeground#83B800
gitDecoration.conflictingResourceForeground#FF7070
gitDecoration.deletedResourceForeground#FF7070
gitDecoration.ignoredResourceForeground#839496
gitDecoration.modifiedResourceForeground#F0A000
gitDecoration.renamedResourceForeground#F08040
gitDecoration.stageDeletedResourceForeground#FF7070
gitDecoration.stageModifiedResourceForeground#F0A000
gitDecoration.submoduleResourceForeground#38B0FF
gitDecoration.untrackedResourceForeground#83B800
gitlens.closedAutolinkedIssueIconColor#A0A0F4
gitlens.closedPullRequestIconColor#FF7070
gitlens.decorations.addedForegroundColor#83B800
gitlens.decorations.branchAheadForegroundColor#83B800
gitlens.decorations.branchBehindForegroundColor#F08040
gitlens.decorations.branchDivergedForegroundColor#F0A000
gitlens.decorations.branchMissingUpstreamForegroundColor#F08040
gitlens.decorations.branchUnpublishedForegroundColor#83B800
gitlens.decorations.copiedForegroundColor#83B800
gitlens.decorations.deletedForegroundColor#FF7070
gitlens.decorations.ignoredForegroundColor#839496
gitlens.decorations.modifiedForegroundColor#F0A000
gitlens.decorations.renamedForegroundColor#83B800
gitlens.decorations.untrackedForegroundColor#83B800
gitlens.decorations.worktreeView.hasUncommittedChangesForegroundColor#F0A000
gitlens.gutterBackgroundColor#88888313
gitlens.gutterForegroundColor#839496
gitlens.gutterUncommittedForegroundColor#38B0FFCC
gitlens.lineHighlightBackgroundColor#38B0FF11
gitlens.lineHighlightOverviewRulerColor#38B0FFCC
gitlens.mergedPullRequestIconColor#A0A0F4
gitlens.openAutolinkedIssueIconColor#83B800
gitlens.openPullRequestIconColor#83B800
gitlens.trailingLineBackgroundColor#88888300
gitlens.trailingLineForegroundColor#888883CC
gitlens.unpublishedChangesIconColor#F08040
gitlens.unpublishedCommitIconColor#F08040
gitlens.unpulledChangesIconColor#F08040
icon.foreground#beb8a5
input.background#252526
input.border#888883
input.foreground#beb8a5
input.placeholderForeground#839496
inputOption.activeBackground#1e1e1e
inputOption.activeBorder#1e1e1e
inputOption.activeForeground#38B0FF
inputOption.hoverBackground#555555
inputOption.hoverBorder#888883
inputValidation.errorBorder#FF7070
inputValidation.infoBackground#31313e
inputValidation.infoBorder#38B0FF
inputValidation.warningBackground#1e1e1e
inputValidation.warningBorder#F0A000
interactive.activeCodeBorder#38B0FF
interactive.inactiveCodeBorder#1e1e1e
keybindingLabel.background#555555
keybindingLabel.border#25252699
keybindingLabel.bottomBorder#25252699
keybindingLabel.foreground#beb8a5
keybindingTable.headerBackground#beb8a50a
keybindingTable.rowsBackground#beb8a50a
list.activeSelectionBackground#38B0FF22
list.activeSelectionBorder#38B0FF33
list.activeSelectionForeground#beb8a5
list.activeSelectionIconForeground#beb8a5
list.deemphasizedForeground#839496
list.dropBackground#888883
list.errorForeground#F08040
list.filterMatchBackground#F0804055
list.focusHighlightForeground#38B0FF
list.focusOutline#38B0FF55
list.highlightForeground#38B0FF
list.hoverBackground#38B0FF22
list.hoverForeground#beb8a5
list.inactiveSelectionBackground#38B0FF22
list.inactiveSelectionForeground#beb8a5
list.invalidItemForeground#F0A000
list.warningForeground#F0A000
listFilterWidget.background#383b3d
listFilterWidget.noMatchesOutline#FF7070
listFilterWidget.outline#555555
menu.background#252526
menu.foreground#beb8a5
menu.selectionBackground#38B0FF33
menu.selectionForeground#beb8a5
menu.separatorBackground#383b3d
menubar.selectionBackground#beb8a51a
menubar.selectionForeground#beb8a5
merge.commonContentBackground#252526
merge.commonHeaderBackground#383b3d
merge.currentContentBackground#00BCB033
merge.currentHeaderBackground#00BCB080
merge.incomingContentBackground#38B0FF33
merge.incomingHeaderBackground#38B0FF80
minimap.errorHighlight#FF7070b3
minimap.findMatchHighlight#FF60C0AA
minimap.foregroundOpacity#888883
minimap.selectionHighlight#38B0FF33
minimap.selectionOccurrenceHighlight#1e1e1e
minimap.warningHighlight#F0A000
minimapGutter.addedBackground#83B800
minimapGutter.deletedBackground#FF7070
minimapGutter.modifiedBackground#F0A000
minimapSlider.activeBackground#88888333
minimapSlider.background#55555533
minimapSlider.hoverBackground#88888355
notebook.cellBorderColor#1e1e1e
notebook.cellEditorBackground#252526
notebook.cellInsertionIndicator#38B0FF
notebook.cellStatusBarItemHoverBackground#88888355
notebook.cellToolbarSeparator#83949659
notebook.focusedCellBorder#38B0FF
notebook.focusedEditorBorder#38B0FF
notebook.inactiveFocusedCellBorder#1e1e1e
notebook.selectedCellBackground#1e1e1e
notebook.selectedCellBorder#1e1e1e
notebook.symbolHighlightBackground#FFFFFF0b
notebookScrollbarSlider.activeBackground#55555566
notebookScrollbarSlider.background#383b3d66
notebookScrollbarSlider.hoverBackground#88888355
notebookStatusErrorIcon.foreground#F08040
notebookStatusRunningIcon.foreground#beb8a5
notebookStatusSuccessIcon.foreground#83B800
notificationCenterHeader.background#383b3d
notificationLink.foreground#38B0FF
notifications.background#252526
notifications.border#383b3d
notifications.foreground#beb8a5
notificationsErrorIcon.foreground#FF7070
notificationsInfoIcon.foreground#38B0FF
notificationsWarningIcon.foreground#F0A000
panel.background#383b3d
panel.border#83949659
panel.dropBorder#beb8a5
panel.forground#beb8a5
panelSection.border#83949659
panelSection.dropBackground#383b3d80
panelSectionHeader.background#83949633
panelTitle.activeBorder#beb8a5
panelTitle.activeForeground#beb8a5
panelTitle.inactiveForeground#beb8a599
peekView.border#38B0FF
peekViewEditor.background#1e1e1e
peekViewEditor.matchHighlightBackground#F0804099
peekViewEditorGutter.background#252526
peekViewResult.background#252526
peekViewResult.fileForeground#beb8a5
peekViewResult.foreground#beb8a5
peekViewResult.lineForeground#beb8a5
peekViewResult.matchHighlightBackground#F080404d
peekViewResult.selectionBackground#38B0FF33
peekViewResult.selectionForeground#beb8a5
peekViewTitle.background#383b3d
peekViewTitleDescription.foreground#beb8a5b3
peekViewTitleLabel.foreground#beb8a5
pickerGroup.background#252526
pickerGroup.border#1e1e1e
pickerGroup.foreground#beb8a5
ports.iconRunningProcessForeground#83B800
problemsErrorIcon.foreground#FF7070
problemsInfoIcon.foreground#38B0FF
problemsWarningIcon.foreground#F0A000
progressBar.background#FF60C0
quickInput.background#383b3d
quickInput.foreground#beb8a5
quickInputList.focusBackground#1e1e1e
quickInputList.focusForeground#beb8a5
quickInputList.focusIconForeground#ded8c5
quickInputTitle.background#383b3d
sash.hoverBorder#38B0FF
scm.providerBorder#555555
scrollbar.shadow#555555
scrollbarSlider.activeBackground#55555566
scrollbarSlider.background#383b3d66
scrollbarSlider.hoverBackground#88888355
searchEditor.findMatchBackground#31313e
searchEditor.findMatchBorder#A0A0F4
selection.background#38B0FF33
settings.checkboxBackground#252526
settings.checkboxBorder#252526
settings.checkboxForeground#beb8a5
settings.dropdownBackground#1e1e1e
settings.dropdownBorder#252526
settings.dropdownForeground#beb8a5
settings.dropdownListBorder#252526
settings.focusedRowBackground#1e1e1e99
settings.focusedRowBorder#383b3d1f
settings.headerBorder#83949659
settings.headerForeground#beb8a5
settings.modifiedItemIndicator#00BCB0
settings.numberInputBackground#252526
settings.numberInputForeground#beb8a5
settings.rowHoverBackground#1e1e1e55
settings.sashBorder#83949659
settings.textInputBackground#252526
settings.textInputForeground#beb8a5
sideBar.background#252526
sideBar.border#383b3d
sideBar.dropBackground#88888355
sideBar.foreground#beb8a5
sideBarSectionHeader.background#383b3d
sideBarSectionHeader.border#555555
sideBarSectionHeader.foreground#beb8a5
sideBarTitle.foreground#ded8c5
sideBySideEditor.horizontalBorder#888883
sideBySideEditor.verticalBorder#888883
statusBar.background#383b3d
statusBar.debuggingBackground#252526
statusBar.debuggingForeground#beb8a5
statusBar.focusBorder#888883
statusBar.foreground#beb8a5
statusBar.noFolderBackground#A0A0F4
statusBar.noFolderForeground#beb8a5
statusBarItem.activeBackground#beb8a52e
statusBarItem.compactHoverBackground#88888355
statusBarItem.errorBackground#FF7070
statusBarItem.errorForeground#beb8a5
statusBarItem.focusBorder#beb8a5
statusBarItem.hoverBackground#88888355
statusBarItem.prominentBackground#88888355
statusBarItem.prominentForeground#ded8c5
statusBarItem.prominentHoverBackground#88888355
statusBarItem.remoteBackground#83B800
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#555555
statusBarItem.warningForeground#FFFFFF
symbolIcon.arrayForeground#beb8a5
symbolIcon.booleanForeground#beb8a5
symbolIcon.classForeground#F0A000
symbolIcon.colorForeground#beb8a5
symbolIcon.constantForeground#FF60C0
symbolIcon.constructorForeground#38B0FF
symbolIcon.enumeratorForeground#F0A000
symbolIcon.enumeratorMemberForeground#00BCB0
symbolIcon.eventForeground#F0A000
symbolIcon.fieldForeground#00BCB0
symbolIcon.fileForeground#beb8a5
symbolIcon.folderForeground#beb8a5
symbolIcon.functionForeground#A0A0F4
symbolIcon.interfaceForeground#38B0FF
symbolIcon.keyForeground#beb8a5
symbolIcon.keywordForeground#beb8a5
symbolIcon.methodForeground#A0A0F4
symbolIcon.moduleForeground#beb8a5
symbolIcon.namespaceForeground#beb8a5
symbolIcon.nullForeground#beb8a5
symbolIcon.numberForeground#beb8a5
symbolIcon.objectForeground#beb8a5
symbolIcon.operatorForeground#beb8a5
symbolIcon.packageForeground#beb8a5
symbolIcon.propertyForeground#beb8a5
symbolIcon.referenceForeground#beb8a5
symbolIcon.snippetForeground#beb8a5
symbolIcon.stringForeground#beb8a5
symbolIcon.structForeground#beb8a5
symbolIcon.textForeground#beb8a5
symbolIcon.typeParameterForeground#beb8a5
symbolIcon.unitForeground#beb8a5
symbolIcon.variableForeground#38B0FF
tab.activeBackground#1e1e1e
tab.activeForeground#beb8a5
tab.activeModifiedBorder#F0A000
tab.border#1e1e1e
tab.inactiveBackground#252526
tab.inactiveForeground#beb8a5
tab.inactiveModifiedBorder#F0A000
tab.lastPinnedBorder#beb8a533
tab.unfocusedActiveBackground#252526
tab.unfocusedActiveForeground#93a1a1
tab.unfocusedActiveModifiedBorder#38B0FF80
tab.unfocusedInactiveBackground#383b3d
tab.unfocusedInactiveForeground#93a1a1
tab.unfocusedInactiveModifiedBorder#38B0FF40
terminal.ansiBlack#beb8a5
terminal.ansiBlue#38B0FFDD
terminal.ansiBrightBlack#beb8a5
terminal.ansiBrightBlue#38B0FF
terminal.ansiBrightCyan#00BCB0
terminal.ansiBrightGreen#83B800
terminal.ansiBrightMagenta#FF60C0
terminal.ansiBrightRed#FF7070
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#F0A000
terminal.ansiCyan#00BCB0DD
terminal.ansiGreen#83B800DD
terminal.ansiMagenta#FF60C0DD
terminal.ansiRed#FF7070DD
terminal.ansiWhite#FFFFFFDD
terminal.ansiYellow#F0A000DD
terminal.background#1e1e1e
terminal.dropBackground#1e1e1e80
terminal.findMatchBorder#555555
terminal.findMatchHighlightBackground#555555
terminal.findMatchHighlightBorder#F0804055
terminal.foreground#beb8a5
terminal.selectionBackground#555555
terminalCommandDecoration.defaultBackground#FFFFFF40
terminalCommandDecoration.errorBackground#FF7070
terminalCommandDecoration.successBackground#38B0FF
terminalCursor.background#1e1e1e
terminalCursor.foreground#beb8a5
terminalOverviewRuler.cursorForeground#839496cc
terminalOverviewRuler.findMatchForeground#F080407e
testing.iconErrored#FF7070
testing.iconFailed#FF7070
testing.iconPassed#83B800
testing.iconQueued#F0A000
testing.iconSkipped#93a1a1
testing.iconUnset#93a1a1
testing.message.error.decorationForeground#FF7070
testing.message.error.lineBackground#FF707033
testing.message.info.decorationForeground#beb8a580
testing.peekBorder#FF7070
testing.peekHeaderBackground#FF70701a
testing.runAction#83B800
textBlockQuote.background#252526
textBlockQuote.border#38B0FF80
textCodeBlock.background#1e1e1e
textLink.activeForeground#38B0FF
textLink.foreground#38B0FF
textPreformat.foreground#F0A000
textSeparator.foreground#beb8a52e
titleBar.activeBackground#1e1e1e
titleBar.activeForeground#beb8a5
titleBar.inactiveBackground#1e1e1e
titleBar.inactiveForeground#beb8a5
toolbar.activeBackground#1e1e1e
toolbar.hoverBackground#1e1e1e55
tree.indentGuidesStroke#93a1a1
tree.tableColumnsBorder#93a1a1
tree.tableOddRowsBackground#beb8a50a
welcomePage.background#1e1e1e
welcomePage.progress.background#252526
welcomePage.progress.foreground#38B0FF
welcomePage.tileBackground#252526
welcomePage.tileHoverBackground#1e1e1e55
welcomePage.tileShadow#252526
widget.shadow#555555
window.activeBorder#555555
window.inactiveBorder#555555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block.documentation other.description, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string	#93a1a1
comment.block.documentation, comment.line, comment.block.documentation other.description, punctuation.definition.comment	—	italic
keyword.other.phpdoc, comment.block.documentation storage.type, comment.block.documentation variable.other	#93a1a1
comment.block.documentation keyword	#93a1a1
comment.block.documentation entity.name.type.instance	#A0A0F4
source.css meta.selector	#F08040DF	—
source.css entity.name.tag	#A0A0F4	—
source.css entity.other.attribute-name	#ded8c5
source.css punctuation.definition.attribute-selector, source.css punctuation.definition.entity.begin.bracket.square, source.css punctuation.definition.entity.end.bracket.square	#ded8c5	—
source.css punctuation.definition	#beb8a5BF	—
source.css meta.attribute-selector	#83B800	—
source.css entity.other.attribute-name.class	#38B0FF
source.css entity.other.attribute-name.parent-selector punctuation.definition	#F0A000BF	—
source.css entity.other.attribute-name.id	#38B0FF
source.css entity.name.tag.reference	#eee8d5	—
source.css entity.other.attribute-name.pseudo-class, source.css entity.other.attribute-name.pseudo-element	#A0A0F4	—
source.css punctuation.section.function.begin.bracket.round, source.css punctuation.section.function.end.bracket.round	#A0A0F4BF	—
source.css support.type.property-name, source.css meta.property-list entity.name.tag	#00BCB0	—
support.type.vendored.property-name	#00BCB0BF	—
source.css constant.numeric	#A0A0F4
source.css keyword.other.unit	#A0A0F4BF
source.css support.function	#F0A000BF	—
source.css meta.function.color, source.css meta.function.color support.function.misc, source.css support.constant.color, source.css constant.other.color	#beb8a5	—
source.css support.constant.property-value	#FF60C0	—
source.css keyword.other.important, source.css invalid.deprecated	#F08040DF	—
keyword.operator.combinator.css	#F0A000DF	—
source.css punctuation.section.property-list.begin.bracket.curly, source.css punctuation.section.property-list.end.bracket.curly, source.css punctuation.terminator.rule, source.css punctuation.separator.key-value	#93a1a1	—
source.css keyword.control.at-rule.import, source.css keyword.control.at-rule punctuation.definition, source.css keyword.control.at-rule.media	#A0A0F4	—
source.css keyword.control.at-rule.mixin, source.css keyword.operator.logical.and.media, source.css keyword.operator.logical.only.media	#93a1a1	—
source.css keyword.control.at-rule, source.css entity.name.function, source.css entity.other.attribute-name.class.mixin	#F0A000	—
source.css meta.at-rule.extend	#A0A0F4	—
source.css variable, source.css meta.definition.variable variable, source.css variable.other	#F0A000	—
source.css punctuation.definition.variable	#F0A0007f	—
source.css variable.argument	#F0A000
source.css support.function.any-method.builtin, source.css meta.function.variable	#F0A000	—
source.css variable.other.interpolation	#F0A000	italic
text, source	#beb8a5	—
string, string.quoted, punctuation.definition.string	#83B800	—
constant.numeric	#A0A0F4	—
constant.language.null, constant.language.undefined, constant.language, constant.language.boolean	#FF60C0	italic
constant.language.boolean, constant.language	#FF60C0	—
string.template, string.interpolated	#F0A000	—
keyword.other.substitution.begin, keyword.other.substitution.end, keyword.other.template.begin, keyword.other.template.end	#F0A0007F	—
punctuation.definition.template-expression	#83B800	—
invalid, invalid.illegal	#F08040	—
invalid.deprecated	#F080407F	—
string.regexp	#F0A000	—
constant.other.object.key	#00BCB0	—
meta.brace, punctuation.definition.block, punctuation.terminator, punctuation.separator, meta.delimiter	#93a1a1	—
punctuation	#93a1a1	—
meta.tag, meta.tag.any	#38B0FF	—
meta.tag.structure entity.name.tag, meta.tag.block.any	#00BCB0	—
meta.tag.inline entity.name.tag, meta.tag.structure.label entity.name.tag, meta.tag.object.img entity.name.tag	#A0A0F4	—
meta.tag.structure.select entity.name.tag, meta.tag.structure.textarea entity.name.tag, meta.tag.structure.input entity.name.tag	#ded8c5	—
meta.tag.structure.button entity.name.tag, meta.tag.inline.a	#ded8c5	—
meta.tag.custom	#A0A0F4	—
meta.tag.other.unrecognized, meta.tag.inline entity.name.tag meta.tag.structure entity.name.tag	#eee8d5	—
meta.tag.metadata.script	#A0A0F4	—
entity.other.attribute-name	#A0A0F4	italic
meta.attribute.type.html, string.quoted.jsx	#83B800	—
meta.attribute.data-x entity.other.attribute-name.html	#FF60C0	—
meta.attribute.class.html string.quoted.double.html, meta.attribute.style.html string.quoted.double.html source.css	#F0A000	—
meta.attribute.class.html punctuation.definition.string, meta.attribute.style.html punctuation.definition.string source.css-ignored-vscode, meta.attribute.style.html punctuation.definition.string	#F0A000BF	—
meta.tag.structure.svg entity.name.tag, meta.tag.object.img entity.name.tag	#ded8c5	—
meta.attribute.href.html string.quoted.double.html, meta.attribute.action.html string.quoted.double.html	#F0A000BF	—
meta.attribute.href.html punctuation.definition.string, meta.attribute.action.html punctuation.definition.string	#F0A0007F	—
meta.tag.metadata.link.void.html meta.attribute.href.html string.quoted.double.html, meta.tag.metadata.link.void.html meta.attribute.href.html punctuation.definition.string	#83B800	—
meta.attribute.event-handler entity.other.attribute-name.html	#F0A000	—
punctuation.definition.tag, punctuation.definition.tag source.css	#00BCB0BF	—
meta.embedded.line.css source.css	#83B800	—
meta.tag.metadata.doctype, text.html punctuation.section.embedded	#93a1a1	—
meta.jsx.children	#beb8a5	—
meta.jsx meta.tag, source.js meta.tag	#00BCB0	—
meta.jsx meta.tag support.class.component	#A0A0F4	—
meta.jsx meta.tag punctuation.definition.tag	#A0A0F4BF	—
meta.jsx entity.other.attribute-name, source.js entity.other.attribute-name	#00BCB0	italic
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.key-value.json	#93a1a1	—
constant.language.json, constant.language	#FF60C0	—
punctuation.separator.dictionary.pair.json	#ded8c5	—
source.json meta.structure.dictionary.json support.type.property-name.json	#00BCB0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#00BCB0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#A0A0F4	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#38B0FF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#beb8a5	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ded8c5	—
markup.bold.markdown	#ded8c5	—
meta.paragraph.markdown	#beb8a5	—
markup.italic.markdown	—	italic
markup.fenced_code.block	#93a1a1	—
markup.underline.link.markdown	—	—
markup.quote.markdown	#A0A0F4	italic
punctuation.definition.list.begin.markdown, markup.list.numbered.markdown	#A0A0F4	—
heading.1.markdown, markup.heading.setext.1.markdown	#00BCB0	bold
heading.2.markdown, markup.heading.setext.2.markdown	#00BCB0	—
heading.3.markdown	#38B0FF	—
heading.4.markdown	#beb8a5	—
heading.5.markdown, heading.6.markdown	#eee8d5	—
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown	#93a1a1	—
punctuation.definition.markdown, punctuation.separator.key-value.markdown, punctuation.definition.constant.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown	#93a1a1	—
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown	#93a1a1	—
meta.link.inline.markdown, meta.link.reference.markdown, meta.link.reference.def.markdown, string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown, meta.link.inet.markdown markup.underline.link.markdown	#F0A000	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#93a1a1	—
constant.other.reference.link.markdown	#F0A000	—
markup.inline.raw.string.markdown	#F0A000	—
meta.separator.markdown	#93a1a1	—
entity.name.tag.yaml, keyword.other.definition.ini	#38B0FF	—
log.date	#ded8c5	—
log.constant	#FF60C0	—
log.error, log.exception	#F08040	—
log.error	#F08040	—
constant.character.escape, constant.character, constant.other.color.rgb-value, constant.other.rgb-value, constant.other.symbol, constant.regexp, constant.sha.git-rebase, entity.name.function.preprocessor, entity.name.function, entity.name.label, entity.name.operator.custom-literal, entity.name.operator, entity.name.tag.css, entity.name.tag, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.scss, entity.other.attribute-name, entity.other.inherited-class, keyword.other.variable.definition, meta.function-call.arguments, meta.function-call.method.without-arguments, meta.function-call.without-arguments, meta.function.parameter.typehinted storage.type	#beb8a5	—
punctuation.definition.parameters, punctuation.definition.arguments, punctuation.terminator, punctuation.separator, punctuation, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.definition.tag, punctuation.definition.variable, punctuation.separator.arguments	#beb8a5BF	—
comment, keyword.control.class, keyword.control.module, meta.function.expression meta.brace.round, meta.method.declaration meta.brace.round, meta.var.expr meta.brace.round, source.coffee.embedded, source.cpp keyword.operator.new, source.css.less entity.other.attribute-name.id, source.groovy.embedded, strong, meta.brace.round, meta.brace.square, meta.diff.header, meta.embedded, meta.preprocessor.numeric, meta.preprocessor	#93a1a1	—
meta.object-literal.key, meta.object-literal.key, meta.property.object, meta.structure.dictionary.key.python, source.powershell variable.other.member, variable.other.enummember	#00BCB0	—
support.class.console, support.class.error, support.function.console, support.function.git-rebase, support.function, meta.function-call, entity.name.function.invocation, meta.function-call entity.name.function, meta.method-call entity.name.function, variable.function, keyword.other.special-method, meta.definition.method, entity.name.function, support.function	#38B0FF	—
support.function.macro, punctuation.definition.decorator, punctuation.decorator, meta.decorator meta.function-call entity.name.function, meta.decorator variable, entity.name.function.decorator, meta.function.decorator	#A0A0F4	—
support.class, support.constant, support.class.builtin, support.function.builtin, support.function.node, variable.language	#A0A0F4	—
constant.language, constant.numeric, constant.language, constant.language.booleans, support.constant.color, support.constant.dom, support.constant.font-name, support.constant.handlebars, support.constant.json, support.constant.math, support.constant.property-value	#FF60C0	—
meta.definition.variable variable, variable.css, variable.language.special.self, variable.language.super, variable.language.this, variable.language.wildcard.java, variable.other.constant, variable.other.less, variable.other.object, variable.other.property.static, variable.other.property, variable.other.readwrite.class, variable.other.readwrite.instance, variable.parameter.function, variable.parameter, variable.scss, variable, variable, meta.definition.variable.name, support.variable, entity.name.variable	#ded8c5	—
meta.class meta.method meta.var storage.type, storage.type, meta.class meta.method.declaration storage.type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, meta.function.parameters support.type, meta.return.type entity.name.type, keyword.operator.type.annotation, meta.type.declaration, punctuation.separator.annotation, meta.type.annotation, meta.interface, punctuation.definition.typeparameters, meta.other.type.phpdoc support.class, meta.other.type.phpdoc keyword.other, support.type.object.module, support.type.object.console, meta.type.cast.expr, meta.type.new.expr, support.constant.media-type, support.constant.media, support.type.vendored.property-name, support.type.property-name, storage, storage.type, storage.modifier	#A0A0F4	—
meta.type.parameters.ts, meta.type.parameters	#A0A0F4	—
storage.type.function.ts, storage.type.function.python, variable.language.prototype.js, variable.function meta.function-call, keyword.operator, keyword.operator.accessor, keyword.operator.logical, keyword.operator.comparison, keyword.other.unit, keyword, keyword.control, keyword.operator.assignment, keyword.operator.ternary, keyword.control.case, keyword.control.default, keyword.control.conditional, keyword.control.switch, keyword.control.flow, keyword.control.return, keyword.control.break, keyword.control.trycatch, keyword.control.pseudo-method, keyword.other.debugger, keyword.operator.module, keyword.control.from, keyword.control.import, keyword.control.export, keyword.control, keyword.other.new, keyword.other.operator, keyword.other.using, keyword, keyword.operator.logical.python, keyword.operator.expression, keyword.operator, storage.type.function.arrow	#F0A000	—
keyword.operator.class, keyword.operator.delete, keyword.operator.minus.exponent, keyword.operator.new, keyword.operator.noexcept, keyword.operator.plus.exponent, keyword.control.flow, keyword.control.return, keyword.control.break	#F08040	—
entity.name.class, new.expr, variable.other.class, entity.name.type.class, entity.other.inherited-class, keyword.operator.new, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.wordlike	#A0A0F4	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss, meta.preprocessor.string, string.value, string.tag, string, string.template, string.template.ts, meta.embedded.assembly, string.regexp, string.unquoted.label, constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp, keyword.operator.quantifier.regexp, punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp, constant.other.placeholder	#83B800	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, meta.template.expression	#F0A000	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java, meta.class storage.modifier, storage.modifier.import.java, storage.modifier.package.java, storage.modifier	#A0A0F4	—
invalid	#F08040	—
variable.other.positional	#A0A0F4	—
variable.other.normal.shell	#00BCB0	—

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