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

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#fdf6e3
activityBar.background#073642
activityBar.dropBorder#fdf6e3
activityBar.foreground#fdf6e3
activityBar.inactiveForeground#ded8c5
activityBarBadge.background#2B60C0
activityBarBadge.foreground#FFFFFF
background#073642
badge.background#2B60C0
badge.foreground#FFFFFF
banner.background#073642
banner.foreground#ded8c5
banner.iconForeground#fdf6e3
breadcrumb.activeSelectionForeground#ded8c5
breadcrumb.background#102530
breadcrumb.focusForeground#ded8c5
breadcrumb.foreground#839496
breadcrumbPicker.background#002b36
button.background#2B60C0
button.foreground#FFFFFF
button.hoverBackground#0AB8FF
button.secondaryBackground#0AB8FFCC
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#0AB8FF
charts.blue#0AB8FF
charts.foreground#ded8c5
charts.green#85BD2F
charts.lines#102530
charts.orange#FF8F40
charts.purple#B0A0FF
charts.red#FF7070
charts.yellow#FFA000
checkbox.background#002b36
checkbox.border#002b36
checkbox.foreground#fdf6e3
debugConsole.errorForeground#FF60B0
debugConsole.infoForeground#0AB8FF
debugConsole.sourceForeground#839496
debugConsole.warningForeground#FFA000
debugConsoleInputIcon.foreground#839496
debugExceptionWidget.background#FF707033
debugExceptionWidget.border#FF7070
debugIcon.breakpointCurrentStackframeForeground#FFA000
debugIcon.breakpointDisabledForeground#073642
debugIcon.breakpointForeground#FF7070
debugIcon.breakpointStackframeForeground#FF7070
debugIcon.breakpointUnverifiedForeground#073642
debugIcon.continueForeground#0AB8FF
debugIcon.disconnectForeground#FF8F40
debugIcon.pauseForeground#0AB8FF
debugIcon.restartForeground#85BD2F
debugIcon.startForeground#85BD2F
debugIcon.stepBackForeground#0AB8FF
debugIcon.stepIntoForeground#0AB8FF
debugIcon.stepOutForeground#0AB8FF
debugIcon.stepOverForeground#0AB8FF
debugIcon.stopForeground#FF8F40
debugTokenExpression.boolean#0AB8FF
debugTokenExpression.error#FF8F40
debugTokenExpression.name#FF60B0
debugTokenExpression.number#85BD2F
debugTokenExpression.string#FF8F40
debugTokenExpression.value#839496
debugToolBar.background#002b36
debugView.exceptionLabelBackground#FF7070
debugView.exceptionLabelForeground#ded8c5
debugView.stateLabelBackground#ded8c534
debugView.stateLabelForeground#ded8c5
debugView.valueChangedHighlight#0AB8FF
descriptionForeground#ded8c5b3
diffEditor.diagonalFill#ded8c533
diffEditor.foreground#ded8c5
diffEditor.insertedTextBackground#85BD2F22
diffEditor.removedTextBackground#FF707022
diffEditorGutter.insertedLineBackground#85BD2F44
diffEditorGutter.removedLineBackground#FF707044
diffEditorOverview.insertedForeground#ded8c5
diffEditorOverview.removedForeground#ded8c5
disabledForeground#ded8c580
dropdown.background#073642
dropdown.border#586e75
dropdown.foreground#eee8d5
dropdown.listBackground#002b36
editor.background#102530
editor.findMatchBackground#28374f
editor.findMatchBorder#303d59
editor.findMatchHighlightBackground#303d59
editor.findMatchHighlightBorder#B0A0FF
editor.findRangeHighlightBackground#002b36
editor.focusedStackFrameHighlightBackground#586e75
editor.foldBackground#073642
editor.foreground#ded8c5
editor.guides.highlightActiveIndentation
editor.guides.indentation
editor.hoverHighlightBackground#586e75
editor.inactiveSelectionBackground#0AB8FF33
editor.inlineValuesBackground#FFA00033
editor.inlineValuesForeground#ded8c580
editor.lineHighlightBackground#002b36
editor.lineHighlightBorder#073642
editor.linkedEditingBackground#FF70704d
editor.rangeHighlightBackground#586e75
editor.selectionBackground#28374f
editor.selectionHighlightBackground#28374f
editor.selectionHighlightBorder#303d59
editor.snippetFinalTabstopHighlightBackground#073642
editor.snippetFinalTabstopHighlightBorder#586e75
editor.snippetTabstopHighlightBackground#073642
editor.snippetTabstopHighlightBorder#586e75
editor.stackFrameHighlightBackground#FFA00033
editor.symbolHighlightBackground#FF8F4055
editor.wordHighlightBackground#28374f
editor.wordHighlightBorder#657b83
editor.wordHighlightStrongBackground#28374f
editor.wordHighlightStrongBorder#657b83
editorActiveLineNumber.foreground#839496
editorBracketHighlight.foreground1#FFA000
editorBracketHighlight.foreground2#FF60B0
editorBracketHighlight.foreground3#0AB8FF
editorBracketHighlight.foreground4#FF8F40
editorBracketHighlight.foreground5#27C0B8
editorBracketHighlight.foreground6#B0A0FF
editorBracketHighlight.unexpectedBracket.foreground#FF7070cc
editorBracketMatch.background#586e75
editorBracketMatch.border#657b83
editorCodeLens.foreground#657b83
editorCommentsWidget.rangeActiveBackground#0AB8FF33
editorCommentsWidget.rangeActiveBorder#0AB8FF66
editorCommentsWidget.rangeBackground#0AB8FF33
editorCommentsWidget.rangeBorder#0AB8FF66
editorCommentsWidget.resolvedBorder#ded8c580
editorCommentsWidget.unresolvedBorder#0AB8FF
editorCursor.foreground#eee8d5
editorError.foreground#FF7070
editorGhostText.foreground#ded8c556
editorGroup.border#002b36
editorGroup.dropBackground#07364280
editorGroup.dropIntoPromptBackground#002b36
editorGroup.dropIntoPromptForeground#ded8c5
editorGroup.emptyBackground#073642
editorGroupHeader.border#586e7588
editorGroupHeader.noTabsBackground#102530
editorGroupHeader.tabsBackground#073642
editorGroupHeader.tabsBorder#586e7588
editorGroupHeader.tabsForeground#ded8c5
editorGutter.addedBackground#85BD2F
editorGutter.background#102530
editorGutter.border#102530
editorGutter.commentRangeForeground#586e75
editorGutter.deletedBackground#FF7070
editorGutter.foldingControlForeground#ded8c5
editorGutter.modifiedBackground#FFA000
editorHint.foreground#ded8c5
editorHoverWidget.background#002b36
editorHoverWidget.border#002b36
editorHoverWidget.highlightForeground#0AB8FF
editorHoverWidget.statusBarBackground#073642
editorIndentGuide.activeBackground#657b83
editorIndentGuide.background#657b83
editorInfo.background#073642
editorInfo.border#586e75
editorInfo.foreground#0AB8FF
editorInlayHint.background#586e75
editorInlayHint.foreground#ded8c5cc
editorInlayHint.parameterBackground#586e75
editorInlayHint.parameterForeground#ded8c5cc
editorInlayHint.typeBackground#586e75
editorInlayHint.typeForeground#ded8c5cc
editorLightBulb.foreground#FFA000
editorLightBulbAutoFix.foreground#FF8F40
editorLineNumber.activeForeground#eee8d5
editorLineNumber.foreground#ded8c5
editorLink.activeForeground#FFA000
editorMarkerNavigation.background#102530
editorMarkerNavigationError.background#FF7070
editorMarkerNavigationError.headerBackground#FF70701a
editorMarkerNavigationInfo.background#0AB8FF
editorMarkerNavigationInfo.headerBackground#0AB8FF
editorMarkerNavigationWarning.background#FFA000
editorMarkerNavigationWarning.headerBackground#FFA0001a
editorOverviewRuler.addedForeground#85BD2F
editorOverviewRuler.border#073642
editorOverviewRuler.bracketMatchForeground#839496
editorOverviewRuler.commonContentForeground#ded8c566
editorOverviewRuler.currentContentForeground#27C0B880
editorOverviewRuler.deletedForeground#FF7070
editorOverviewRuler.errorForeground#FF8F40
editorOverviewRuler.findMatchForeground#FF8F407e
editorOverviewRuler.incomingContentForeground#0AB8FF80
editorOverviewRuler.infoForeground#0AB8FF
editorOverviewRuler.modifiedForeground#FFA000
editorOverviewRuler.rangeHighlightForeground#0AB8FF99
editorOverviewRuler.selectionHighlightForeground#839496cc
editorOverviewRuler.warningForeground#FFA000
editorOverviewRuler.wordHighlightForeground#839496cc
editorOverviewRuler.wordHighlightStrongForeground#FF60B0cc
editorPane.background#102530
editorRuler.foreground#073642
editorSuggestWidget.background#002b36
editorSuggestWidget.border#102530
editorSuggestWidget.focusHighlightForeground#0AB8FF
editorSuggestWidget.foreground#ded8c5
editorSuggestWidget.highlightForeground#27C0B8
editorSuggestWidget.selectedBackground#28374f
editorSuggestWidget.selectedIconForeground#ded8c5
editorSuggestWidgetStatus.foreground#ded8c580
editorUnicodeHighlight.background#FFA00026
editorUnicodeHighlight.border#FFA000
editorUnnecessaryCode.opacity#657b83aa
editorWarning.foreground#FFA000
editorWhitespace.foreground#657b83
editorWidget.background#073642
editorWidget.border#586e75
editorWidget.foreground#ded8c5
errorForeground#FF8F40
extensionBadge.remoteBackground#2B60C0
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#0AB8FFCC
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#2B60C0
extensionIcon.preReleaseForeground#85BD2F
extensionIcon.starForeground#FF8F40
extensionIcon.verifiedForeground#0AB8FF
focusBorder#657b83
foreground#ded8c5
gitDecoration.addedResourceForeground#85BD2F
gitDecoration.conflictingResourceForeground#FF7070
gitDecoration.deletedResourceForeground#FF7070
gitDecoration.ignoredResourceForeground#839496
gitDecoration.modifiedResourceForeground#FFA000
gitDecoration.renamedResourceForeground#FF8F40
gitDecoration.stageDeletedResourceForeground#FF7070
gitDecoration.stageModifiedResourceForeground#FFA000
gitDecoration.submoduleResourceForeground#0AB8FF
gitDecoration.untrackedResourceForeground#85BD2F
gitlens.closedAutolinkedIssueIconColor#B0A0FF
gitlens.closedPullRequestIconColor#FF7070
gitlens.decorations.addedForegroundColor#85BD2F
gitlens.decorations.branchAheadForegroundColor#85BD2F
gitlens.decorations.branchBehindForegroundColor#FF8F40
gitlens.decorations.branchDivergedForegroundColor#FFA000
gitlens.decorations.branchMissingUpstreamForegroundColor#FF8F40
gitlens.decorations.branchUnpublishedForegroundColor#85BD2F
gitlens.decorations.copiedForegroundColor#85BD2F
gitlens.decorations.deletedForegroundColor#FF7070
gitlens.decorations.ignoredForegroundColor#839496
gitlens.decorations.modifiedForegroundColor#FFA000
gitlens.decorations.renamedForegroundColor#85BD2F
gitlens.decorations.untrackedForegroundColor#85BD2F
gitlens.decorations.worktreeView.hasUncommittedChangesForegroundColor#FFA000
gitlens.gutterBackgroundColor#657b8313
gitlens.gutterForegroundColor#839496
gitlens.gutterUncommittedForegroundColor#0AB8FFCC
gitlens.lineHighlightBackgroundColor#0AB8FF11
gitlens.lineHighlightOverviewRulerColor#0AB8FFCC
gitlens.mergedPullRequestIconColor#B0A0FF
gitlens.openAutolinkedIssueIconColor#85BD2F
gitlens.openPullRequestIconColor#85BD2F
gitlens.trailingLineBackgroundColor#657b8300
gitlens.trailingLineForegroundColor#657b83CC
gitlens.unpublishedChangesIconColor#FF8F40
gitlens.unpublishedCommitIconColor#FF8F40
gitlens.unpulledChangesIconColor#FF8F40
icon.foreground#ded8c5
input.background#002b36
input.border#657b83
input.foreground#ded8c5
input.placeholderForeground#839496
inputOption.activeBackground#102530
inputOption.activeBorder#102530
inputOption.activeForeground#0AB8FF
inputOption.hoverBackground#586e75
inputOption.hoverBorder#657b83
inputValidation.errorBorder#FF7070
inputValidation.infoBackground#28374f
inputValidation.infoBorder#0AB8FF
inputValidation.warningBackground#102530
inputValidation.warningBorder#FFA000
interactive.activeCodeBorder#0AB8FF
interactive.inactiveCodeBorder#102530
keybindingLabel.background#586e75
keybindingLabel.border#002b3699
keybindingLabel.bottomBorder#002b3699
keybindingLabel.foreground#ded8c5
keybindingTable.headerBackground#ded8c50a
keybindingTable.rowsBackground#ded8c50a
list.activeSelectionBackground#0AB8FF22
list.activeSelectionBorder#0AB8FF33
list.activeSelectionForeground#ded8c5
list.activeSelectionIconForeground#ded8c5
list.deemphasizedForeground#839496
list.dropBackground#657b83
list.errorForeground#FF8F40
list.filterMatchBackground#FF8F4055
list.focusHighlightForeground#0AB8FF
list.focusOutline#0AB8FF55
list.highlightForeground#0AB8FF
list.hoverBackground#0AB8FF22
list.hoverForeground#ded8c5
list.inactiveSelectionBackground#0AB8FF22
list.inactiveSelectionForeground#ded8c5
list.invalidItemForeground#FFA000
list.warningForeground#FFA000
listFilterWidget.background#073642
listFilterWidget.noMatchesOutline#FF7070
listFilterWidget.outline#586e75
menu.background#002b36
menu.foreground#ded8c5
menu.selectionBackground#0AB8FF33
menu.selectionForeground#ded8c5
menu.separatorBackground#073642
menubar.selectionBackground#ded8c51a
menubar.selectionForeground#ded8c5
merge.commonContentBackground#002b36
merge.commonHeaderBackground#073642
merge.currentContentBackground#27C0B833
merge.currentHeaderBackground#27C0B880
merge.incomingContentBackground#0AB8FF33
merge.incomingHeaderBackground#0AB8FF80
minimap.errorHighlight#FF7070b3
minimap.findMatchHighlight#FF60B0AA
minimap.foregroundOpacity#657b83
minimap.selectionHighlight#0AB8FF33
minimap.selectionOccurrenceHighlight#102530
minimap.warningHighlight#FFA000
minimapGutter.addedBackground#85BD2F
minimapGutter.deletedBackground#FF7070
minimapGutter.modifiedBackground#FFA000
minimapSlider.activeBackground#657b8333
minimapSlider.background#586e7533
minimapSlider.hoverBackground#657b8355
notebook.cellBorderColor#102530
notebook.cellEditorBackground#002b36
notebook.cellInsertionIndicator#0AB8FF
notebook.cellStatusBarItemHoverBackground#657b8355
notebook.cellToolbarSeparator#83949659
notebook.focusedCellBorder#0AB8FF
notebook.focusedEditorBorder#0AB8FF
notebook.inactiveFocusedCellBorder#102530
notebook.selectedCellBackground#102530
notebook.selectedCellBorder#102530
notebook.symbolHighlightBackground#FFFFFF0b
notebookScrollbarSlider.activeBackground#586e7566
notebookScrollbarSlider.background#07364266
notebookScrollbarSlider.hoverBackground#657b8355
notebookStatusErrorIcon.foreground#FF8F40
notebookStatusRunningIcon.foreground#ded8c5
notebookStatusSuccessIcon.foreground#85BD2F
notificationCenterHeader.background#073642
notificationLink.foreground#0AB8FF
notifications.background#002b36
notifications.border#073642
notifications.foreground#ded8c5
notificationsErrorIcon.foreground#FF7070
notificationsInfoIcon.foreground#0AB8FF
notificationsWarningIcon.foreground#FFA000
panel.background#073642
panel.border#83949659
panel.dropBorder#ded8c5
panel.forground#ded8c5
panelSection.border#83949659
panelSection.dropBackground#07364280
panelSectionHeader.background#83949633
panelTitle.activeBorder#ded8c5
panelTitle.activeForeground#ded8c5
panelTitle.inactiveForeground#ded8c599
peekView.border#0AB8FF
peekViewEditor.background#102530
peekViewEditor.matchHighlightBackground#FF8F4099
peekViewEditorGutter.background#002b36
peekViewResult.background#002b36
peekViewResult.fileForeground#ded8c5
peekViewResult.foreground#ded8c5
peekViewResult.lineForeground#ded8c5
peekViewResult.matchHighlightBackground#FF8F404d
peekViewResult.selectionBackground#0AB8FF33
peekViewResult.selectionForeground#ded8c5
peekViewTitle.background#073642
peekViewTitleDescription.foreground#ded8c5b3
peekViewTitleLabel.foreground#ded8c5
pickerGroup.background#002b36
pickerGroup.border#102530
pickerGroup.foreground#ded8c5
ports.iconRunningProcessForeground#85BD2F
problemsErrorIcon.foreground#FF7070
problemsInfoIcon.foreground#0AB8FF
problemsWarningIcon.foreground#FFA000
progressBar.background#FF60B0
quickInput.background#073642
quickInput.foreground#ded8c5
quickInputList.focusBackground#102530
quickInputList.focusForeground#ded8c5
quickInputList.focusIconForeground#eee8d5
quickInputTitle.background#073642
sash.hoverBorder#0AB8FF
scm.providerBorder#586e75
scrollbar.shadow#586e75
scrollbarSlider.activeBackground#586e7566
scrollbarSlider.background#07364266
scrollbarSlider.hoverBackground#657b8355
searchEditor.findMatchBackground#28374f
searchEditor.findMatchBorder#B0A0FF
selection.background#0AB8FF33
settings.checkboxBackground#002b36
settings.checkboxBorder#002b36
settings.checkboxForeground#ded8c5
settings.dropdownBackground#102530
settings.dropdownBorder#002b36
settings.dropdownForeground#ded8c5
settings.dropdownListBorder#002b36
settings.focusedRowBackground#10253099
settings.focusedRowBorder#0736421f
settings.headerBorder#83949659
settings.headerForeground#ded8c5
settings.modifiedItemIndicator#27C0B8
settings.numberInputBackground#002b36
settings.numberInputForeground#ded8c5
settings.rowHoverBackground#10253055
settings.sashBorder#83949659
settings.textInputBackground#002b36
settings.textInputForeground#ded8c5
sideBar.background#002b36
sideBar.border#073642
sideBar.dropBackground#657b8355
sideBar.foreground#ded8c5
sideBarSectionHeader.background#073642
sideBarSectionHeader.border#586e75
sideBarSectionHeader.foreground#ded8c5
sideBarTitle.foreground#eee8d5
sideBySideEditor.horizontalBorder#657b83
sideBySideEditor.verticalBorder#657b83
statusBar.background#073642
statusBar.debuggingBackground#002b36
statusBar.debuggingForeground#ded8c5
statusBar.focusBorder#657b83
statusBar.foreground#ded8c5
statusBar.noFolderBackground#B0A0FF
statusBar.noFolderForeground#ded8c5
statusBarItem.activeBackground#ded8c52e
statusBarItem.compactHoverBackground#657b8355
statusBarItem.errorBackground#FF7070
statusBarItem.errorForeground#ded8c5
statusBarItem.focusBorder#ded8c5
statusBarItem.hoverBackground#657b8355
statusBarItem.prominentBackground#657b8355
statusBarItem.prominentForeground#eee8d5
statusBarItem.prominentHoverBackground#657b8355
statusBarItem.remoteBackground#85BD2F
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#586e75
statusBarItem.warningForeground#FFFFFF
symbolIcon.arrayForeground#ded8c5
symbolIcon.booleanForeground#ded8c5
symbolIcon.classForeground#FFA000
symbolIcon.colorForeground#ded8c5
symbolIcon.constantForeground#FF60B0
symbolIcon.constructorForeground#0AB8FF
symbolIcon.enumeratorForeground#FFA000
symbolIcon.enumeratorMemberForeground#27C0B8
symbolIcon.eventForeground#FFA000
symbolIcon.fieldForeground#27C0B8
symbolIcon.fileForeground#ded8c5
symbolIcon.folderForeground#ded8c5
symbolIcon.functionForeground#B0A0FF
symbolIcon.interfaceForeground#0AB8FF
symbolIcon.keyForeground#ded8c5
symbolIcon.keywordForeground#ded8c5
symbolIcon.methodForeground#B0A0FF
symbolIcon.moduleForeground#ded8c5
symbolIcon.namespaceForeground#ded8c5
symbolIcon.nullForeground#ded8c5
symbolIcon.numberForeground#ded8c5
symbolIcon.objectForeground#ded8c5
symbolIcon.operatorForeground#ded8c5
symbolIcon.packageForeground#ded8c5
symbolIcon.propertyForeground#ded8c5
symbolIcon.referenceForeground#ded8c5
symbolIcon.snippetForeground#ded8c5
symbolIcon.stringForeground#ded8c5
symbolIcon.structForeground#ded8c5
symbolIcon.textForeground#ded8c5
symbolIcon.typeParameterForeground#ded8c5
symbolIcon.unitForeground#ded8c5
symbolIcon.variableForeground#0AB8FF
tab.activeBackground#102530
tab.activeForeground#ded8c5
tab.activeModifiedBorder#FFA000
tab.border#102530
tab.inactiveBackground#002b36
tab.inactiveForeground#ded8c5
tab.inactiveModifiedBorder#FFA000
tab.lastPinnedBorder#ded8c533
tab.unfocusedActiveBackground#002b36
tab.unfocusedActiveForeground#93a1a1
tab.unfocusedActiveModifiedBorder#0AB8FF80
tab.unfocusedInactiveBackground#073642
tab.unfocusedInactiveForeground#93a1a1
tab.unfocusedInactiveModifiedBorder#0AB8FF40
terminal.ansiBlack#ded8c5
terminal.ansiBlue#0AB8FFDD
terminal.ansiBrightBlack#ded8c5
terminal.ansiBrightBlue#0AB8FF
terminal.ansiBrightCyan#27C0B8
terminal.ansiBrightGreen#85BD2F
terminal.ansiBrightMagenta#FF60B0
terminal.ansiBrightRed#FF7070
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFA000
terminal.ansiCyan#27C0B8DD
terminal.ansiGreen#85BD2FDD
terminal.ansiMagenta#FF60B0DD
terminal.ansiRed#FF7070DD
terminal.ansiWhite#FFFFFFDD
terminal.ansiYellow#FFA000DD
terminal.background#102530
terminal.dropBackground#10253080
terminal.findMatchBorder#586e75
terminal.findMatchHighlightBackground#586e75
terminal.findMatchHighlightBorder#FF8F4055
terminal.foreground#ded8c5
terminal.selectionBackground#586e75
terminalCommandDecoration.defaultBackground#FFFFFF40
terminalCommandDecoration.errorBackground#FF7070
terminalCommandDecoration.successBackground#0AB8FF
terminalCursor.background#102530
terminalCursor.foreground#ded8c5
terminalOverviewRuler.cursorForeground#839496cc
terminalOverviewRuler.findMatchForeground#FF8F407e
testing.iconErrored#FF7070
testing.iconFailed#FF7070
testing.iconPassed#85BD2F
testing.iconQueued#FFA000
testing.iconSkipped#93a1a1
testing.iconUnset#93a1a1
testing.message.error.decorationForeground#FF7070
testing.message.error.lineBackground#FF707033
testing.message.info.decorationForeground#ded8c580
testing.peekBorder#FF7070
testing.peekHeaderBackground#FF70701a
testing.runAction#85BD2F
textBlockQuote.background#002b36
textBlockQuote.border#0AB8FF80
textCodeBlock.background#102530
textLink.activeForeground#0AB8FF
textLink.foreground#0AB8FF
textPreformat.foreground#FFA000
textSeparator.foreground#ded8c52e
titleBar.activeBackground#102530
titleBar.activeForeground#ded8c5
titleBar.inactiveBackground#102530
titleBar.inactiveForeground#ded8c5
toolbar.activeBackground#102530
toolbar.hoverBackground#10253055
tree.indentGuidesStroke#93a1a1
tree.tableColumnsBorder#93a1a1
tree.tableOddRowsBackground#ded8c50a
welcomePage.background#102530
welcomePage.progress.background#002b36
welcomePage.progress.foreground#0AB8FF
welcomePage.tileBackground#002b36
welcomePage.tileHoverBackground#10253055
welcomePage.tileShadow#002b36
widget.shadow#586e75
window.activeBorder#586e75
window.inactiveBorder#586e75

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	#B0A0FF
source.css meta.selector	#FF8F40DF	—
source.css entity.name.tag	#B0A0FF	—
source.css entity.other.attribute-name	#eee8d5
source.css punctuation.definition.attribute-selector, source.css punctuation.definition.entity.begin.bracket.square, source.css punctuation.definition.entity.end.bracket.square	#eee8d5	—
source.css punctuation.definition	#ded8c5BF	—
source.css meta.attribute-selector	#85BD2F	—
source.css entity.other.attribute-name.class	#0AB8FF
source.css entity.other.attribute-name.parent-selector punctuation.definition	#FFA000BF	—
source.css entity.other.attribute-name.id	#0AB8FF
source.css entity.name.tag.reference	#fdf6e3	—
source.css entity.other.attribute-name.pseudo-class, source.css entity.other.attribute-name.pseudo-element	#B0A0FF	—
source.css punctuation.section.function.begin.bracket.round, source.css punctuation.section.function.end.bracket.round	#B0A0FFBF	—
source.css support.type.property-name, source.css meta.property-list entity.name.tag	#27C0B8	—
support.type.vendored.property-name	#27C0B8BF	—
source.css constant.numeric	#B0A0FF
source.css keyword.other.unit	#B0A0FFBF
source.css support.function	#FFA000BF	—
source.css meta.function.color, source.css meta.function.color support.function.misc, source.css support.constant.color, source.css constant.other.color	#ded8c5	—
source.css support.constant.property-value	#FF60B0	—
source.css keyword.other.important, source.css invalid.deprecated	#FF8F40DF	—
keyword.operator.combinator.css	#FFA000DF	—
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	#B0A0FF	—
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	#FFA000	—
source.css meta.at-rule.extend	#B0A0FF	—
source.css variable, source.css meta.definition.variable variable, source.css variable.other	#FFA000	—
source.css punctuation.definition.variable	#FFA0007f	—
source.css variable.argument	#FFA000
source.css support.function.any-method.builtin, source.css meta.function.variable	#FFA000	—
source.css variable.other.interpolation	#FFA000	italic
text, source	#ded8c5	—
string, string.quoted, punctuation.definition.string	#85BD2F	—
constant.numeric	#B0A0FF	—
constant.language.null, constant.language.undefined, constant.language, constant.language.boolean	#FF60B0	italic
constant.language.boolean, constant.language	#FF60B0	—
string.template, string.interpolated	#FFA000	—
keyword.other.substitution.begin, keyword.other.substitution.end, keyword.other.template.begin, keyword.other.template.end	#FFA0007F	—
punctuation.definition.template-expression	#85BD2F	—
invalid, invalid.illegal	#FF8F40	—
invalid.deprecated	#FF8F407F	—
string.regexp	#FFA000	—
constant.other.object.key	#27C0B8	—
meta.brace, punctuation.definition.block, punctuation.terminator, punctuation.separator, meta.delimiter	#93a1a1	—
punctuation	#93a1a1	—
meta.tag, meta.tag.any	#0AB8FF	—
meta.tag.structure entity.name.tag, meta.tag.block.any	#27C0B8	—
meta.tag.inline entity.name.tag, meta.tag.structure.label entity.name.tag, meta.tag.object.img entity.name.tag	#B0A0FF	—
meta.tag.structure.select entity.name.tag, meta.tag.structure.textarea entity.name.tag, meta.tag.structure.input entity.name.tag	#eee8d5	—
meta.tag.structure.button entity.name.tag, meta.tag.inline.a	#eee8d5	—
meta.tag.custom	#B0A0FF	—
meta.tag.other.unrecognized, meta.tag.inline entity.name.tag meta.tag.structure entity.name.tag	#fdf6e3	—
meta.tag.metadata.script	#B0A0FF	—
entity.other.attribute-name	#B0A0FF	italic
meta.attribute.type.html, string.quoted.jsx	#85BD2F	—
meta.attribute.data-x entity.other.attribute-name.html	#FF60B0	—
meta.attribute.class.html string.quoted.double.html, meta.attribute.style.html string.quoted.double.html source.css	#FFA000	—
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	#FFA000BF	—
meta.tag.structure.svg entity.name.tag, meta.tag.object.img entity.name.tag	#eee8d5	—
meta.attribute.href.html string.quoted.double.html, meta.attribute.action.html string.quoted.double.html	#FFA000BF	—
meta.attribute.href.html punctuation.definition.string, meta.attribute.action.html punctuation.definition.string	#FFA0007F	—
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	#85BD2F	—
meta.attribute.event-handler entity.other.attribute-name.html	#FFA000	—
punctuation.definition.tag, punctuation.definition.tag source.css	#27C0B8BF	—
meta.embedded.line.css source.css	#85BD2F	—
meta.tag.metadata.doctype, text.html punctuation.section.embedded	#93a1a1	—
meta.jsx.children	#ded8c5	—
meta.jsx meta.tag, source.js meta.tag	#27C0B8	—
meta.jsx meta.tag support.class.component	#B0A0FF	—
meta.jsx meta.tag punctuation.definition.tag	#B0A0FFBF	—
meta.jsx entity.other.attribute-name, source.js entity.other.attribute-name	#27C0B8	italic
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.key-value.json	#93a1a1	—
constant.language.json, constant.language	#FF60B0	—
punctuation.separator.dictionary.pair.json	#eee8d5	—
source.json meta.structure.dictionary.json support.type.property-name.json	#27C0B8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#27C0B8	—
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	#B0A0FF	—
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	#0AB8FF	—
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	—
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	#eee8d5	—
markup.bold.markdown	#eee8d5	—
meta.paragraph.markdown	#ded8c5	—
markup.italic.markdown	—	italic
markup.fenced_code.block	#93a1a1	—
markup.underline.link.markdown	—	—
markup.quote.markdown	#B0A0FF	italic
punctuation.definition.list.begin.markdown, markup.list.numbered.markdown	#B0A0FF	—
heading.1.markdown, markup.heading.setext.1.markdown	#27C0B8	bold
heading.2.markdown, markup.heading.setext.2.markdown	#27C0B8	—
heading.3.markdown	#0AB8FF	—
heading.4.markdown	#ded8c5	—
heading.5.markdown, heading.6.markdown	#fdf6e3	—
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	#FFA000	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#93a1a1	—
constant.other.reference.link.markdown	#FFA000	—
markup.inline.raw.string.markdown	#FFA000	—
meta.separator.markdown	#93a1a1	—
entity.name.tag.yaml, keyword.other.definition.ini	#0AB8FF	—
log.date	#eee8d5	—
log.constant	#FF60B0	—
log.error, log.exception	#FF8F40	—
log.error	#FF8F40	—
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	#ded8c5	—
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	#ded8c5BF	—
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	#27C0B8	—
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	#0AB8FF	—
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	#B0A0FF	—
support.class, support.constant, support.class.builtin, support.function.builtin, support.function.node, variable.language	#B0A0FF	—
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	#FF60B0	—
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	#eee8d5	—
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	#B0A0FF	—
meta.type.parameters.ts, meta.type.parameters	#B0A0FF	—
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	#FFA000	—
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	#FF8F40	—
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	#B0A0FF	—
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	#85BD2F	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, meta.template.expression	#FFA000	—
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	#B0A0FF	—
invalid	#FF8F40	—
variable.other.positional	#B0A0FF	—
variable.other.normal.shell	#27C0B8	—

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