Valley

Name: Valley
Author: Tim Grochowski

Publisher: Tim GrochowskiThemes in package: 2

Valley is a simple theme for Visual Studio Code without visual noise. Created with handpicked and vivid colors, appropriate contrast and a lot of love to help you focus on your code.

Open in VS Code GitHub

Color themes

VS Code preview

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

Valley — Valley Italic

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#00000000
activityBar.activeBorder#BFC7CF
activityBar.activeFocusBorder#64AEF7CC
activityBar.background#323233
activityBar.dropBorder#006AFF
activityBar.foreground#BFC7CF
activityBar.inactiveForeground#BFC7CF80
activityBarBadge.background#64AEF7
activityBarBadge.foreground#000000E6
badge.background#64AEF7
badge.foreground#000000E6
breadcrumb.activeSelectionForeground#BFC7CF
breadcrumb.background#282829
breadcrumb.focusForeground#64AEF7
breadcrumb.foreground#BFC7CF80
breadcrumbPicker.background#3C3C3E
button.background#64AEF7
button.foreground#000000E6
button.hoverBackground#96C7F8
button.secondaryBackground#D1AEE6
button.secondaryForeground#000000E6
button.secondaryHoverBackground#D1AEE6
charts.blue#5B89DB
charts.foreground#BFC7CF
charts.green#78B98A
charts.lines#8B949C
charts.orange#CD926D
charts.purple#9285CC
charts.red#D66A81
charts.yellow#D8C67E
checkbox.background#3C3C3E
checkbox.border#3C3C3E
checkbox.foreground#64AEF7
debugConsole.errorForeground#EB4755
debugConsole.infoForeground#47A9EB
debugConsole.warningForeground#EB8E47
debugExceptionWidget.background#1E1E1F
debugExceptionWidget.border#3C3C3E
debugIcon.breakpointCurrentStackframeForeground#64AEF7
debugIcon.breakpointDisabledForeground#D66A814D
debugIcon.breakpointForeground#D66A81
debugIcon.breakpointStackframeForeground#64AEF7CC
debugIcon.breakpointUnverifiedForeground#D66A81
debugIcon.continueForeground#78B98A
debugIcon.disconnectForeground#D66A81
debugIcon.pauseForeground#9285CC
debugIcon.restartForeground#78B98A
debugIcon.startForeground#78B98A
debugIcon.stepBackForeground#57B6CD
debugIcon.stepIntoForeground#57B6CD
debugIcon.stepOutForeground#57B6CD
debugIcon.stepOverForeground#57B6CD
debugIcon.stopForeground#D66A81
debugTokenExpression.boolean#DF91CA
debugTokenExpression.error#EB4755
debugTokenExpression.name#57B6CD
debugTokenExpression.number#5B89DB
debugTokenExpression.string#CD926D
debugTokenExpression.value#9285CC
debugToolBar.background#3C3C3E
debugView.stateLabelBackground#D55975
debugView.stateLabelForeground#000000E6
descriptionForeground#8B949C
diffEditor.border#0A0A0B
diffEditor.diagonalFill#BFC7CF66
diffEditor.insertedTextBackground#1FF9BF26
diffEditor.removedTextBackground#F91F5926
dropdown.background#3C3C3E
dropdown.border#3C3C3E
dropdown.foreground#BFC7CF
dropdown.listBackground#3C3C3E
editor.background#1E1E1F
editor.findMatchBackground#E7BB5A1a
editor.findMatchBorder#E7BB5A
editor.findMatchHighlightBackground#E7BB5A33
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#BFC7CF0D
editor.focusedStackFrameHighlightBackground#006AFF66
editor.foldBackground#BFC7CF1a
editor.foreground#BFC7CF
editor.hoverHighlightBackground#BFC7CF0D
editor.inactiveSelectionBackground#006AFF1a
editor.inlineValuesBackground#C58F6726
editor.inlineValuesForeground#EB8E47E6
editor.lineHighlightBackground#BFC7CF08
editor.linkedEditingBackground#006AFF40
editor.rangeHighlightBackground#E7BB5A33
editor.selectionBackground#006AFF59
editor.selectionHighlightBackground#006AFF26
editor.snippetFinalTabstopHighlightBackground#E5E7E80D
editor.snippetFinalTabstopHighlightBorder#00000000
editor.snippetTabstopHighlightBackground#E5E7E80D
editor.snippetTabstopHighlightBorder#00000000
editor.stackFrameHighlightBackground#006AFF40
editor.symbolHighlightBackground#E7BB5A1a
editor.wordHighlightBackground#BFC7CF1a
editor.wordHighlightStrongBackground#BFC7CF1a
editorBracketHighlight.foreground1#A0E4B2
editorBracketHighlight.foreground2#84DCF0
editorBracketHighlight.foreground3#91B7F8
editorBracketHighlight.foreground4#FACCEE
editorBracketHighlight.foreground5#F59EB1
editorBracketHighlight.foreground6#F5E8B2
editorBracketHighlight.unexpectedBracket.foreground#EB4755
editorBracketMatch.background#E5E7E833
editorBracketMatch.border#00000000
editorCodeLens.foreground#BFC7CFB3
editorCursor.background#64AEF7
editorCursor.foreground#64AEF7
editorError.foreground#EB4755
editorGroup.border#0A0A0B
editorGroup.dropBackground#006AFF66
editorGroup.emptyBackground#1E1E1F
editorGroupHeader.noTabsBackground#232324
editorGroupHeader.tabsBackground#232324
editorGutter.addedBackground#216479
editorGutter.background#1E1E1F
editorGutter.deletedBackground#792138
editorGutter.foldingControlForeground#64AEF7
editorGutter.modifiedBackground#216479
editorHint.foreground#8B949C
editorHoverWidget.background#3C3C3E
editorHoverWidget.border#3C3C3E
editorHoverWidget.foreground#BFC7CF
editorHoverWidget.statusBarBackground#3C3C3E
editorIndentGuide.activeBackground#E5E7E826
editorIndentGuide.background#E5E7E80D
editorInfo.background#67A0C5
editorInfo.foreground#47A9EB
editorInlayHint.background#282829
editorInlayHint.foreground#8B949C
editorLightBulb.foreground#C58F67
editorLightBulbAutoFix.foreground#64AEF7
editorLineNumber.activeForeground#BFC7CF
editorLineNumber.foreground#BFC7CF4D
editorLink.activeForeground#96C7F8
editorMarkerNavigation.background#1E1E1F
editorMarkerNavigationError.background#C66783
editorMarkerNavigationError.headerBackground#C6678333
editorMarkerNavigationInfo.background#67A0C5
editorMarkerNavigationInfo.headerBackground#67A0C533
editorMarkerNavigationWarning.background#C58F67
editorMarkerNavigationWarning.headerBackground#C58F6733
editorOverviewRuler.addedForeground#216479
editorOverviewRuler.border#E5E7E800
editorOverviewRuler.bracketMatchForeground#E5E7E833
editorOverviewRuler.commonContentForeground#ed586e
editorOverviewRuler.currentContentForeground#10ac844D
editorOverviewRuler.deletedForeground#792138
editorOverviewRuler.errorForeground#EB4755
editorOverviewRuler.findMatchForeground#E7BB5A40
editorOverviewRuler.incomingContentForeground#64AEF74D
editorOverviewRuler.infoForeground#47A9EB
editorOverviewRuler.modifiedForeground#216479
editorOverviewRuler.rangeHighlightForeground
editorOverviewRuler.selectionHighlightForeground#64AEF71a
editorOverviewRuler.warningForeground#EB8E47
editorOverviewRuler.wordHighlightForeground#E5E7E833
editorOverviewRuler.wordHighlightStrongForeground#E5E7E84D
editorPane.background#1E1E1F
editorRuler.foreground#E5E7E80D
editorSuggestWidget.background#3C3C3E
editorSuggestWidget.border#3C3C3E
editorSuggestWidget.focusHighlightForeground#E9BF3A
editorSuggestWidget.foreground#BFC7CF
editorSuggestWidget.highlightForeground#E9BF3A
editorSuggestWidget.selectedBackground#006AFF40
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000080
editorWarning.foreground#EB8E47
editorWhitespace.foreground#BFC7CF33
editorWidget.background#232324
editorWidget.foreground#BFC7CF
editorWidget.resizeBorder#64AEF7
errorForeground#EB4755
extensionBadge.remoteBackground#D55975
extensionBadge.remoteForeground#000000E6
extensionButton.prominentBackground#66D5AC
extensionButton.prominentForeground#000000E6
extensionButton.prominentHoverBackground#90DFC2
extensionIcon.starForeground#E9BF3A
focusBorder#64AEF7CC
foreground#BFC7CF
gitDecoration.addedResourceForeground#36C7A0
gitDecoration.conflictingResourceForeground#C837A6
gitDecoration.deletedResourceForeground#C8375E
gitDecoration.ignoredResourceForeground#D0D4D8
gitDecoration.modifiedResourceForeground#38A7C9
gitDecoration.renamedResourceForeground#38A7C9
gitDecoration.stageDeletedResourceForeground#C8375E
gitDecoration.stageModifiedResourceForeground#38A7C9
gitDecoration.submoduleResourceForeground#A6C837
gitDecoration.untrackedResourceForeground#375EC8
icon.foreground#BFC7CF
input.background#161618
input.border#161618
input.foreground#BFC7CF
input.placeholderForeground#BFC7CF80
inputOption.activeBackground#64AEF780
inputValidation.errorBackground#C66783
inputValidation.errorBorder#C66783
inputValidation.errorForeground#000000E6
inputValidation.infoBackground#67A0C5
inputValidation.infoBorder#67A0C5
inputValidation.infoForeground#000000E6
inputValidation.warningBackground#C58F67
inputValidation.warningBorder#C58F67
inputValidation.warningForeground#000000E6
keybindingLabel.background#E5E7E81a
keybindingLabel.bottomBorder#0000004D
keybindingLabel.foreground#BFC7CF
list.activeSelectionBackground#324866
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.dropBackground#006AFF66
list.errorForeground#EB4755
list.filterMatchBackground#E7BB5A4D
list.filterMatchBorder#E7BB5A
list.focusBackground#2C4C7A
list.focusForeground#8FBEFF
list.focusHighlightForeground#8FBEFF
list.highlightForeground#E9BF3A
list.hoverBackground#E5E7E80A
list.hoverForeground#E5E7E8
list.inactiveSelectionBackground#E5E7E814
list.inactiveSelectionForeground#E5E7E8
list.inactiveSelectionIconForeground#E5E7E8
list.invalidItemForeground#EB4755
list.warningForeground#EB8E47
listFilterWidget.background#3C3C3E
listFilterWidget.noMatchesOutline#3C3C3E
listFilterWidget.outline#E7BB5A
menu.background#3C3C3E
menu.border#3C3C3E
menu.foreground#BFC7CF
menu.selectionBackground#E5E7E80A
menu.selectionBorder#E5E7E800
menu.selectionForeground#E5E7E8
menu.separatorBackground#555558
menubar.selectionBackground#E5E7E80A
menubar.selectionBorder#E5E7E800
menubar.selectionForeground#E5E7E8
merge.commonContentBackground#ed586e4D
merge.commonHeaderBackground#ed586e80
merge.currentContentBackground#10ac844D
merge.currentHeaderBackground#10ac8480
merge.incomingContentBackground#64AEF74D
merge.incomingHeaderBackground#64AEF780
minimap.background#1E1E1F
minimap.errorHighlight#C66783
minimap.findMatchHighlight#E7BB5A1a
minimap.selectionHighlight#006AFF66
minimap.warningHighlight#C58F67
minimapGutter.addedBackground#216479
minimapGutter.deletedBackground#792138
minimapGutter.modifiedBackground#216479
minimapSlider.activeBackground#E5E7E84D
minimapSlider.background#E5E7E81a
minimapSlider.hoverBackground#E5E7E833
notificationCenterHeader.background#3C3C3E
notificationCenterHeader.foreground#BFC7CF
notificationLink.foreground#64AEF7
notifications.background#323233
notifications.border#4C4C4D
notifications.foreground#BFC7CF
notificationsErrorIcon.foreground#EB4755
notificationsInfoIcon.foreground#47A9EB
notificationsWarningIcon.foreground#EB8E47
panel.background#282829
panel.border#E5E7E805
panel.dropBorder#006AFF
panelSection.dropBackground#006AFF66
panelTitle.activeBorder#BFC7CF
panelTitle.activeForeground#BFC7CF
panelTitle.inactiveForeground#BFC7CFB3
peekView.border#64AEF7
peekViewEditor.background#141415
peekViewEditor.matchHighlightBackground#E7BB5A40
peekViewEditor.matchHighlightBorder#E7BB5A
peekViewEditorGutter.background#141415
peekViewResult.background#1E1E1F
peekViewResult.fileForeground#BFC7CF
peekViewResult.lineForeground#BFC7CFBF
peekViewResult.matchHighlightBackground#E7BB5A40
peekViewResult.selectionBackground#64AEF71a
peekViewResult.selectionForeground#64AEF7
peekViewTitle.background#282829
peekViewTitleDescription.foreground#BFC7CF80
peekViewTitleLabel.foreground#BFC7CF
pickerGroup.border#555558
pickerGroup.foreground#D1AEE6
problemsErrorIcon.foreground#EB4755
problemsInfoIcon.foreground#47A9EB
problemsWarningIcon.foreground#EB8E47
progressBar.background#64AEF7
quickInput.background#3C3C3E
quickInput.foreground#BFC7CF
quickInputList.focusBackground#324866
quickInputList.focusForeground#64AEF7
quickInputList.focusIconForeground#64AEF7
sash.hoverBorder#006AFF
scrollbar.shadow#0000004D
scrollbarSlider.activeBackground#E5E7E84D
scrollbarSlider.background#E5E7E81a
scrollbarSlider.hoverBackground#E5E7E833
searchEditor.findMatchBackground#E7BB5A1a
searchEditor.findMatchBorder#E7BB5A
selection.background#006AFF66
settings.checkboxBackground#3C3C3E
settings.checkboxBorder#3C3C3E
settings.checkboxForeground#64AEF7
settings.dropdownBackground#3C3C3E
settings.dropdownBorder#3C3C3E
settings.dropdownForeground#BFC7CF
settings.dropdownListBorder#555558
settings.focusedRowBackground#2C4C7A66
settings.focusedRowBorder#64AEF766
settings.headerForeground#BFC7CF
settings.modifiedItemIndicator#216479
settings.numberInputBackground#161618
settings.numberInputBorder#161618
settings.numberInputForeground#BFC7CF
settings.rowHoverBackground#282829
settings.textInputBackground#161618
settings.textInputBorder#161618
settings.textInputForeground#BFC7CF
sideBar.background#282829
sideBar.border#1E1E1F
sideBar.dropBackground#006AFF66
sideBar.foreground#BFC7CFBF
sideBarSectionHeader.background#282829
sideBarSectionHeader.border#414143
sideBarSectionHeader.foreground#BFC7CF
sideBarTitle.foreground#BFC7CF
statusBar.background#3C3C3E
statusBar.debuggingBackground#D55975
statusBar.debuggingForeground#000000E6
statusBar.foreground#BFC7CFB3
statusBar.noFolderBackground#3C3C3E
statusBar.noFolderForeground#BFC7CFB3
statusBarItem.activeBackground#E5E7E833
statusBarItem.errorBackground#C66783
statusBarItem.errorForeground#EB4755
statusBarItem.hoverBackground#E5E7E81a
statusBarItem.prominentBackground#64AEF7
statusBarItem.prominentForeground#000000E6
statusBarItem.prominentHoverBackground#E5E7E80D
statusBarItem.remoteBackground#66D5AC
statusBarItem.remoteForeground#000000E6
statusBarItem.warningBackground#C58F67
statusBarItem.warningForeground#EB8E47
symbolIcon.arrayForeground#57B6CD
symbolIcon.booleanForeground#DF91CA
symbolIcon.classForeground#D8C67E
symbolIcon.colorForeground#BFC7CF
symbolIcon.constantForeground#57B6CD
symbolIcon.constructorForeground#9285CC
symbolIcon.enumeratorForeground#BFC7CF
symbolIcon.enumeratorMemberForeground#BFC7CF
symbolIcon.eventForeground#BFC7CF
symbolIcon.fieldForeground#BFC7CF
symbolIcon.fileForeground#BFC7CF
symbolIcon.folderForeground#BFC7CF
symbolIcon.functionForeground#78B98A
symbolIcon.interfaceForeground#BFC7CF
symbolIcon.keyForeground#BFC7CF
symbolIcon.keywordForeground#BFC7CF
symbolIcon.methodForeground#78B98A
symbolIcon.moduleForeground#57B6CD
symbolIcon.namespaceForeground#BFC7CF
symbolIcon.nullForeground#DF91CA
symbolIcon.numberForeground#5B89DB
symbolIcon.objectForeground#BFC7CF
symbolIcon.operatorForeground#D66A81
symbolIcon.packageForeground#BFC7CF
symbolIcon.propertyForeground#BFC7CF
symbolIcon.referenceForeground#BFC7CF
symbolIcon.snippetForeground#BFC7CF
symbolIcon.stringForeground#CD926D
symbolIcon.structForeground#BFC7CF
symbolIcon.textForeground#BFC7CF
symbolIcon.typeParameterForeground#BFC7CF
symbolIcon.unitForeground#DF91CA
symbolIcon.variableForeground#57B6CD
tab.activeBackground#282829
tab.activeBorderTop#64AEF7
tab.activeForeground#E5E7E8
tab.activeModifiedBorder#64AEF7
tab.border#232324
tab.hoverBackground#282829
tab.hoverForeground#E5E7E8
tab.inactiveBackground#232324
tab.inactiveForeground#E5E7E880
tab.inactiveModifiedBorder#C58F67
tab.lastPinnedBorder#3C3C3E
tab.unfocusedActiveForeground#E5E7E899
tab.unfocusedActiveModifiedBorder#64AEF766
tab.unfocusedHoverBackground#282829
tab.unfocusedHoverForeground#E5E7E880
tab.unfocusedInactiveBackground#232324
tab.unfocusedInactiveForeground#E5E7E84D
tab.unfocusedInactiveModifiedBorder#C58F6766
terminal.ansiBlack#282829
terminal.ansiBlue#5B89DB
terminal.ansiBrightBlack#656567
terminal.ansiBrightBlue#91B7F8
terminal.ansiBrightCyan#84DCF0
terminal.ansiBrightGreen#A0E4B2
terminal.ansiBrightMagenta#FACCEE
terminal.ansiBrightRed#F59EB1
terminal.ansiBrightWhite#FAFAFA
terminal.ansiBrightYellow#F5E8B2
terminal.ansiCyan#57B6CD
terminal.ansiGreen#78B98A
terminal.ansiMagenta#DF91CA
terminal.ansiRed#D66A81
terminal.ansiWhite#FAFAFA
terminal.ansiYellow#D8C67E
terminal.background#1E1E1F
terminal.border#414143
terminal.dropBackground#006AFF66
terminal.selectionBackground#006AFF66
terminal.tab.activeBorder#BFC7CF
terminalCursor.background#BFC7CF
terminalCursor.foreground#64AEF7
textBlockQuote.background#282829
textBlockQuote.border#64AEF7
textCodeBlock.background#141415
textLink.activeForeground#96C7F8
textLink.foreground#64AEF7
textPreformat.foreground#D1AEE6
textSeparator.foreground#282829
titleBar.activeBackground#3C3C3E
titleBar.activeForeground#BFC7CF
titleBar.inactiveBackground#3C3C3E
titleBar.inactiveForeground#BFC7CF4D
toolbar.activeBackground#2C4C7A99
toolbar.hoverBackground#E5E7E81a
tree.indentGuidesStroke#E5E7E826
walkThrough.embeddedEditorBackground#141415
welcomePage.background#1E1E1F
welcomePage.buttonBackground#282829
welcomePage.buttonHoverBackground#323233
welcomePage.progress.background#282829
welcomePage.progress.foreground#64AEF7
welcomePage.tileBackground#282829
welcomePage.tileHoverBackground#323233
welcomePage.tileShadow#00000000
widget.shadow#0000001a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis, markup.italic, markup.quote	—	italic
strong, markup.heading	—	bold
comment, punctuation.definition.comment	#55708B	italic
meta.brace, meta.parameters, punctuation.definition.begin.bracket.curly, punctuation.definition.end.bracket.curly, punctuation.definition.class.begin.bracket.curly, punctuation.definition.class.end.bracket.curly, punctuation.definition.begin.bracket.round, punctuation.definition.end.bracket.round, punctuation.definition.parameters.begin.bracket.round, punctuation.definition.parameters.end.bracket.round, punctuation.definition.arguments.begin.bracket.round, punctuation.definition.arguments.end.bracket.round, punctuation.accessor, punctuation.definition.dictionary, punctuation.definition.block, punctuation.definition.section, punctuation.section.array, punctuation.separator.comma, punctuation.separator, punctuation.terminator.expression, punctuation.terminator.statement	#8B949C	—
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag	#57B6CD	—
source.groovy.embedded	#BFC7CF	—
constant.language	#DF91CA	—
constant.numeric, entity.name.operator.custom-literal.number, keyword.operator.minus.exponent, keyword.operator.plus.exponent, variable.other.enummember	#5B89DB	—
constant.regexp	#9285CC	—
entity.name.tag	#57B6CD	—
entity.other.attribute-name	#9285CC	italic
invalid	#D66A81	—
markup.underline	—	underline
markup.bold	#57B6CD	bold
markup.heading	#57B6CD	bold
markup.italic	—	italic
markup.inserted	#78B98A	—
markup.deleted	#D8C67E	—
markup.changed	#57B6CD	—
markup.inline.raw	#D8C67E	—
entity.name.function.preprocessor, meta.preprocessor	#57B6CD	—
meta.preprocessor.string	#CD926D	—
meta.preprocessor.numeric	#78B98A	—
meta.structure.dictionary.key.python	#57B6CD	—
meta.diff.header	#57B6CD	—
storage	#57B6CD	—
storage.type	#9285CC	—
keyword.operator.noexcept, storage.modifier	#57B6CD	italic
entity.name.operator.custom-literal.string, meta.embedded.assembly, string	#CD926D	—
string.tag	#CD926D	—
string.value	#CD926D	—
string.regexp	#D66A81	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#D66A81	—
meta.template.expression	#D66A81	—
support.type.property-name, support.type.vendored.property-name	#BFC7CF	—
keyword	#57B6CD	italic
keyword.control	#57B6CD	italic
keyword.operator, keyword.operator.assignment.compound	#D66A81
keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.wordlike	#9285CC	—
keyword.other.unit	#D8C67E	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#57B6CD	—
support.function.git-rebase	#57B6CD	—
constant.sha.git-rebase	#78B98A	—
storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java	#BFC7CF	—
variable.language	#D8C67E	—
entity.name.function	#78B98A	italic
entity.name.operator.custom-literal, source.powershell variable.other.member, support.constant.handlebars, support.function	#78B98A	—
entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.name.type, entity.other.attribute, meta.return-type, storage.type.annotation.groovy, storage.type.annotation.java, storage.type.boolean.go, storage.type.byte.go, storage.type.cs, storage.type.error.go, storage.type.generic.cs, storage.type.generic.groovy, storage.type.generic.java, storage.type.groovy, storage.type.java, storage.type.modifier.cs, storage.type.numeric.go, storage.type.object.array.groovy, storage.type.object.array.java, storage.type.parameters.groovy, storage.type.primitive.array.groovy, storage.type.primitive.array.java, storage.type.primitive.groovy, storage.type.primitive.java, storage.type.rune.go, storage.type.string.go, storage.type.token.java, storage.type.uintptr.go, storage.type.variable.cs, support.class, support.type	#D8C67E	—
entity.other.inherited-class, meta.type.cast.expr, meta.type.new.expr, support.constant.dom, support.constant.json, support.constant.math	#78B98A	—
entity.name.operator, keyword.control, keyword.operator.delete, keyword.other.operator, keyword.other.using, source.cpp keyword.operator.new	#9285CC	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python	—	italic
entity.name.variable, meta.definition.variable.name, support.variable, variable	#57B6CD	—
variable.other.constant	—	italic
keyword.operator.negation.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, punctuation.definition.character-class.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.group.regexp, support.other.parenthesis.regexp	#D8C67E	—
constant.character.character-class.regexp, constant.character.set.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp	#D66A81	—
keyword.control.anchor.regexp, keyword.operator.or.regexp	#CD926D	—
keyword.operator.quantifier.regexp	#CD926D	—
constant.character	#57B6CD	—
constant.character.escape	#CD926D	—
entity.name.label	#BFC7CF	—
source.coffee.embedded, variable.css, variable.other.less, variable.scss	#57B6CD	—
source.css punctuation.definition.interpolation.begin.bracket.curly, source.css punctuation.definition.interpolation.end.bracket.curly	#D66A81	—
source.css.scss, source.css.scss meta.property-list.scss meta.property-value.scss, source.css.scss meta.property-list.scss meta.at-rule.each.scss, source.css.scss meta.property-list.scss meta.at-rule.return.scss, source.css.scss meta.property-list.scss constant.other.scss	#8B949C	—
source.css.scss meta.property-list.scss, source.css.scss meta.property-name.scss support.type.property-name.css, source.css.scss meta.property-name.scss support.type.vendored.property-name.css, source.css.scss meta.property-list.scss meta.at-rule.keyframes.scss entity.other.attribute-name.scss	#BFC7CF	—
source.css meta.at-rule.include.scss, source.css meta.at-rule.mixin.scss, source.css meta.definition.variable.map, source.css punctuation.definition.attribute-selector.begin.bracket.square, source.css punctuation.definition.attribute-selector.end.bracket.square, source.css punctuation.definition.begin.bracket.round, source.css punctuation.definition.condition.begin.bracket.round, source.css punctuation.definition.condition.end.bracket.round, source.css punctuation.definition.end.bracket.round, source.css punctuation.definition.entity.begin.bracket.square, source.css punctuation.definition.entity.end.bracket.square, source.css punctuation.definition.map.begin.bracket.round, source.css punctuation.definition.map.end.bracket.round, source.css punctuation.definition.parameters.begin.bracket.round, source.css punctuation.definition.parameters.end.bracket.round, source.css punctuation.definition.pseudo-class.begin.bracket.round, source.css punctuation.definition.pseudo-class.end.bracket.round, source.css punctuation.section, source.css punctuation.separator, source.css punctuation.terminator	#8B949C	—
support.type.property-name.css, support.type.vendored.property-name.css	#BFC7CF	—
meta.attribute-selector.scss	#CD926D	—
entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css punctuation, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css punctuation, entity.other.attribute-name.pseudo-element.css	#D8C67E	—
entity.name.tag.css	#57B6CD	—
entity.other.attribute-name.id.css punctuation, entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id	#D66A81	—
entity.other.attribute-name.class.css punctuation, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css	#78B98A	—
source.css keyword.other.unit, source.scss keyword.other.unit	#DF91CA	—
support.constant.font-name, support.constant.font-name.css, support.constant.vendored.property-value.css	#8B949C	—
constant.other.color.rgb-value, constant.other.color.rgb-value.hex.css punctuation.definition.constant.css, constant.other.rgb-value, support.constant.color, support.constant.color.w3c-extended-color-name.css, support.constant.color.w3c-standard-color-name.css	#9285CC	—
source.css keyword.other, source.scss keyword.other	#D66A81	—
support.constant.media, support.constant.media-type, support.constant.property-value	#57B6CD	—
punctuation.definition.block.tag.sassdoc	#9285CC	—
meta.function.block.end.handlebars support.constant.handlebars, meta.function.block.start.handlebars support.constant.handlebars, meta.function.inline.else.handlebars support.constant.handlebars, meta.function.inline.other.handlebars support.constant.handlebars	#5B89DB	—
variable.parameter.handlebars	#D66A81	—
entity.name.tag.doctype.html, meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.metadata.doctype.html punctuation.definition.tag.begin.html, meta.tag.metadata.doctype.html punctuation.definition.tag.end.html, meta.tag.sgml.doctype.html, meta.tag.sgml.html punctuation.definition.tag.html	#D8C67E	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.html	#57B6CD	—
meta.attribute-with-value.class.html string, meta.attribute.class.html string	#78B98A	—
meta.attribute-with-value.id.html string, meta.attribute.id.html string	#D66A81	—
punctuation.definition.binding-pattern.object.js	#8B949C	—
punctuation.definition.block.tag.jsdoc	#9285CC	—
source.js.jsx entity.name.tag.js.jsx support.class	#57B6CD	—
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, support.type.property-name.json	#57B6CD	—
punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.definition.string.json	#CD926D	—
punctuation.definition.array.begin.json, punctuation.definition.array.end.json	#8B949C	—
markup.heading.markdown	#57B6CD	—
markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, punctuation.definition.heading.markdown	#57B6CD99	—
markup.quote.markdown	#9285CC	—
punctuation.definition.quote.begin.markdown	#9285CC99
markup.list.markdown, markup.list.numbered.markdown, markup.list.unnumbered.markdown	#D66A81	—
punctuation.definition.list.begin.markdown	#D66A8199	—
markup.bold.markdown	#D8C67E	—
punctuation.definition.bold.markdown	#D8C67E99	—
markup.italic.markdown	#CD926D	—
punctuation.definition.italic.markdown	#CD926D99
string.other.link.title.markdown, string.other.link.description.markdown	#D66A81	—
meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, meta.image.reference.markdown punctuation.definition.string.begin.markdown, meta.image.reference.markdown punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown	#D66A8199	—
string.other.link.description.title.markdown	#CD926D	—
string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, string.other.link.description.title.markdown punctuation.definition.string.markdown	#CD926D99	—
constant.other.reference.link.markdown	#9285CC	—
meta.link.reference.def.markdown punctuation.separator.key-value.markdown, punctuation.definition.constant.markdown	#9285CC99	—
markup.underline.link.image.markdown, markup.underline.link.markdown	#57B6CD	—
meta.image.inline.markdown punctuation.definition.metadata.markdown, meta.link.inline.markdown punctuation.definition.metadata.markdown	#57B6CD99	—
markup.inline.raw.string.markdown	#78B98A	—
punctuation.definition.raw.markdown	#78B98A99	—
markup.fenced_code.block.markdown, markup.raw.block.markdown	#78B98A	—
fenced_code.block.language.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown	#78B98A99	—
meta.separator.markdown	#D66A81	—
entity.tag.tagbraces.nunjucks	#5B89DB	—
punctuation.section.tag.twig	#5B89DB	—
variable.other.property.twig, variable.other.twig	#D66A81	—
—	#9285CC	—
punctuation.definition.tag.xml	#57B6CD	—

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