Calvin-Theme

Name: Calvin-Theme
Author: CalvinStudio

Publisher: CalvinStudioThemes in package: 3

Calvin-Online

Color themes

VS Code preview

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

Calvin-Theme — Calvin-Black

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#000000
activityBar.activeBorder#00ffd5
activityBar.activeFocusBorder#9000ff
activityBar.background#000000
activityBar.border#9000ff
activityBar.dropBackground#a604f163
activityBar.foreground#ff5100
activityBar.inactiveForeground#9000ff
activityBarBadge.background#00ffd5
activityBarBadge.foreground#0000007e
badge.background#9000ff
badge.foreground#ffede4
breadcrumb.activeSelectionForeground#9000ff
breadcrumb.background#000000
breadcrumb.focusForeground#fcf6ff
breadcrumb.foreground#919cb9
breadcrumbPicker.background#27273a
button.background#9803ee88
button.foreground#ffffff
button.hoverBackground#ff5100
checkbox.background#000000
checkbox.border#b2cffb3a
checkbox.foreground#d7d6df
contrastActiveBorder#d9ff00
contrastBorder#000000
debugExceptionWidget.background#420b0d
debugExceptionWidget.border#24e8d8
debugIcon.breakpointCurrentStackframeForeground#ffcc00
debugIcon.breakpointDisabledForeground#848484
debugIcon.breakpointForeground#ff0000
debugIcon.breakpointStackframeForeground#89d185
debugIcon.breakpointUnverifiedForeground#848484
debugIcon.continueForeground#75beff
debugIcon.disconnectForeground#f48771
debugIcon.pauseForeground#75beff
debugIcon.restartForeground#D9FF00
debugIcon.startForeground#7eff77
debugIcon.stepBackForeground#75beff
debugIcon.stepIntoForeground#75beff
debugIcon.stepOutForeground#75beff
debugIcon.stepOverForeground#75beff
debugIcon.stopForeground#ff0000
debugToolBar.background#000000
debugToolBar.border#24e8d8
descriptionForeground#919cb9
diffEditor.border#ff5100
diffEditor.insertedTextBackground#4b661680
diffEditor.insertedTextBorder#ff5100
diffEditor.removedTextBackground#90274a70
diffEditor.removedTextBorder#ff5100
dropdown.background#000000
dropdown.border#b2cffb3a
dropdown.foreground#9283ff
dropdown.listBackground#43008f
editor.background#000000
editor.findMatchBackground#c7adfb90
editor.findMatchBorder#9000ff
editor.findMatchHighlightBackground#9000ff8a
editor.findMatchHighlightBorder#9000ff
editor.findRangeHighlightBackground#2a2a46
editor.findRangeHighlightBorder#ff5100
editor.focusedStackFrameHighlightBackground#7abd7a4d
editor.foldBackground#42557b3a
editor.foreground#cdffe6
editor.hoverHighlightBackground#8400ff91
editor.inactiveSelectionBackground#9000ff8a
editor.lineHighlightBackground#a055f763
editor.lineHighlightBorder#000000
editor.rangeHighlightBackground#2a2a46
editor.rangeHighlightBorder#ff5100
editor.selectionBackground#9000ffcc
editor.selectionForeground#9000ff8a
editor.selectionHighlightBackground#8400ff8c
editor.selectionHighlightBorder#8400ff4b
editor.snippetFinalTabstopHighlightBackground#000000
editor.snippetFinalTabstopHighlightBorder#24e8d890
editor.snippetTabstopHighlightBackground#000000
editor.snippetTabstopHighlightBorder#24e8d890
editor.stackFrameHighlightBackground#ffff0033
editor.symbolHighlightBackground#3a314d30
editor.symbolHighlightBorder#ff5100
editor.wordHighlightBackground#4a4a7680
editor.wordHighlightBorder#000000
editor.wordHighlightStrongBackground#9000ff
editor.wordHighlightStrongBorder#000000
editorBracketMatch.background#ff000098
editorBracketMatch.border#97ee91
editorCodeLens.foreground#999999
editorCursor.background#ff5100
editorCursor.foreground#fffb00
editorError.border#ff0000
editorError.foreground#ff0000
editorGroup.border#6a00e48c
editorGroup.dropBackground#57585080
editorGroup.emptyBackground#000000
editorGroup.focusedEmptyBorder#ff5100
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#ff5100
editorGutter.addedBackground#587c0c
editorGutter.background#000000
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.modifiedBackground#0c7d9d
editorHint.border#006eff
editorHint.foreground#f2c88c
editorHoverWidget.background#000000
editorHoverWidget.border#80ff86
editorHoverWidget.foreground#fcf6ff
editorHoverWidget.statusBarBackground#2f2f46
editorIndentGuide.activeBackground#767771
editorIndentGuide.background#414745
editorInfo.border#17c900
editorInfo.foreground#75beff
editorLightBulb.foreground#ffcc00
editorLightBulbAutoFix.foreground#75beff
editorLineNumber.activeForeground#fffaad
editorLineNumber.foreground#826c8f
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#000000
editorMarkerNavigationError.background#ff0000
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#ff922c
editorOverviewRuler.addedForeground#587c0c99
editorOverviewRuler.border#b2cffb2a
editorOverviewRuler.bracketMatchForeground#a0a0a0
editorOverviewRuler.commonContentForeground#60606066
editorOverviewRuler.currentContentForeground#40c8ae80
editorOverviewRuler.deletedForeground#94151b99
editorOverviewRuler.errorForeground#ff0000
editorOverviewRuler.findMatchForeground#d186167e
editorOverviewRuler.incomingContentForeground#40a6ff80
editorOverviewRuler.infoForeground#75beff
editorOverviewRuler.modifiedForeground#0c7d9d99
editorOverviewRuler.rangeHighlightForeground#7ccbff99
editorOverviewRuler.selectionHighlightForeground#97ee91
editorOverviewRuler.warningForeground#f2c88c
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
editorPane.background#000000
editorRuler.foreground#c7adfb2f
editorSuggestWidget.background#000000
editorSuggestWidget.border#b1fcae
editorSuggestWidget.foreground#919cb9
editorSuggestWidget.highlightForeground#9000ff
editorSuggestWidget.selectedBackground#0000ff90
editorUnnecessaryCode.border#ffffff
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#ff922c
editorWarning.foreground#ff922c
editorWhitespace.foreground#464741
editorWidget.background#000000
editorWidget.border#9000ff
editorWidget.foreground#fcf6ff
editorWidget.resizeBorder#9000ff
errorForeground#ff0000
extensionBadge.remoteBackground#9000ff
extensionBadge.remoteForeground#daadff
extensionButton.prominentBackground#d9ff00
extensionButton.prominentForeground#0f1320
extensionButton.prominentHoverBackground#ff5100
focusBorder#00ffd5
foreground#f0daff
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#07adfb
gitDecoration.deletedResourceForeground#e34f8c55
gitDecoration.ignoredResourceForeground#919cb9af
gitDecoration.modifiedResourceForeground#f2c88c
gitDecoration.submoduleResourceForeground#c7adfb5f
gitDecoration.untrackedResourceForeground#e7adfba0
gitlens.gutterBackgroundColor#ffffff13
gitlens.gutterForegroundColor#bebebe
gitlens.gutterUncommittedForegroundColor#00bcf299
gitlens.lineHighlightBackgroundColor#00bcf233
gitlens.lineHighlightOverviewRulerColor#00bcf299
gitlens.trailingLineBackgroundColor#000000
gitlens.trailingLineForegroundColor#99999959
icon.foreground#daadff
imagePreview.border#80808059
input.background#333333
input.border#b2cffb1a
input.foreground#d7d6df
input.placeholderForeground#919cb99c
inputOption.activeBackground#b2cffb1d
inputOption.activeBorder#00ffd5
inputValidation.errorBackground#ff00008f
inputValidation.errorBorder#ff00008f
inputValidation.errorForeground#ff0000
inputValidation.infoBackground#9000ff
inputValidation.infoBorder#9000ff
inputValidation.infoForeground#d7d6df
inputValidation.warningBackground#ff922c
inputValidation.warningBorder#dda900
inputValidation.warningForeground#f2c88c
list.activeSelectionBackground#000000
list.activeSelectionForeground#d9ff00
list.dropBackground#000000
list.errorForeground#ff0000
list.filterMatchBackground#c7adfb30
list.filterMatchBorder#c7adfb50
list.focusBackground#240038
list.focusForeground#f6f0ff
list.highlightForeground#9000ff
list.hoverBackground#9000ff50
list.hoverForeground#f6f0ffea
list.inactiveFocusBackground#ff5100
list.inactiveSelectionBackground#000000
list.inactiveSelectionForeground#d9ff00
list.invalidItemForeground#b89500
list.warningForeground#ff922c
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#000000
menu.background#000000
menu.border#9000ff
menu.foreground#c9a8ff
menu.selectionBackground#000000
menu.selectionBorder#9000ff
menu.selectionForeground#d9ff00
menu.separatorBackground#9000ff
menubar.selectionBackground#000000
menubar.selectionBorder#9000ff
menubar.selectionForeground#ff5100
merge.border#80ff86
merge.commonContentBackground#60606029
merge.commonHeaderBackground#60606066
merge.currentContentBackground#40c8ae33
merge.currentHeaderBackground#40c8ae80
merge.incomingContentBackground#40a6ff33
merge.incomingHeaderBackground#40a6ff80
minimap.background#000000
minimap.errorHighlight#ff0000
minimap.findMatchHighlight#d9ff00
minimap.selectionHighlight#00ffeace
minimap.warningHighlight#ff5e00
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0c7d9d
minimapSlider.activeBackground#9000ff96
minimapSlider.background#ff510056
minimapSlider.hoverBackground#7e47bc56
notificationCenter.border#24e8d8
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#9000ff
notificationLink.foreground#9000ff
notifications.background#000000
notifications.border#24e8d8
notifications.foreground#fcf6ff
notificationsErrorIcon.foreground#ff0000
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#f2c88c
notificationToast.border#24e8d8
panel.background#000000
panel.border#ff5100
panel.dropBackground#ffffff1f
panelInput.border#9000ff
panelTitle.activeBorder#9000ff
panelTitle.activeForeground#daadff
panelTitle.inactiveForeground#ff5100
peekView.border#9000ff
peekViewEditor.background#ffffff33
peekViewEditor.matchHighlightBackground#ff0000
peekViewEditor.matchHighlightBorder#9000ff
peekViewEditorGutter.background#150027
peekViewResult.background#9000ff3a
peekViewResult.fileForeground#ffffffdc
peekViewResult.lineForeground#ffffff
peekViewResult.matchHighlightBackground#ff0000
peekViewResult.selectionBackground#9000ff8a
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#000000
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#daadff
pickerGroup.border#9000ff
pickerGroup.foreground#9000ff
problemsErrorIcon.foreground#ff3d3d
problemsInfoIcon.foreground#d9ff00
problemsWarningIcon.foreground#ff922c
progressBar.background#9000ff
quickInput.background#000000
quickInput.foreground#919cb9
scrollbar.shadow#0f1320
scrollbarSlider.activeBackground#aa47bc70
scrollbarSlider.background#06080e4a
scrollbarSlider.hoverBackground#0f132090
searchEditor.findMatchBackground#fbadad20
searchEditor.findMatchBorder#c7adfb35
searchEditor.textInputBorder#b2cffb1a
selection.background#d9ff0040
settings.checkboxBackground#000000
settings.checkboxBorder#97ee9150
settings.checkboxForeground#97ee91
settings.dropdownBackground#000000
settings.dropdownBorder#b2cffb1a
settings.dropdownForeground#e7adfb
settings.dropdownListBorder#b2cffb1a
settings.headerForeground#ff5100
settings.modifiedItemIndicator#9000ff
settings.numberInputBackground#000000
settings.numberInputBorder#b2cffb1a
settings.numberInputForeground#f8c275
settings.textInputBackground#000000
settings.textInputBorder#b2cffb1a
settings.textInputForeground#50dffe
sideBar.background#000000
sideBar.border#000000
sideBar.dropBackground#000000
sideBar.foreground#daadff
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#9000ff
sideBarSectionHeader.foreground#daadff
sideBarTitle.foreground#00ffd5
statusBar.background#ff3c00c5
statusBar.border#d9ff00
statusBar.debuggingBackground#7bff00b9
statusBar.debuggingBorder#d9ff00
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#a200ff2d
statusBar.noFolderBorder#ff5100
statusBar.noFolderForeground#daadff
statusBarItem.activeBackground#ffffff2e
statusBarItem.hoverBackground#ffffff1f
statusBarItem.prominentBackground#000000
statusBarItem.prominentForeground#919cb9
statusBarItem.prominentHoverBackground#000000
statusBarItem.remoteBackground#9000ff
statusBarItem.remoteForeground#daadff
symbolIcon.arrayForeground#fcf6ff
symbolIcon.booleanForeground#fcf6ff
symbolIcon.classForeground#ee9d28
symbolIcon.colorForeground#fcf6ff
symbolIcon.constantForeground#fcf6ff
symbolIcon.constructorForeground#b180d7
symbolIcon.enumeratorForeground#ee9d28
symbolIcon.enumeratorMemberForeground#75beff
symbolIcon.eventForeground#ee9d28
symbolIcon.fieldForeground#75beff
symbolIcon.fileForeground#fcf6ff
symbolIcon.folderForeground#fcf6ff
symbolIcon.functionForeground#b180d7
symbolIcon.interfaceForeground#75beff
symbolIcon.keyForeground#fcf6ff
symbolIcon.keywordForeground#fcf6ff
symbolIcon.methodForeground#b180d7
symbolIcon.moduleForeground#fcf6ff
symbolIcon.namespaceForeground#fcf6ff
symbolIcon.nullForeground#fcf6ff
symbolIcon.numberForeground#fcf6ff
symbolIcon.objectForeground#ffa4a4
symbolIcon.operatorForeground#fcf6ff
symbolIcon.packageForeground#fcf6ff
symbolIcon.propertyForeground#fcf6ff
symbolIcon.referenceForeground#fcf6ff
symbolIcon.snippetForeground#fcf6ff
symbolIcon.stringForeground#fcf6ff
symbolIcon.structForeground#fcf6ff
symbolIcon.textForeground#fcf6ff
symbolIcon.typeParameterForeground#fcf6ff
symbolIcon.unitForeground#fcf6ff
symbolIcon.variableForeground#75beff
tab.activeBackground#000000
tab.activeBorder#ff5100
tab.activeBorderTop#9000ff
tab.activeForeground#24e8d8
tab.activeModifiedBorder#ff5100
tab.border#6115b9
tab.hoverBackground#1b1b1b
tab.hoverBorder#00fff2
tab.inactiveBackground#000000
tab.inactiveForeground#b372e7
tab.inactiveModifiedBorder#e34f8c90
tab.unfocusedActiveBackground#000000
tab.unfocusedActiveBorder#000000
tab.unfocusedActiveBorderTop#000000
tab.unfocusedActiveForeground#47a9bc
tab.unfocusedActiveModifiedBorder#e34f8ca0
tab.unfocusedHoverBackground#1b1b1b
tab.unfocusedHoverBorder#47a9bc
tab.unfocusedInactiveForeground#79839c
tab.unfocusedInactiveModifiedBorder#e34f8c70
terminal.ansiBlack#3d3d3d
terminal.ansiBlue#7887c0
terminal.ansiBrightBlack#7e7e7e
terminal.ansiBrightBlue#92a8ff
terminal.ansiBrightCyan#2c94a8
terminal.ansiBrightGreen#d6ff89
terminal.ansiBrightMagenta#bf9efd
terminal.ansiBrightRed#ff1f1fa8
terminal.ansiBrightWhite#e2ffbc
terminal.ansiBrightYellow#f7f781
terminal.ansiCyan#7dbac5
terminal.ansiGreen#a1b678
terminal.ansiMagenta#8e72c4
terminal.ansiRed#fd5555
terminal.ansiWhite#a7da98
terminal.ansiYellow#b1b174
terminal.background#000000
terminal.border#0f1320
terminal.foreground#2df8ff
terminal.selectionBackground#42557b5a
terminalCursor.background#0f1320
terminalCursor.foreground#9000ff
textBlockQuote.background#919cb91c
textBlockQuote.border#e34f8c
textCodeBlock.background#0a0a0a66
textLink.activeForeground#ff5100
textLink.foreground#d9ff00
textPreformat.foreground#24e8d8
textSeparator.foreground#919cb9
titleBar.activeBackground#000000
titleBar.activeForeground#daadff
titleBar.border#0f1320
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#8a8a8a
tree.indentGuidesStroke#585858
walkThrough.embeddedEditorBackground#000000
welcomePage.background#000000
welcomePage.buttonBackground#000000
welcomePage.buttonHoverBackground#9000ff3d
widget.shadow#000000
window.activeBorder#d9ff00
window.inactiveBorder#ff5100

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, keyword.control	#ffaeae	—
comment	#699c4b	—
keyword.operator	#D3CAFF	—
Number	#66D1BA	italic
punctuation.definition.template-expression, punctuation.section.embedded	#FFADCB	—
meta.template.expression	#FFFFB8	—
constant.language	#C7A9FF	—
constant.character, constant.other	#CAAEFF	—
variable	#cdffcd	—
storage.type	#00ffff	italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution	#FF2E2E	italic bold underline
entity.other.inherited-class	#EB612B	italic underline
variable.parameter	#D9FF00	italic underline
entity.name.tag	#FFADCB
entity.other.attribute-name,storage.modifier	#cde59d
support.function	#ce9178
support.constant	#ACF1FF
support.type, support.class	#AAF1FF	italic
invalid	#D4FAFF
invalid.deprecated	#F8F8F0	—
meta.structure.dictionary.json string.quoted.double.json	#CFCFC2	—
string.quoted.single	#CE9178	—
support	#CE9178	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#FFA7C7	—
markup.inserted	#E2FFA8	—
markup.changed	#FFF7AE	—
constant.numeric.line-number.find-in-files - match	#D6C1FFA0	—
entity.name.filename.find-in-files	#FFD560	—
markup.quote	#FFB0CD	—
markup.list	#FFEE56	—
markup.bold, markup.italic	#66D9EF	—
markup.inline.raw	#FFD09B
markup.heading	#E2FFA7	—
markup.heading.setext	#E1FFA6	bold
markup.heading.markdown	—	bold
markup.quote.markdown	#75715E	italic
markup.bold.markdown	—	bold
string.other,string.quoted.double	#C8AAFF	—
markup.underline.link.markdown,markup.underline.link.image.markdown,string.single	#ddffa7	—
markup.italic.markdown	—	italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown	#F8F8F2	—
punctuation.definition.list.begin.markdown,string.quoted.triple	#E1FFA4	—
token.info-token	#A4C6FF	—
token.warn-token	#D4B57A	—
token.error-token	#FFA6A6	—
token.debug-token	#C28DE9	—
variable.language	#FFCF98	—
entity.other.attribute-name.pseudo-element.css, entity.other.inherited-class, markup.italic.markdown, markup.quote, meta.function.variable.css, punctuation.definition.italic.markdown, punctuation.definition.string.css, string.quoted.double.css, variable.argument.css	—	italic
meta.brace, punctuation.definition.array, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.string, punctuation.definition.tag, punctuation.curlybrace, punctuation.fullstop, punctuation.section, punctuation.support, punctuation.terminator, meta.structure.dictionary.json, string.quoted.double.json, constant.other.table-name.sql	#F6F0FF	—
support.variable, support.type.property-name, variable.other.object.property, meta.object-literal.key.js, string.other.link.description.markdown	#70ffff	—
keyword.var, keyword.const, constant, keyword.struct, keyword.interface, keyword.function, markup.inline.raw, punctuation.parenthesis.named.begin.regexp, punctuation.parenthesis.named.end.regexp, punctuation.parenthesis.non-capturing.begin.regexp, punctuation.parenthesis.non-capturing.end.regexp, support.class, markup.inserted, entity.name.type, entity.other.inherited-class, entity.other.attribute-name.id.css	#cc4bff	—
punctuation.terminator, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css	#919CB9	—
constant.other.database-name.sql, variable.other.object	#C5B9DF	—
markup.quote, markup.bold, markup.italic, string.quoted.single.js, string.quoted.double.js, meta.link.inline.markdown, meta.image.inline.markdown, markup.underline.link, entity.name.type.js	#50DFFE	—
string.quoted.docstring, storage.type.function, keyword.type, punctuation.accessor, punctuation.separator, meta.brace.square.js, meta.brace.square.ts	#E7ADFB	—
entity.name.function, entity.name.type, entity.other.attribute-name, entity.other.inherited-class, markup.heading.setext, meta.function-call.generic, support.other.escape.special.regexp	#9000ff	underline
entity.name.tag, support.function.builtin, constant.numeric, markup.bold, markup.underline, markup.italic, string.quoted.double.css, punctuation.definition.string.css	#e97cff	—
entity.name.section, keyword, variable.language, punctuation.definition.heading, punctuation.definition.keyword, keyword.other.DML.sql, constant.character.escape.markdown, entity.other.attribute-name.class.css	#7EE5FF	—
meta.brace, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.begin.bracket, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.bracket, punctuation.definition.dict, punctuation.definition.dictionary, punctuation.definition.end.bracket, punctuation.definition.list, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.tag, punctuation.other.comma, punctuation.other.period, punctuation.section, punctuation.support, punctuation.terminator	#FBD3E1	—
punctuation.definition.template-expression, punctuation.section.embedded, storage, markup.deleted, markup.heading, entity.name.section.markdown, token.error-token	#d5a8ff	—
markup.changed, entity.name.filename.find-in-files, markup.quote, keyword.other.unit.px.css, keyword.other.unit.fr.css, keyword.other.unit.s.css, keyword.other.unit.percentage.css	#FAFAA0	—
markup.fenced_code.block.markdown, keyword.type, keyword.other.alias.sql, meta.functiona.variable.css, variable.argument.css, constant.numeric.line-number.find-in-files - match	#C7ADFB	—
text.html.markdown, support.constant.property-value.css	#e5b0ff	—
beginning.punctuation.definition.list.markdown, constant.language.null, constant.language.boolean.true, constant.language.boolean.false, entity.other.attribute-name.pseudo-element.css	#F39B35	—
meta.link.inline.markdown, meta.image.inline.markdown, markup.underline.link	#99DDFF	—
markup.bold.markdown, punctuation.definition.bold.markdown	—	bold
entity.other.inherited-class, entity.name.type, entity.name.class, entity.other.inherited-class	#FF2E2E	italic bold underline
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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