Codely Theme

Name: Codely Theme
Author: Codely

Publisher: CodelyThemes in package: 1

A modern, good-looking, productivity-increaser theme for Visual Studio Code

GitHub

VS Code preview

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

Codely Theme — Codely Dark

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#262626
activityBar.activeBorder#b8bb26
activityBar.background#1e1e1e
activityBar.border#262626
activityBar.dropBorder#b8bb26
activityBar.foreground#b8bb26
activityBar.inactiveForeground#ebdbb2
activityBarBadge.background#ebdbb2
activityBarBadge.foreground#1e1e1e
badge.background#262626
badge.foreground#1e1e1e
breadcrumb.activeSelectionForeground#ebdbb2
breadcrumb.background#1e1e1e
breadcrumb.focusForeground#b8bb26
breadcrumb.foreground#ebdbb2
breadcrumbPicker.background#1e1e1e
button.background#262626
button.foreground#ebdbb2
button.hoverBackground#1e1e1e
button.secondaryBackground#ebdbb2
button.secondaryForeground#1e1e1e
button.secondaryHoverBackground#eee5ce
charts.blue#75beff
charts.foreground#ebdbb2
charts.green#89d185
charts.lines#cccccc80
charts.orange#d18616
charts.purple#b180d7
charts.red#fb5245
charts.yellow#cca700
checkbox.background#1e1e1e
checkbox.border#262626
checkbox.foreground#ebdbb2
debugConsole.errorForeground#f48771
debugConsole.infoForeground#75beff
debugConsole.sourceForeground#cccccc
debugConsole.warningForeground#cca700
debugConsoleInputIcon.foreground#cccccc
debugExceptionWidget.background#420b0d
debugExceptionWidget.border#fb5245
debugIcon.breakpointCurrentStackframeForeground#ffcc00
debugIcon.breakpointDisabledForeground#848484
debugIcon.breakpointForeground#fb5245
debugIcon.breakpointStackframeForeground#89d185
debugIcon.breakpointUnverifiedForeground#848484
debugIcon.continueForeground#75beff
debugIcon.disconnectForeground#f48771
debugIcon.pauseForeground#75beff
debugIcon.restartForeground#89d185
debugIcon.startForeground#89d185
debugIcon.stepBackForeground#75beff
debugIcon.stepIntoForeground#75beff
debugIcon.stepOutForeground#75beff
debugIcon.stepOverForeground#75beff
debugIcon.stopForeground#f48771
debugTokenExpression.boolean#4e94ce
debugTokenExpression.error#f48771
debugTokenExpression.name#c586c0
debugTokenExpression.number#b5cea8
debugTokenExpression.string#ce9178
debugTokenExpression.value#cccccc99
debugToolBar.background#1e1e1e
debugView.exceptionLabelBackground#1e1e1e
debugView.exceptionLabelForeground#cccccc
debugView.stateLabelBackground#262626
debugView.stateLabelForeground#ebdbb2
debugView.valueChangedHighlight#1163a7
descriptionForeground#ebdbb2
diffEditor.diagonalFill#cccccc33
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedTextBackground#ff000033
dropdown.background#1e1e1e
dropdown.border#262626
dropdown.foreground#ebdbb2
dropdown.listBackground#1e1e1e
editor.background#1e1e1e
editor.findMatchBackground#515c6a
editor.findMatchHighlightBackground#442b43
editor.findRangeHighlightBackground#3a3d4166
editor.focusedStackFrameHighlightBackground#7abd7a4d
editor.foldBackground#442b434d
editor.foreground#ebdbb2
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#442b4380
editor.lineHighlightBackground#262626
editor.lineHighlightBorder#282828
editor.onTypeRenameBackground#ff00004d
editor.rangeHighlightBackground#ffffff0b
editor.selectionBackground#442b43
editor.selectionHighlightBackground#38233799
editor.snippetFinalTabstopHighlightBorder#525252
editor.snippetTabstopHighlightBackground#7c7c7c4d
editor.stackFrameHighlightBackground#ffff0033
editor.symbolHighlightBackground#442b43
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editorBracketMatch.background#442b43
editorBracketMatch.border#262626
editorCodeLens.foreground#999999
editorCursor.foreground#81277e
editorError.foreground#f48771
editorGroup.border#444444
editorGroup.dropBackground#53595d80
editorGroupHeader.border#262626
editorGroupHeader.noTabsBackground#1e1e1e
editorGroupHeader.tabsBackground#1e1e1e
editorGutter.addedBackground#587c0c
editorGutter.background#1e1e1e
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#0c7d9d
editorHint.foreground#eeeeeeb3
editorHoverWidget.background#1e1e1e
editorHoverWidget.border#262626
editorHoverWidget.foreground#ebdbb2
editorHoverWidget.statusBarBackground#1e1e1e
editorIndentGuide.activeBackground#e3e4e229
editorIndentGuide.background#262626
editorInfo.foreground#75beff
editorLightBulb.foreground#ffcc00
editorLightBulbAutoFix.foreground#75beff
editorLineNumber.activeForeground#c6c6c6
editorLineNumber.foreground#555049
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#2d2d30
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.addedForeground#587c0c99
editorOverviewRuler.border#7f7f7f4d
editorOverviewRuler.bracketMatchForeground#a0a0a0
editorOverviewRuler.commonContentForeground#60606066
editorOverviewRuler.currentContentForeground#40c8ae80
editorOverviewRuler.deletedForeground#94151b99
editorOverviewRuler.errorForeground#ff1212b3
editorOverviewRuler.findMatchForeground#d186167e
editorOverviewRuler.incomingContentForeground#40a6ff80
editorOverviewRuler.infoForeground#75beff
editorOverviewRuler.modifiedForeground#0c7d9d99
editorOverviewRuler.rangeHighlightForeground#007acc99
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#cca700
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
editorPane.background#1e1e1e
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#1e1e1e
editorSuggestWidget.border#262626
editorSuggestWidget.foreground#ebdbb2
editorSuggestWidget.highlightForeground#0097fb
editorSuggestWidget.selectedBackground#262626
editorUnnecessaryCode.opacity#000000aa
editorWarning.foreground#cca700
editorWhitespace.foreground#e3e4e229
editorWidget.background#252526
editorWidget.border#454545
editorWidget.foreground#cccccc
errorForeground#f48771
extensionBadge.remoteBackground#ebdbb2
extensionBadge.remoteForeground#1e1e1e
extensionButton.prominentBackground#327e36
extensionButton.prominentForeground#ebdbb2
extensionButton.prominentHoverBackground#28632b
focusBorder#262626
foreground#ebdbb2
gitDecoration.addedResourceForeground#629755
gitDecoration.conflictingResourceForeground#9876AA
gitDecoration.deletedResourceForeground#6C6C6C
gitDecoration.ignoredResourceForeground#7A725C
gitDecoration.modifiedResourceForeground#458588
gitDecoration.stageDeletedResourceForeground#6C6C6C
gitDecoration.stageModifiedResourceForeground#458588
gitDecoration.submoduleResourceForeground#458588
gitDecoration.untrackedResourceForeground#D1675A
icon.foreground#ebdbb2
imagePreview.border#80808059
input.background#262626
input.border#262626
input.foreground#ebdbb2
input.placeholderForeground#ebdbb29d
inputOption.activeBackground#1e1e1e
inputOption.activeBorder#b8bb26
inputOption.activeForeground#ebdbb2
inputValidation.errorBackground#5a1d1d
inputValidation.errorBorder#be1100
inputValidation.infoBackground#063b49
inputValidation.infoBorder#007acc
inputValidation.warningBackground#352a05
inputValidation.warningBorder#b89500
list.activeSelectionBackground#262626
list.activeSelectionForeground#ebdbb2
list.deemphasizedForeground#8c8c8c
list.dropBackground#062f4a
list.errorForeground#f88070
list.filterMatchBackground#442b43
list.focusBackground#262626
list.highlightForeground#0097fb
list.hoverBackground#2a2d2e
list.inactiveSelectionBackground#37373d
list.invalidItemForeground#b89500
list.warningForeground#cca700
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
menu.background#1e1e1e
menu.border#262626
menu.foreground#ebdbb2
menu.selectionBackground#262626
menu.selectionBorder#b8bb26
menu.selectionForeground#ebdbb2
menu.separatorBackground#bbbbbb
menubar.selectionBackground#262626
menubar.selectionBorder#1e1e1e
menubar.selectionForeground#cccccc
merge.commonContentBackground#60606029
merge.commonHeaderBackground#60606066
merge.currentContentBackground#40c8ae33
merge.currentHeaderBackground#40c8ae80
merge.incomingContentBackground#40a6ff33
merge.incomingHeaderBackground#40a6ff80
minimap.background#1e1e1e
minimap.errorHighlight#ff1212b3
minimap.findMatchHighlight#d18616
minimap.selectionHighlight#264f78
minimap.warningHighlight#cca700
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0c7d9d
minimapSlider.activeBackground#bfbfbf33
minimapSlider.background#26262680
minimapSlider.hoverBackground#64646459
notebook.cellBorderColor#26262666
notebook.cellHoverBackground#26262633
notebook.cellInsertionIndicator#007fd4
notebook.cellStatusBarItemHoverBackground#ffffff26
notebook.cellToolbarSeparator#80808059
notebook.focusedCellBackground#26262666
notebook.focusedCellBorder#ffffff1f
notebook.focusedEditorBorder#007fd4
notebook.focusedRowBorder#ffffff1f
notebook.outputContainerBackgroundColor#26262666
notebook.rowHoverBackground#26262680
notebook.symbolHighlightBackground#ffffff0b
notebookScrollbarSlider.activeBackground#bfbfbf66
notebookScrollbarSlider.background#262626
notebookScrollbarSlider.hoverBackground#646464b3
notebookStatusErrorIcon.foreground#f48771
notebookStatusRunningIcon.foreground#cccccc
notebookStatusSuccessIcon.foreground#89d185
notificationCenter.border#b8bb26
notificationCenterHeader.background#262626
notificationCenterHeader.foreground#ebdbb2
notificationLink.foreground#ebdbb2
notifications.background#252526
notifications.border#262626
notifications.foreground#cccccc
notificationsErrorIcon.foreground#f48771
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
panel.background#1e1e1e
panel.border#262626
panel.dropBorder#ebdbb2
panelSection.border#262626
panelSection.dropBackground#53595d80
panelSectionHeader.background#80808033
panelTitle.activeBorder#b8bb26
panelTitle.activeForeground#ebdbb2
panelTitle.inactiveForeground#ebdbb2
peekView.border#3187c0
peekViewEditor.background#001f33
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditorGutter.background#001f33
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1e1e1e
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#262626
pickerGroup.foreground#b8bb26
problemsErrorIcon.foreground#f48771
problemsInfoIcon.foreground#75beff
problemsWarningIcon.foreground#cca700
progressBar.background#262626
quickInput.background#1e1e1e
quickInput.foreground#ebdbb2
quickInputTitle.background#ffffff1b
scm.providerBorder#454545
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#bfbfbf66
scrollbarSlider.background#262626
scrollbarSlider.hoverBackground#646464b3
searchEditor.findMatchBackground#442b43a8
searchEditor.findMatchBorder#442b43
searchEditor.textInputBorder#262626
selection.background#442b43
settings.checkboxBackground#1e1e1e
settings.checkboxBorder#262626
settings.checkboxForeground#ebdbb2
settings.dropdownBackground#1e1e1e
settings.dropdownBorder#262626
settings.dropdownForeground#ebdbb2
settings.dropdownListBorder#454545
settings.focusedRowBackground#262626
settings.headerForeground#ebdbb2
settings.modifiedItemIndicator#b8bb26
settings.numberInputBackground#262626
settings.numberInputBorder#262626
settings.numberInputForeground#ebdbb2
settings.textInputBackground#262626
settings.textInputBorder#262626
settings.textInputForeground#ebdbb2
sideBar.background#1e1e1e
sideBar.border#262626
sideBar.dropBackground#53595d80
sideBar.foreground#ebdbb2
sideBarSectionHeader.background#80808033
sideBarSectionHeader.foreground#ebdbb2
sideBarTitle.foreground#ebdbb2
statusBar.background#1e1e1e
statusBar.border#262626
statusBar.debuggingBackground#FB5245
statusBar.debuggingBorder#262626
statusBar.debuggingForeground#ebdbb2
statusBar.foreground#ebdbb2
statusBar.noFolderBackground#1e1e1e
statusBar.noFolderBorder#262626
statusBar.noFolderForeground#ebdbb2
statusBarItem.activeBackground#ffffff2e
statusBarItem.hoverBackground#ffffff1f
statusBarItem.prominentBackground#00000080
statusBarItem.prominentForeground#ebdbb2
statusBarItem.prominentHoverBackground#0000004d
statusBarItem.remoteBackground#b8bb26
statusBarItem.remoteForeground#1e1e1e
symbolIcon.arrayForeground#cccccc
symbolIcon.booleanForeground#cccccc
symbolIcon.classForeground#ee9d28
symbolIcon.colorForeground#cccccc
symbolIcon.constantForeground#cccccc
symbolIcon.constructorForeground#b180d7
symbolIcon.enumeratorForeground#ee9d28
symbolIcon.enumeratorMemberForeground#75beff
symbolIcon.eventForeground#ee9d28
symbolIcon.fieldForeground#75beff
symbolIcon.fileForeground#cccccc
symbolIcon.folderForeground#cccccc
symbolIcon.functionForeground#b180d7
symbolIcon.interfaceForeground#75beff
symbolIcon.keyForeground#cccccc
symbolIcon.keywordForeground#cccccc
symbolIcon.methodForeground#b180d7
symbolIcon.moduleForeground#cccccc
symbolIcon.namespaceForeground#cccccc
symbolIcon.nullForeground#cccccc
symbolIcon.numberForeground#cccccc
symbolIcon.objectForeground#cccccc
symbolIcon.operatorForeground#cccccc
symbolIcon.packageForeground#cccccc
symbolIcon.propertyForeground#cccccc
symbolIcon.referenceForeground#cccccc
symbolIcon.snippetForeground#cccccc
symbolIcon.stringForeground#cccccc
symbolIcon.structForeground#cccccc
symbolIcon.textForeground#cccccc
symbolIcon.typeParameterForeground#cccccc
symbolIcon.unitForeground#cccccc
symbolIcon.variableForeground#75beff
tab.activeBackground#262626
tab.activeBorder#b8bb26
tab.activeForeground#ffffff
tab.activeModifiedBorder#3399cc
tab.border#262626
tab.hoverBackground#262626
tab.inactiveBackground#1e1e1e
tab.inactiveForeground#ffffff80
tab.inactiveModifiedBorder#3399cc80
tab.lastPinnedBorder#585858
tab.unfocusedActiveBackground#262626
tab.unfocusedActiveBorder#b8bb2680
tab.unfocusedActiveForeground#ffffff80
tab.unfocusedActiveModifiedBorder#3399cc80
tab.unfocusedHoverBackground#26262680
tab.unfocusedInactiveBackground#1e1e1e
tab.unfocusedInactiveForeground#ffffff40
tab.unfocusedInactiveModifiedBorder#3399cc40
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#95b7f7
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#b8bb26
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#b8bb26
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#fb5245
terminal.ansiWhite#ebdbb2
terminal.ansiYellow#fac149
terminal.border#262626
terminal.foreground#ebdbb2
terminal.selectionBackground#ffffff40
textBlockQuote.background#7f7f7f1a
textBlockQuote.border#007acc80
textCodeBlock.background#0a0a0a66
textLink.activeForeground#b8bb26
textLink.foreground#ebdbb2
textPreformat.foreground#d7ba7d
textSeparator.foreground#ffffff2e
titleBar.activeBackground#1e1e1e
titleBar.activeForeground#ebdbb2
titleBar.border#262626
titleBar.inactiveBackground#1e1e1e
titleBar.inactiveForeground#ebdbb2
tree.indentGuidesStroke#585858
widget.shadow#262626
window.activeBorder#262626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#A89984	italic
variable, string constant.other.placeholder	#EBDBB2	—
constant.other.color	#EBDBB2	—
invalid, invalid.illegal	#FB5245	—
keyword, storage.type, storage.modifier	#FB5245	italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.new	#EBDBB2	—
constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#8EC07C	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#FB5245	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, support.function.magic.python, storage.type.js	#FAC149	—
meta.block variable.other	#FB5245	—
support.other.variable, string.other.link	#FB5245	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#D3869B	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#EBDBB2	—
string	#B8BB26	—
variable.parameter, comment.block	#EBDBB2	—
entity.name, support.type, support.class, entity.other.inherited-class, support.orther.namespace.use.php, variable.other.readwrite.alias, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.export.default.js variable.other.readwrite.js	#8EC07C	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#EBDBB2	—
meta.selector.css, support.constant, meta.property-value.css	#FB5245	italic
keyword.other.special-method.dockerfile, entity.name.tag.yaml	#FB5245	italic
string.quoted.docstring.multi.python	#A89984	italic
entity.name.function.decorator.python	—	italic
variable.parameter.function.language.special.self.python, variable.language.special.self.python, variable.language.this, variable.language.super, support.function.builtin.python	#FB5245	italic
source.python entity.name.function	#8EC07C	—
source.python keyword.operator.logical.python	#FB5245	italic
source.python meta.function-call.arguments.python	#EBDBB2	—
source.python support.type.python	#FAC149	—
source.python punctuation.definition.arguments.begin.python, source.python punctuation.definition.arguments.end.python	#EBDBB2	—
source.python constant.character.format.placeholder.other.python	#FAC149	—
source.python storage.type.string.python	#B8BB26
source.pip-requirements, source.pip-requirements entity.name.class	#FB5245	italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FB5245	italic
entity.name.method.js	#82AAFF	italic
source.js meta.block variable.other	#EBDBB2	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name, entity.name.tag.structure.any.html, entity.name.tag	#FB5245	italic
meta.tag.sgml.doctype	#8EC07C	bold
entity.name.tag.html	#FB5245	italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name.html	#FB5245
punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html	#8EC07C	italic
entity.other.attribute-name.class	#FB5245	italic
source.sass keyword.control	#EBDBB2	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FB5245	italic
source.js keyword.operator.expression.in.js, source.js keyword.operator.expression.of.js, source.js keyword.operator.new	#FB5245	italic
source.js support.class, source.js entity.name.type.js	#FAC149	—
source.css support.function	#FB5245	italic
source.css support.constant, source.css keyword.other.unit, source.css variable.parameter	#B8BB26
source.css keyword.other.unit.fr.css	#FB5245	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#FB5245	italic
source.json meta.structure.dictionary.json	#FAC149	—
source.json meta.structure.dictionary.value.json, source.json punctuation.separator.dictionary.pair.json, source.json punctuation.definition.dictionary.begin.json, source.json punctuation.definition.dictionary.end.json	#EBDBB2	—
text.html.markdown, punctuation.definition.list_item.markdown	#EBDBB2	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#EBDBB2	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading.markdown entity.name	#FB5245	italic
markup.italic	#FB5245	italic
markup.bold, markup.bold string	#FB5245	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#FB5245	bold
markup.underline	#B8BB26	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#FAC149	—
string.other.link.description.title.markdown	#B8BB26	—
constant.other.reference.link.markdown	#B8BB26	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EBDBB2	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—
keyword.other.sql, keyword.other.DML.sql, keyword.other.alias.sql	#FB5245	—
constant.other.database-name.sql, constant.other.table-name.sql	#8EC07C	—

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