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 Light Chandrian

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#102530
activityBar.background#ded8c5
activityBar.dropBorder#102530
activityBar.foreground#102530
activityBar.inactiveForeground#002b36
activityBarBadge.background#2B60C0
activityBarBadge.foreground#FFFFFF
background#ded8c5
badge.background#2B60C0
badge.foreground#FFFFFF
banner.background#ded8c5
banner.foreground#002b36
banner.iconForeground#102530
breadcrumb.activeSelectionForeground#002b36
breadcrumb.background#eee8d5
breadcrumb.focusForeground#002b36
breadcrumb.foreground#073642
breadcrumbPicker.background#e6e0cd
button.background#2B60C0
button.foreground#FFFFFF
button.hoverBackground#2B60C0
button.secondaryBackground#2B60C0CC
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#2B60C0
charts.blue#2B60C0
charts.foreground#002b36
charts.green#407000
charts.lines#eee8d5
charts.orange#AE4001
charts.purple#795CA5
charts.red#B00F0F
charts.yellow#875B10
checkbox.background#e6e0cd
checkbox.border#e6e0cd
checkbox.foreground#102530
debugConsole.errorForeground#B310A5
debugConsole.infoForeground#2B60C0
debugConsole.sourceForeground#073642
debugConsole.warningForeground#875B10
debugConsoleInputIcon.foreground#073642
debugExceptionWidget.background#B00F0F33
debugExceptionWidget.border#B00F0F
debugIcon.breakpointCurrentStackframeForeground#875B10
debugIcon.breakpointDisabledForeground#ded8c5
debugIcon.breakpointForeground#B00F0F
debugIcon.breakpointStackframeForeground#B00F0F
debugIcon.breakpointUnverifiedForeground#ded8c5
debugIcon.continueForeground#2B60C0
debugIcon.disconnectForeground#AE4001
debugIcon.pauseForeground#2B60C0
debugIcon.restartForeground#407000
debugIcon.startForeground#407000
debugIcon.stepBackForeground#2B60C0
debugIcon.stepIntoForeground#2B60C0
debugIcon.stepOutForeground#2B60C0
debugIcon.stepOverForeground#2B60C0
debugIcon.stopForeground#AE4001
debugTokenExpression.boolean#2B60C0
debugTokenExpression.error#AE4001
debugTokenExpression.name#B310A5
debugTokenExpression.number#407000
debugTokenExpression.string#AE4001
debugTokenExpression.value#073642
debugToolBar.background#e6e0cd
debugView.exceptionLabelBackground#B00F0F
debugView.exceptionLabelForeground#002b36
debugView.stateLabelBackground#002b3634
debugView.stateLabelForeground#002b36
debugView.valueChangedHighlight#2B60C0
descriptionForeground#002b36b3
diffEditor.diagonalFill#002b3633
diffEditor.foreground#002b36
diffEditor.insertedTextBackground#40700022
diffEditor.removedTextBackground#B00F0F22
diffEditorGutter.insertedLineBackground#40700044
diffEditorGutter.removedLineBackground#B00F0F44
diffEditorOverview.insertedForeground#002b36
diffEditorOverview.removedForeground#002b36
disabledForeground#002b3680
dropdown.background#ded8c5
dropdown.border#cec8b5
dropdown.foreground#002b36
dropdown.listBackground#e6e0cd
editor.background#eee8d5
editor.findMatchBackground#dcd3cd
editor.findMatchBorder#d6cccb
editor.findMatchHighlightBackground#d6cccb
editor.findMatchHighlightBorder#795CA5
editor.findRangeHighlightBackground#e6e0cd
editor.focusedStackFrameHighlightBackground#cec8b5
editor.foldBackground#ded8c5
editor.foreground#002b36
editor.guides.highlightActiveIndentation
editor.guides.indentation
editor.hoverHighlightBackground#cec8b5
editor.inactiveSelectionBackground#2B60C033
editor.inlineValuesBackground#875B1033
editor.inlineValuesForeground#002b3680
editor.lineHighlightBackground#e6e0cd
editor.lineHighlightBorder#ded8c5
editor.linkedEditingBackground#B00F0F4d
editor.rangeHighlightBackground#cec8b5
editor.selectionBackground#dcd3cd
editor.selectionHighlightBackground#dcd3cd
editor.selectionHighlightBorder#d6cccb
editor.snippetFinalTabstopHighlightBackground#ded8c5
editor.snippetFinalTabstopHighlightBorder#cec8b5
editor.snippetTabstopHighlightBackground#ded8c5
editor.snippetTabstopHighlightBorder#cec8b5
editor.stackFrameHighlightBackground#875B1033
editor.symbolHighlightBackground#AE400155
editor.wordHighlightBackground#dcd3cd
editor.wordHighlightBorder#beb8a5
editor.wordHighlightStrongBackground#dcd3cd
editor.wordHighlightStrongBorder#beb8a5
editorActiveLineNumber.foreground#073642
editorBracketHighlight.foreground1#875B10
editorBracketHighlight.foreground2#B310A5
editorBracketHighlight.foreground3#2B60C0
editorBracketHighlight.foreground4#AE4001
editorBracketHighlight.foreground5#037585
editorBracketHighlight.foreground6#795CA5
editorBracketHighlight.unexpectedBracket.foreground#B00F0Fcc
editorBracketMatch.background#cec8b5
editorBracketMatch.border#beb8a5
editorCodeLens.foreground#beb8a5
editorCommentsWidget.rangeActiveBackground#2B60C033
editorCommentsWidget.rangeActiveBorder#2B60C066
editorCommentsWidget.rangeBackground#2B60C033
editorCommentsWidget.rangeBorder#2B60C066
editorCommentsWidget.resolvedBorder#002b3680
editorCommentsWidget.unresolvedBorder#2B60C0
editorCursor.foreground#002b36
editorError.foreground#B00F0F
editorGhostText.foreground#002b3656
editorGroup.border#e6e0cd
editorGroup.dropBackground#ded8c580
editorGroup.dropIntoPromptBackground#e6e0cd
editorGroup.dropIntoPromptForeground#002b36
editorGroup.emptyBackground#ded8c5
editorGroupHeader.border#cec8b588
editorGroupHeader.noTabsBackground#eee8d5
editorGroupHeader.tabsBackground#ded8c5
editorGroupHeader.tabsBorder#cec8b588
editorGroupHeader.tabsForeground#002b36
editorGutter.addedBackground#407000
editorGutter.background#eee8d5
editorGutter.border#eee8d5
editorGutter.commentRangeForeground#cec8b5
editorGutter.deletedBackground#B00F0F
editorGutter.foldingControlForeground#002b36
editorGutter.modifiedBackground#875B10
editorHint.foreground#002b36
editorHoverWidget.background#e6e0cd
editorHoverWidget.border#e6e0cd
editorHoverWidget.highlightForeground#2B60C0
editorHoverWidget.statusBarBackground#ded8c5
editorIndentGuide.activeBackground#beb8a5
editorIndentGuide.background#beb8a5
editorInfo.background#ded8c5
editorInfo.border#cec8b5
editorInfo.foreground#2B60C0
editorInlayHint.background#cec8b5
editorInlayHint.foreground#002b36cc
editorInlayHint.parameterBackground#cec8b5
editorInlayHint.parameterForeground#002b36cc
editorInlayHint.typeBackground#cec8b5
editorInlayHint.typeForeground#002b36cc
editorLightBulb.foreground#875B10
editorLightBulbAutoFix.foreground#AE4001
editorLineNumber.activeForeground#002b36
editorLineNumber.foreground#002b36
editorLink.activeForeground#875B10
editorMarkerNavigation.background#eee8d5
editorMarkerNavigationError.background#B00F0F
editorMarkerNavigationError.headerBackground#B00F0F1a
editorMarkerNavigationInfo.background#2B60C0
editorMarkerNavigationInfo.headerBackground#2B60C0
editorMarkerNavigationWarning.background#875B10
editorMarkerNavigationWarning.headerBackground#875B101a
editorOverviewRuler.addedForeground#407000
editorOverviewRuler.border#ded8c5
editorOverviewRuler.bracketMatchForeground#073642
editorOverviewRuler.commonContentForeground#002b3666
editorOverviewRuler.currentContentForeground#03758580
editorOverviewRuler.deletedForeground#B00F0F
editorOverviewRuler.errorForeground#AE4001
editorOverviewRuler.findMatchForeground#AE40017e
editorOverviewRuler.incomingContentForeground#2B60C080
editorOverviewRuler.infoForeground#2B60C0
editorOverviewRuler.modifiedForeground#875B10
editorOverviewRuler.rangeHighlightForeground#2B60C099
editorOverviewRuler.selectionHighlightForeground#073642cc
editorOverviewRuler.warningForeground#875B10
editorOverviewRuler.wordHighlightForeground#073642cc
editorOverviewRuler.wordHighlightStrongForeground#B310A5cc
editorPane.background#eee8d5
editorRuler.foreground#ded8c5
editorSuggestWidget.background#e6e0cd
editorSuggestWidget.border#eee8d5
editorSuggestWidget.focusHighlightForeground#2B60C0
editorSuggestWidget.foreground#002b36
editorSuggestWidget.highlightForeground#037585
editorSuggestWidget.selectedBackground#dcd3cd
editorSuggestWidget.selectedIconForeground#002b36
editorSuggestWidgetStatus.foreground#002b3680
editorUnicodeHighlight.background#875B1026
editorUnicodeHighlight.border#875B10
editorUnnecessaryCode.opacity#beb8a5aa
editorWarning.foreground#875B10
editorWhitespace.foreground#beb8a5
editorWidget.background#ded8c5
editorWidget.border#cec8b5
editorWidget.foreground#002b36
errorForeground#AE4001
extensionBadge.remoteBackground#2B60C0
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#2B60C0CC
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#2B60C0
extensionIcon.preReleaseForeground#407000
extensionIcon.starForeground#AE4001
extensionIcon.verifiedForeground#2B60C0
focusBorder#beb8a5
foreground#002b36
gitDecoration.addedResourceForeground#407000
gitDecoration.conflictingResourceForeground#B00F0F
gitDecoration.deletedResourceForeground#B00F0F
gitDecoration.ignoredResourceForeground#073642
gitDecoration.modifiedResourceForeground#875B10
gitDecoration.renamedResourceForeground#AE4001
gitDecoration.stageDeletedResourceForeground#B00F0F
gitDecoration.stageModifiedResourceForeground#875B10
gitDecoration.submoduleResourceForeground#2B60C0
gitDecoration.untrackedResourceForeground#407000
gitlens.closedAutolinkedIssueIconColor#795CA5
gitlens.closedPullRequestIconColor#B00F0F
gitlens.decorations.addedForegroundColor#407000
gitlens.decorations.branchAheadForegroundColor#407000
gitlens.decorations.branchBehindForegroundColor#AE4001
gitlens.decorations.branchDivergedForegroundColor#875B10
gitlens.decorations.branchMissingUpstreamForegroundColor#AE4001
gitlens.decorations.branchUnpublishedForegroundColor#407000
gitlens.decorations.copiedForegroundColor#407000
gitlens.decorations.deletedForegroundColor#B00F0F
gitlens.decorations.ignoredForegroundColor#073642
gitlens.decorations.modifiedForegroundColor#875B10
gitlens.decorations.renamedForegroundColor#407000
gitlens.decorations.untrackedForegroundColor#407000
gitlens.decorations.worktreeView.hasUncommittedChangesForegroundColor#875B10
gitlens.gutterBackgroundColor#beb8a513
gitlens.gutterForegroundColor#073642
gitlens.gutterUncommittedForegroundColor#2B60C0CC
gitlens.lineHighlightBackgroundColor#2B60C011
gitlens.lineHighlightOverviewRulerColor#2B60C0CC
gitlens.mergedPullRequestIconColor#795CA5
gitlens.openAutolinkedIssueIconColor#407000
gitlens.openPullRequestIconColor#407000
gitlens.trailingLineBackgroundColor#beb8a500
gitlens.trailingLineForegroundColor#beb8a5CC
gitlens.unpublishedChangesIconColor#AE4001
gitlens.unpublishedCommitIconColor#AE4001
gitlens.unpulledChangesIconColor#AE4001
icon.foreground#002b36
input.background#e6e0cd
input.border#beb8a5
input.foreground#002b36
input.placeholderForeground#073642
inputOption.activeBackground#eee8d5
inputOption.activeBorder#eee8d5
inputOption.activeForeground#2B60C0
inputOption.hoverBackground#cec8b5
inputOption.hoverBorder#beb8a5
inputValidation.errorBorder#B00F0F
inputValidation.infoBackground#dcd3cd
inputValidation.infoBorder#2B60C0
inputValidation.warningBackground#eee8d5
inputValidation.warningBorder#875B10
interactive.activeCodeBorder#2B60C0
interactive.inactiveCodeBorder#eee8d5
keybindingLabel.background#cec8b5
keybindingLabel.border#e6e0cd99
keybindingLabel.bottomBorder#e6e0cd99
keybindingLabel.foreground#002b36
keybindingTable.headerBackground#002b360a
keybindingTable.rowsBackground#002b360a
list.activeSelectionBackground#2B60C022
list.activeSelectionBorder#2B60C033
list.activeSelectionForeground#002b36
list.activeSelectionIconForeground#002b36
list.deemphasizedForeground#073642
list.dropBackground#beb8a5
list.errorForeground#AE4001
list.filterMatchBackground#AE400155
list.focusHighlightForeground#2B60C0
list.focusOutline#2B60C055
list.highlightForeground#2B60C0
list.hoverBackground#2B60C022
list.hoverForeground#002b36
list.inactiveSelectionBackground#2B60C022
list.inactiveSelectionForeground#002b36
list.invalidItemForeground#875B10
list.warningForeground#875B10
listFilterWidget.background#ded8c5
listFilterWidget.noMatchesOutline#B00F0F
listFilterWidget.outline#cec8b5
menu.background#e6e0cd
menu.foreground#002b36
menu.selectionBackground#2B60C033
menu.selectionForeground#002b36
menu.separatorBackground#ded8c5
menubar.selectionBackground#002b361a
menubar.selectionForeground#002b36
merge.commonContentBackground#e6e0cd
merge.commonHeaderBackground#ded8c5
merge.currentContentBackground#03758533
merge.currentHeaderBackground#03758580
merge.incomingContentBackground#2B60C033
merge.incomingHeaderBackground#2B60C080
minimap.errorHighlight#B00F0Fb3
minimap.findMatchHighlight#B310A5AA
minimap.foregroundOpacity#beb8a5
minimap.selectionHighlight#2B60C033
minimap.selectionOccurrenceHighlight#eee8d5
minimap.warningHighlight#875B10
minimapGutter.addedBackground#407000
minimapGutter.deletedBackground#B00F0F
minimapGutter.modifiedBackground#875B10
minimapSlider.activeBackground#beb8a533
minimapSlider.background#cec8b533
minimapSlider.hoverBackground#beb8a555
notebook.cellBorderColor#eee8d5
notebook.cellEditorBackground#e6e0cd
notebook.cellInsertionIndicator#2B60C0
notebook.cellStatusBarItemHoverBackground#beb8a555
notebook.cellToolbarSeparator#07364259
notebook.focusedCellBorder#2B60C0
notebook.focusedEditorBorder#2B60C0
notebook.inactiveFocusedCellBorder#eee8d5
notebook.selectedCellBackground#eee8d5
notebook.selectedCellBorder#eee8d5
notebook.symbolHighlightBackground#FFFFFF0b
notebookScrollbarSlider.activeBackground#cec8b566
notebookScrollbarSlider.background#ded8c566
notebookScrollbarSlider.hoverBackground#beb8a555
notebookStatusErrorIcon.foreground#AE4001
notebookStatusRunningIcon.foreground#002b36
notebookStatusSuccessIcon.foreground#407000
notificationCenterHeader.background#ded8c5
notificationLink.foreground#2B60C0
notifications.background#e6e0cd
notifications.border#ded8c5
notifications.foreground#002b36
notificationsErrorIcon.foreground#B00F0F
notificationsInfoIcon.foreground#2B60C0
notificationsWarningIcon.foreground#875B10
panel.background#ded8c5
panel.border#07364259
panel.dropBorder#002b36
panel.forground#002b36
panelSection.border#07364259
panelSection.dropBackground#ded8c580
panelSectionHeader.background#07364233
panelTitle.activeBorder#002b36
panelTitle.activeForeground#002b36
panelTitle.inactiveForeground#002b3699
peekView.border#2B60C0
peekViewEditor.background#eee8d5
peekViewEditor.matchHighlightBackground#AE400199
peekViewEditorGutter.background#e6e0cd
peekViewResult.background#e6e0cd
peekViewResult.fileForeground#002b36
peekViewResult.foreground#002b36
peekViewResult.lineForeground#002b36
peekViewResult.matchHighlightBackground#AE40014d
peekViewResult.selectionBackground#2B60C033
peekViewResult.selectionForeground#002b36
peekViewTitle.background#ded8c5
peekViewTitleDescription.foreground#002b36b3
peekViewTitleLabel.foreground#002b36
pickerGroup.background#e6e0cd
pickerGroup.border#eee8d5
pickerGroup.foreground#002b36
ports.iconRunningProcessForeground#407000
problemsErrorIcon.foreground#B00F0F
problemsInfoIcon.foreground#2B60C0
problemsWarningIcon.foreground#875B10
progressBar.background#B310A5
quickInput.background#ded8c5
quickInput.foreground#002b36
quickInputList.focusBackground#eee8d5
quickInputList.focusForeground#002b36
quickInputList.focusIconForeground#002b36
quickInputTitle.background#ded8c5
sash.hoverBorder#2B60C0
scm.providerBorder#cec8b5
scrollbar.shadow#cec8b5
scrollbarSlider.activeBackground#cec8b566
scrollbarSlider.background#ded8c566
scrollbarSlider.hoverBackground#beb8a555
searchEditor.findMatchBackground#dcd3cd
searchEditor.findMatchBorder#795CA5
selection.background#2B60C033
settings.checkboxBackground#e6e0cd
settings.checkboxBorder#e6e0cd
settings.checkboxForeground#002b36
settings.dropdownBackground#eee8d5
settings.dropdownBorder#e6e0cd
settings.dropdownForeground#002b36
settings.dropdownListBorder#e6e0cd
settings.focusedRowBackground#eee8d599
settings.focusedRowBorder#ded8c51f
settings.headerBorder#07364259
settings.headerForeground#002b36
settings.modifiedItemIndicator#037585
settings.numberInputBackground#e6e0cd
settings.numberInputForeground#002b36
settings.rowHoverBackground#eee8d555
settings.sashBorder#07364259
settings.textInputBackground#e6e0cd
settings.textInputForeground#002b36
sideBar.background#e6e0cd
sideBar.border#ded8c5
sideBar.dropBackground#beb8a555
sideBar.foreground#002b36
sideBarSectionHeader.background#ded8c5
sideBarSectionHeader.border#cec8b5
sideBarSectionHeader.foreground#002b36
sideBarTitle.foreground#002b36
sideBySideEditor.horizontalBorder#beb8a5
sideBySideEditor.verticalBorder#beb8a5
statusBar.background#ded8c5
statusBar.debuggingBackground#e6e0cd
statusBar.debuggingForeground#002b36
statusBar.focusBorder#beb8a5
statusBar.foreground#002b36
statusBar.noFolderBackground#795CA5
statusBar.noFolderForeground#002b36
statusBarItem.activeBackground#002b362e
statusBarItem.compactHoverBackground#beb8a555
statusBarItem.errorBackground#B00F0F
statusBarItem.errorForeground#002b36
statusBarItem.focusBorder#002b36
statusBarItem.hoverBackground#beb8a555
statusBarItem.prominentBackground#beb8a555
statusBarItem.prominentForeground#002b36
statusBarItem.prominentHoverBackground#beb8a555
statusBarItem.remoteBackground#407000
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#cec8b5
statusBarItem.warningForeground#FFFFFF
symbolIcon.arrayForeground#002b36
symbolIcon.booleanForeground#002b36
symbolIcon.classForeground#875B10
symbolIcon.colorForeground#002b36
symbolIcon.constantForeground#B310A5
symbolIcon.constructorForeground#2B60C0
symbolIcon.enumeratorForeground#875B10
symbolIcon.enumeratorMemberForeground#037585
symbolIcon.eventForeground#875B10
symbolIcon.fieldForeground#037585
symbolIcon.fileForeground#002b36
symbolIcon.folderForeground#002b36
symbolIcon.functionForeground#795CA5
symbolIcon.interfaceForeground#2B60C0
symbolIcon.keyForeground#002b36
symbolIcon.keywordForeground#002b36
symbolIcon.methodForeground#795CA5
symbolIcon.moduleForeground#002b36
symbolIcon.namespaceForeground#002b36
symbolIcon.nullForeground#002b36
symbolIcon.numberForeground#002b36
symbolIcon.objectForeground#002b36
symbolIcon.operatorForeground#002b36
symbolIcon.packageForeground#002b36
symbolIcon.propertyForeground#002b36
symbolIcon.referenceForeground#002b36
symbolIcon.snippetForeground#002b36
symbolIcon.stringForeground#002b36
symbolIcon.structForeground#002b36
symbolIcon.textForeground#002b36
symbolIcon.typeParameterForeground#002b36
symbolIcon.unitForeground#002b36
symbolIcon.variableForeground#2B60C0
tab.activeBackground#eee8d5
tab.activeForeground#002b36
tab.activeModifiedBorder#875B10
tab.border#eee8d5
tab.inactiveBackground#e6e0cd
tab.inactiveForeground#002b36
tab.inactiveModifiedBorder#875B10
tab.lastPinnedBorder#002b3633
tab.unfocusedActiveBackground#e6e0cd
tab.unfocusedActiveForeground#073642
tab.unfocusedActiveModifiedBorder#2B60C080
tab.unfocusedInactiveBackground#ded8c5
tab.unfocusedInactiveForeground#073642
tab.unfocusedInactiveModifiedBorder#2B60C040
terminal.ansiBlack#002b36
terminal.ansiBlue#2B60C0DD
terminal.ansiBrightBlack#002b36
terminal.ansiBrightBlue#2B60C0
terminal.ansiBrightCyan#037585
terminal.ansiBrightGreen#407000
terminal.ansiBrightMagenta#B310A5
terminal.ansiBrightRed#B00F0F
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#875B10
terminal.ansiCyan#037585DD
terminal.ansiGreen#407000DD
terminal.ansiMagenta#B310A5DD
terminal.ansiRed#B00F0FDD
terminal.ansiWhite#FFFFFFDD
terminal.ansiYellow#875B10DD
terminal.background#eee8d5
terminal.dropBackground#eee8d580
terminal.findMatchBorder#cec8b5
terminal.findMatchHighlightBackground#cec8b5
terminal.findMatchHighlightBorder#AE400155
terminal.foreground#002b36
terminal.selectionBackground#cec8b5
terminalCommandDecoration.defaultBackground#FFFFFF40
terminalCommandDecoration.errorBackground#B00F0F
terminalCommandDecoration.successBackground#2B60C0
terminalCursor.background#eee8d5
terminalCursor.foreground#002b36
terminalOverviewRuler.cursorForeground#073642cc
terminalOverviewRuler.findMatchForeground#AE40017e
testing.iconErrored#B00F0F
testing.iconFailed#B00F0F
testing.iconPassed#407000
testing.iconQueued#875B10
testing.iconSkipped#073642
testing.iconUnset#073642
testing.message.error.decorationForeground#B00F0F
testing.message.error.lineBackground#B00F0F33
testing.message.info.decorationForeground#002b3680
testing.peekBorder#B00F0F
testing.peekHeaderBackground#B00F0F1a
testing.runAction#407000
textBlockQuote.background#e6e0cd
textBlockQuote.border#2B60C080
textCodeBlock.background#eee8d5
textLink.activeForeground#2B60C0
textLink.foreground#2B60C0
textPreformat.foreground#875B10
textSeparator.foreground#002b362e
titleBar.activeBackground#eee8d5
titleBar.activeForeground#002b36
titleBar.inactiveBackground#eee8d5
titleBar.inactiveForeground#002b36
toolbar.activeBackground#eee8d5
toolbar.hoverBackground#eee8d555
tree.indentGuidesStroke#073642
tree.tableColumnsBorder#073642
tree.tableOddRowsBackground#002b360a
welcomePage.background#eee8d5
welcomePage.progress.background#e6e0cd
welcomePage.progress.foreground#2B60C0
welcomePage.tileBackground#e6e0cd
welcomePage.tileHoverBackground#eee8d555
welcomePage.tileShadow#e6e0cd
widget.shadow#cec8b5
window.activeBorder#cec8b5
window.inactiveBorder#cec8b5

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	#073642
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	#073642
comment.block.documentation keyword	#073642
comment.block.documentation entity.name.type.instance	#795CA5
source.css meta.selector	#AE4001DF	—
source.css entity.name.tag	#795CA5	—
source.css entity.other.attribute-name	#002b36
source.css punctuation.definition.attribute-selector, source.css punctuation.definition.entity.begin.bracket.square, source.css punctuation.definition.entity.end.bracket.square	#002b36	—
source.css punctuation.definition	#002b36BF	—
source.css meta.attribute-selector	#407000	—
source.css entity.other.attribute-name.class	#2B60C0
source.css entity.other.attribute-name.parent-selector punctuation.definition	#875B10BF	—
source.css entity.other.attribute-name.id	#2B60C0
source.css entity.name.tag.reference	#102530	—
source.css entity.other.attribute-name.pseudo-class, source.css entity.other.attribute-name.pseudo-element	#795CA5	—
source.css punctuation.section.function.begin.bracket.round, source.css punctuation.section.function.end.bracket.round	#795CA5BF	—
source.css support.type.property-name, source.css meta.property-list entity.name.tag	#037585	—
support.type.vendored.property-name	#037585BF	—
source.css constant.numeric	#795CA5
source.css keyword.other.unit	#795CA5BF
source.css support.function	#875B10BF	—
source.css meta.function.color, source.css meta.function.color support.function.misc, source.css support.constant.color, source.css constant.other.color	#002b36	—
source.css support.constant.property-value	#B310A5	—
source.css keyword.other.important, source.css invalid.deprecated	#AE4001DF	—
keyword.operator.combinator.css	#875B10DF	—
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	#073642	—
source.css keyword.control.at-rule.import, source.css keyword.control.at-rule punctuation.definition, source.css keyword.control.at-rule.media	#795CA5	—
source.css keyword.control.at-rule.mixin, source.css keyword.operator.logical.and.media, source.css keyword.operator.logical.only.media	#073642	—
source.css keyword.control.at-rule, source.css entity.name.function, source.css entity.other.attribute-name.class.mixin	#875B10	—
source.css meta.at-rule.extend	#795CA5	—
source.css variable, source.css meta.definition.variable variable, source.css variable.other	#875B10	—
source.css punctuation.definition.variable	#875B107f	—
source.css variable.argument	#875B10
source.css support.function.any-method.builtin, source.css meta.function.variable	#875B10	—
source.css variable.other.interpolation	#875B10	italic
text, source	#002b36	—
string, string.quoted, punctuation.definition.string	#407000	—
constant.numeric	#795CA5	—
constant.language.null, constant.language.undefined, constant.language, constant.language.boolean	#B310A5	italic
constant.language.boolean, constant.language	#B310A5	—
string.template, string.interpolated	#875B10	—
keyword.other.substitution.begin, keyword.other.substitution.end, keyword.other.template.begin, keyword.other.template.end	#875B107F	—
punctuation.definition.template-expression	#407000	—
invalid, invalid.illegal	#AE4001	—
invalid.deprecated	#AE40017F	—
string.regexp	#875B10	—
constant.other.object.key	#037585	—
meta.brace, punctuation.definition.block, punctuation.terminator, punctuation.separator, meta.delimiter	#073642	—
punctuation	#073642	—
meta.tag, meta.tag.any	#2B60C0	—
meta.tag.structure entity.name.tag, meta.tag.block.any	#037585	—
meta.tag.inline entity.name.tag, meta.tag.structure.label entity.name.tag, meta.tag.object.img entity.name.tag	#795CA5	—
meta.tag.structure.select entity.name.tag, meta.tag.structure.textarea entity.name.tag, meta.tag.structure.input entity.name.tag	#002b36	—
meta.tag.structure.button entity.name.tag, meta.tag.inline.a	#002b36	—
meta.tag.custom	#795CA5	—
meta.tag.other.unrecognized, meta.tag.inline entity.name.tag meta.tag.structure entity.name.tag	#102530	—
meta.tag.metadata.script	#795CA5	—
entity.other.attribute-name	#795CA5	italic
meta.attribute.type.html, string.quoted.jsx	#407000	—
meta.attribute.data-x entity.other.attribute-name.html	#B310A5	—
meta.attribute.class.html string.quoted.double.html, meta.attribute.style.html string.quoted.double.html source.css	#875B10	—
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	#875B10BF	—
meta.tag.structure.svg entity.name.tag, meta.tag.object.img entity.name.tag	#002b36	—
meta.attribute.href.html string.quoted.double.html, meta.attribute.action.html string.quoted.double.html	#875B10BF	—
meta.attribute.href.html punctuation.definition.string, meta.attribute.action.html punctuation.definition.string	#875B107F	—
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	#407000	—
meta.attribute.event-handler entity.other.attribute-name.html	#875B10	—
punctuation.definition.tag, punctuation.definition.tag source.css	#037585BF	—
meta.embedded.line.css source.css	#407000	—
meta.tag.metadata.doctype, text.html punctuation.section.embedded	#073642	—
meta.jsx.children	#002b36	—
meta.jsx meta.tag, source.js meta.tag	#037585	—
meta.jsx meta.tag support.class.component	#795CA5	—
meta.jsx meta.tag punctuation.definition.tag	#795CA5BF	—
meta.jsx entity.other.attribute-name, source.js entity.other.attribute-name	#037585	italic
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.key-value.json	#073642	—
constant.language.json, constant.language	#B310A5	—
punctuation.separator.dictionary.pair.json	#002b36	—
source.json meta.structure.dictionary.json support.type.property-name.json	#037585	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#037585	—
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	#795CA5	—
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	#2B60C0	—
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	#002b36	—
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	#002b36	—
markup.bold.markdown	#002b36	—
meta.paragraph.markdown	#002b36	—
markup.italic.markdown	—	italic
markup.fenced_code.block	#073642	—
markup.underline.link.markdown	—	—
markup.quote.markdown	#795CA5	italic
punctuation.definition.list.begin.markdown, markup.list.numbered.markdown	#795CA5	—
heading.1.markdown, markup.heading.setext.1.markdown	#037585	bold
heading.2.markdown, markup.heading.setext.2.markdown	#037585	—
heading.3.markdown	#2B60C0	—
heading.4.markdown	#002b36	—
heading.5.markdown, heading.6.markdown	#102530	—
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown	#073642	—
punctuation.definition.markdown, punctuation.separator.key-value.markdown, punctuation.definition.constant.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown	#073642	—
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown	#073642	—
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	#875B10	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#073642	—
constant.other.reference.link.markdown	#875B10	—
markup.inline.raw.string.markdown	#875B10	—
meta.separator.markdown	#073642	—
entity.name.tag.yaml, keyword.other.definition.ini	#2B60C0	—
log.date	#002b36	—
log.constant	#B310A5	—
log.error, log.exception	#AE4001	—
log.error	#AE4001	—
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	#002b36	—
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	#002b36BF	—
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	#073642	—
meta.object-literal.key, meta.object-literal.key, meta.property.object, meta.structure.dictionary.key.python, source.powershell variable.other.member, variable.other.enummember	#037585	—
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	#2B60C0	—
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	#795CA5	—
support.class, support.constant, support.class.builtin, support.function.builtin, support.function.node, variable.language	#795CA5	—
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	#B310A5	—
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	#002b36	—
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	#795CA5	—
meta.type.parameters.ts, meta.type.parameters	#795CA5	—
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	#875B10	—
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	#AE4001	—
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	#795CA5	—
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	#407000	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, meta.template.expression	#875B10	—
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	#795CA5	—
invalid	#AE4001	—
variable.other.positional	#795CA5	—
variable.other.normal.shell	#037585	—

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