Retro Cathode-Ray Minimal Theme

Name: Retro Cathode-Ray Minimal Theme
Author: xXBalestraroXx

Publisher: xXBalestraroXxThemes in package: 1

Retro theme inspired by CRT monitors while being minimal and with a focus on usability

GitHub

VS Code preview

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

Retro Cathode-Ray Minimal Theme — Retro Cathode-Ray Minimal Theme

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#284D2860
activityBar.activeBorder#284D28
activityBar.activeFocusBorder#284D28
activityBar.background#181D20
activityBar.border#181D20
activityBar.dropBorder#7A9C9B
activityBar.foreground#D0D0D0
activityBar.inactiveForeground#D0D0D0B0
activityBarBadge.background#6A8C8A
activityBarBadge.foreground#FFFFFF
badge.background#6A8C8A
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#D0D0D0
breadcrumb.background#181D20
breadcrumb.foreground#D0D0D0
breadcrumbPicker.background#181D20
button.background#6A8C8A
button.foreground#FFFFFF
button.hoverBackground#5A7C7A
button.secondaryBackground#A7AAA050
button.secondaryForeground#D0D0D0
button.secondaryHoverBackground#A7AAA070
checkbox.background#181D20
checkbox.border#7A9C9B
checkbox.foreground#D0D0D0
checkbox.selectBackground#7A9C9B
checkbox.selectBorder#7A9C9B
commandCenter.activeBackground#7A9C9B80
commandCenter.activeBorder#7A9C9B
commandCenter.background#181D20
commandCenter.border#7A9C9B
commandCenter.foreground#D0D0D0
commandCenter.hoverBackground#7A9C9B60
commandCenter.inactiveBorder#181D20
commandCenter.inactiveForeground#D0D0D0B0
debugConsole.background#181D20
debugConsole.border#7A9C9B
debugConsole.errorForeground#DB5252
debugConsole.infoForeground#7A9C9B
debugConsole.inputForeground#D0D0D0
debugConsole.sourceForeground#D0D0D0
debugConsole.warningForeground#CC7722
debugConsoleInputIcon.foreground#D0D0D0
debugExceptionWidget.background#DB525250
debugExceptionWidget.border#DB5252
debugTokenExpression.array#D0D0D0
debugTokenExpression.boolean#D0D0D0
debugTokenExpression.error#DB5252
debugTokenExpression.name#D0D0D0
debugTokenExpression.number#7A9C9B
debugTokenExpression.object#D0D0D0
debugTokenExpression.string#7A9C9B
debugTokenExpression.type#D0D0D0
debugTokenExpression.value#DB5252
debugToolBar.background#181D20
debugToolBar.border#7A9C9B
debugView.exceptionLabelBackground#DB5252
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#6A8C8A
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#A7AAA0
diffEditor.border#7A9C9B
diffEditor.diagonalFill#7A9C9B50
diffEditor.insertedTextBackground#284D2850
diffEditor.insertedTextBorder#284D2880
diffEditor.movedTextBackground#A7AAA050
diffEditor.movedTextBorder#A7AAA080
diffEditor.removedTextBackground#DB525250
diffEditor.removedTextBorder#DB525280
diffEditor.unchangedRegionBackground#181D20
diffEditor.unchangedRegionDimmedForeground#D0D0D0B0
diffEditor.unchangedRegionForeground#D0D0D0
diffEditor.wordWrapBackground#181D20
dropdown.background#181D20
dropdown.border#7A9C9B
dropdown.foreground#D0D0D0
dropdown.listBackground#181D20
editor.background#181D20
editor.findMatchBackground#284D2880
editor.findMatchHighlightBackground#284D2850
editor.findRangeHighlightBackground#284D2880
editor.focusedStackFrameHighlightBackground#7A9C9B50
editor.foldBackground#7A9C9B50
editor.foreground#D0D0D0
editor.hoverHighlightBackground#284D2850
editor.inactiveSelectionBackground#284D2880
editor.inlineBreakpointBackground#DB5252
editor.inlineBreakpointForeground#FFFFFF
editor.inlineValuesBackground#7A9C9BC0
editor.inlineValuesForeground#FFFFFF
editor.lineHighlightBackground#7A9C9B30
editor.lineHighlightBorder#7A9C9B30
editor.rangeHighlightBackground#284D2850
editor.selectionBackground#284D28C0
editor.selectionHighlightBackground#284D2850
editor.snippetFinalTabstopHighlightBackground#6A8C8A40
editor.snippetFinalTabstopHighlightBorder#6A8C8A
editor.snippetTabstopHighlightBackground#7A9C9B40
editor.snippetTabstopHighlightBorder#7A9C9B
editor.stackFrameHighlightBackground#A7AAA050
editor.stickyScroll.background#181D20
editor.stickyScroll.border#7A9C9B
editor.stickyScroll.foreground#D0D0D0
editor.stickyScrollHover.background#7A9C9B40
editor.symbolHighlightBackground#284D2850
editor.wordHighlightBackground#284D2850
editor.wordHighlightStrongBackground#284D2880
editorBracketHighlight.foreground1#D0D0D0
editorBracketHighlight.foreground2#D0D0D0
editorBracketHighlight.foreground3#D0D0D0
editorBracketHighlight.foreground4#D0D0D0
editorBracketHighlight.foreground5#D0D0D0
editorBracketHighlight.foreground6#D0D0D0
editorBracketHighlight.unexpectedBracket.foreground#DB5252
editorBracketMatch.background#284D2880
editorBracketMatch.border#284D28
editorBracketPair.horizontalLineBorder#7A9C9B
editorBracketPair.horizontalLineForeground#7A9C9B60
editorBracketPair.indentGuide.activeBackground1#7A9C9B80
editorBracketPair.indentGuide.activeBackground2#7A9C9B80
editorBracketPair.indentGuide.activeBackground3#7A9C9B80
editorBracketPair.indentGuide.activeBackground4#7A9C9B80
editorBracketPair.indentGuide.activeBackground5#7A9C9B80
editorBracketPair.indentGuide.activeBackground6#7A9C9B80
editorBracketPair.indentGuide.background1#7A9C9B40
editorBracketPair.indentGuide.background2#7A9C9B40
editorBracketPair.indentGuide.background3#7A9C9B40
editorBracketPair.indentGuide.background4#7A9C9B40
editorBracketPair.indentGuide.background5#7A9C9B40
editorBracketPair.indentGuide.background6#7A9C9B40
editorBracketPair.unmatchedBracket.foreground#DB5252
editorBracketPair.verticalLineBorder#7A9C9B
editorBracketPair.verticalLineForeground#7A9C9B60
editorCursor.foreground#DB5252
editorError.border#DB5252
editorError.foreground#DB5252
editorGroup.dropBackground#284D2860
editorGroup.emptyBackground#181D20
editorGroup.focusedEmptyBorder#7A9C9B
editorGroupHeader.noTabsBackground#181D20
editorGroupHeader.tabsBackground#181D20
editorGroupHeader.tabsBorder#181D20
editorGutter.addedBackground#7A9C9B
editorGutter.background#181D20
editorGutter.commentRangeForeground#D0D0D0C0
editorGutter.deletedBackground#DB5252
editorGutter.foldingControlForeground#D0D0D0
editorGutter.modifiedBackground#A7AAA0
editorHint.border#A7AAA099
editorHint.foreground#D0D0D0C0
editorHoverWidget.background#181D20
editorHoverWidget.border#7A9C9B
editorHoverWidget.foreground#D0D0D0
editorHoverWidget.statusBarBackground#181D20
editorIndentGuide.activeBackground#284D2860
editorIndentGuide.background#284D2860
editorInfo.border#7A9C9B
editorInfo.foreground#7A9C9B
editorLightBulb.foreground#D0D0D0
editorLightBulbAutoFix.foreground#D0D0D0
editorLineNumber.activeForeground#D0D0D0
editorLineNumber.foreground#7A9C9B
editorLink.activeForeground#D0D0D0
editorMarkerNavigation.background#181D20
editorMarkerNavigationError.background#DB5252
editorMarkerNavigationInfo.background#6A8C8A
editorMarkerNavigationWarning.background#CC7722
editorOverviewRuler.addedForeground#7A9C9B
editorOverviewRuler.background#181D20B0
editorOverviewRuler.bracketMatchForeground#D0D0D0
editorOverviewRuler.deletedForeground#DB5252
editorOverviewRuler.errorForeground#DB5252
editorOverviewRuler.findMatchForeground#D0D0D0
editorOverviewRuler.infoForeground#7A9C9B
editorOverviewRuler.modifiedForeground#A7AAA0
editorOverviewRuler.rangeHighlightForeground#284D28
editorOverviewRuler.selectionHighlightForeground#284D28
editorOverviewRuler.warningForeground#CC7722
editorOverviewRuler.wordHighlightForeground#284D2880
editorOverviewRuler.wordHighlightStrongForeground#284D2880
editorRuler.foreground#7A9C9B80
editorSuggestWidget.background#181D20
editorSuggestWidget.border#7A9C9B
editorSuggestWidget.foreground#D0D0D0
editorSuggestWidget.highlightForeground#D0D0D0
editorSuggestWidget.selectedBackground#284D28C0
editorSuggestWidget.selectedIconForeground#D0D0D0
editorWarning.border#CC7722
editorWarning.foreground#CC7722
editorWhitespace.foreground#7A9C9B60
editorWidget.background#181D20
editorWidget.border#7A9C9B
editorWidget.foreground#D0D0D0
errorForeground#DB5252
extensionBadge.background#6A8C8A
extensionBadge.foreground#FFFFFF
extensionButton.background#6A8C8A
extensionButton.foreground#FFFFFF
extensionButton.hoverBackground#5A7C7A
extensionButton.prominentBackground#6A8C8A
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#5A7C7A
focusBorder#00000000
foreground#D0D0D0
gitDecoration.addedResourceForeground#7A9C9B
gitDecoration.conflictingResourceForeground#DB5252
gitDecoration.deletedResourceForeground#DB5252
gitDecoration.ignoredResourceForeground#A7AAA0B0
gitDecoration.modifiedResourceForeground#D0D0D0
gitDecoration.renamedResourceForeground#D0D0D0
gitDecoration.stageDeletedResourceForeground#DB5252
gitDecoration.stageModifiedResourceForeground#D0D0D0
gitDecoration.submoduleResourceForeground#A7AAA0B0
gitDecoration.untrackedResourceForeground#7A9C9B
icon.foreground#D0D0D0
input.background#181D20
input.border#7A9C9B
input.foreground#D0D0D0
input.placeholderForeground#D0D0D0B0
inputOption.activeBackground#6A8C8A
inputOption.activeBorder#7A9C9B
inputOption.activeForeground#FFFFFF
inputValidation.errorBackground#DB525250
inputValidation.errorBorder#DB5252
inputValidation.errorForeground#D0D0D0
inputValidation.infoBackground#7A9C9B50
inputValidation.infoBorder#7A9C9B
inputValidation.infoForeground#D0D0D0
inputValidation.warningBackground#CC772250
inputValidation.warningBorder#CC7722
inputValidation.warningForeground#FFFFFF
interactiveEditor.border#7A9C9B
interactiveEditor.editor.background#181D20
interactiveEditor.editor.border#7A9C9B
interactiveEditor.regionHighlight#284D2840
interactiveEditor.regionHighlightBorder#284D28
interactiveEditorInput.background#181D20
interactiveEditorInput.border#7A9C9B
interactiveEditorInput.placeholderForeground#D0D0D0B0
keybindingTable.headerBackground#181D20
keybindingTable.rowsBackground#181D20
list.activeSelectionBackground#7A9C9B60
list.activeSelectionForeground#D0D0D0
list.activeSelectionIconForeground#D0D0D0
list.deemphasizedForeground#D0D0D0B0
list.dropBackground#284D2860
list.errorForeground#DB5252
list.filterMatchBackground#284D2880
list.filterMatchBorder#284D28
list.focusForeground#D0D0D0
list.highlightForeground#D0D0D0
list.hoverBackground#284D2840
list.hoverForeground#D0D0D0
list.inactiveSelectionBackground#283035
list.inactiveSelectionForeground#D0D0D0
list.inactiveSelectionIconForeground#D0D0D0C0
list.invalidItemForeground#DB5252
list.warningForeground#CC7722
listFilterWidget.background#181D20
listFilterWidget.noMatchesOutline#DB5252
listFilterWidget.outline#7A9C9B
menu.background#181D20
menu.foreground#D0D0D0
menu.selectionBackground#7A9C9B80
menu.selectionBorder#7A9C9B
menu.selectionForeground#FFFFFF
menu.separatorBackground#7A9C9B
menubar.selectionBackground#7A9C9B50
menubar.selectionForeground#D0D0D0
mergeEditor.change.background#284D2850
mergeEditor.change.base.background#284D2850
mergeEditor.change.border#7A9C9B
mergeEditor.change.inline.background#284D2850
mergeEditor.conflict.active.background#DB525280
mergeEditor.conflict.background#DB525250
mergeEditor.conflict.base.background#284D2850
mergeEditor.conflict.base.border#284D28
mergeEditor.conflict.current.background#284D2850
mergeEditor.conflict.current.border#284D28
mergeEditor.conflict.handled.background#A7AAA050
mergeEditor.conflict.handled.border#A7AAA0
mergeEditor.conflict.incoming.background#A7AAA050
mergeEditor.conflict.incoming.border#A7AAA0
mergeEditor.conflict.resolved.background#A7AAA050
mergeEditor.conflict.resolved.border#A7AAA0
mergeEditor.conflict.unhandled.background#DB525250
mergeEditor.conflict.unhandled.border#DB5252
mergeEditor.conflict.unresolved.background#DB525250
mergeEditor.conflict.unresolved.border#DB5252
minimap.background#181D20B0
minimap.errorHighlight#DB5252
minimap.findMatchHighlight#D0D0D0
minimap.selectionHighlight#284D28
minimap.warningHighlight#CC7722
minimapGutter.addedBackground#7A9C9B
minimapGutter.deletedBackground#DB5252
minimapGutter.modifiedBackground#A7AAA0
minimapSlider.activeBackground#A7AAA070
minimapSlider.background#A7AAA040
minimapSlider.hoverBackground#A7AAA060
multiDiffEditor.background#181D20
multiDiffEditor.border#7A9C9B
multiDiffEditor.fileBorder#7A9C9B
multiDiffEditor.fileHeaderBackground#181D20
multiDiffEditor.headerBackground#181D20
notebook.cellBorderColor#7A9C9B
notebook.cellEditorBackground#181D20
notebook.cellHoverBackground#7A9C9B40
notebook.cellInsertionIndicator#7A9C9B
notebook.cellStatusBarItemHoverBackground#6A8C8A
notebook.cellToolbarSeparator#7A9C9B
notebook.editorBackground#181D20
notebook.focusedCellBackground#284D2840
notebook.focusedCellBorder#7A9C9B
notebook.focusedEditorBorder#7A9C9B
notebook.outputContainerBackgroundColor#181D20
notebook.outputContainerBorderColor#7A9C9B
notebook.selectedCellBackground#284D2840
notebook.splitViewContainerBackground#181D20
notebookScrollbarSlider.activeBackground#A7AAA070
notebookScrollbarSlider.background#A7AAA040
notebookScrollbarSlider.hoverBackground#A7AAA060
notebookStatusErrorIcon.foreground#DB5252
notebookStatusRunningIcon.foreground#D0D0D0
notebookStatusSuccessIcon.foreground#7A9C9B
notificationCenter.border#7A9C9B
notificationCenterHeader.background#181D20
notificationCenterHeader.foreground#D0D0D0
notificationLink.foreground#D0D0D0
notifications.background#181D20
notifications.border#7A9C9B
notifications.foreground#D0D0D0
notificationsErrorIcon.foreground#DB5252
notificationsInfoIcon.foreground#7A9C9B
notificationsWarningIcon.foreground#CC7722
notificationToast.border#7A9C9B
outputView.background#181D20
outputViewStickyScroll.background#181D20
panel.background#181D20
panel.border#7A9C9B
panelInput.border#7A9C9B
panelSection.background#181D20
panelSection.border#7A9C9B
panelSectionHeader.background#181D20
panelSectionHeader.border#7A9C9B
panelSectionHeader.foreground#D0D0D0
panelTitle.activeBorder#7A9C9B
panelTitle.activeForeground#D0D0D0
panelTitle.inactiveForeground#D0D0D0C0
peekView.border#7A9C9B
peekViewEditor.background#181D20
peekViewEditor.lineHighlightBackground#284D2840
peekViewEditor.matchHighlightBackground#284D2880
peekViewResult.background#181D20
peekViewResult.fileForeground#D0D0D0
peekViewResult.lineForeground#D0D0D0C0
peekViewResult.matchHighlightBackground#284D28
peekViewResult.selectionBackground#284D28
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#181D20
peekViewTitleDescription.foreground#D0D0D0B0
peekViewTitleLabel.foreground#D0D0D0
pickerGroup.border#7A9C9B
pickerGroup.foreground#D0D0D0
profile.buttonBackground#6A8C8A
profile.buttonForeground#FFFFFF
profile.buttonHoverBackground#5A7C7A
profile.foreground#D0D0D0
profile.selectionBackground#6A8C8A
progressBar.background#7A9C9B
quickInput.background#181D20
quickInput.focusBackground#284D28
quickInput.foreground#D0D0D0
quickInput.selectedIconForeground#D0D0D0
quickInputTitle.background#181D20
sash.hoverBorder#7A9C9B
scm.providerBorder#7A9C9B
scrollbar.shadow#00000060
scrollbarSlider.activeBackground#A7AAA070
scrollbarSlider.background#A7AAA040
scrollbarSlider.hoverBackground#A7AAA060
searchEditor.findMatchBackground#284D2880
searchEditor.findMatchBorder#284D28
searchEditor.textInputBorder#7A9C9B
selection.background#284D28C0
settings.checkboxBackground#181D20
settings.checkboxBorder#7A9C9B
settings.checkboxForeground#D0D0D0
settings.dropdownBackground#181D20
settings.dropdownBorder#7A9C9B
settings.dropdownForeground#D0D0D0
settings.dropdownListBackground#181D20
settings.focusedRowBackground#284D2840
settings.headerBorder#7A9C9B
settings.headerForeground#D0D0D0
settings.modifiedItemIndicator#284D28
settings.numberInputBackground#181D20
settings.numberInputBorder#7A9C9B
settings.numberInputForeground#D0D0D0
settings.rowHoverBackground#284D2840
settings.sashBorder#7A9C9B
settings.sectionHeaderBackground#181D20
settings.textInputBackground#181D20
settings.textInputBorder#7A9C9B
settings.textInputForeground#D0D0D0
sideBar.background#181D20
sideBar.border#181D20
sideBar.foreground#D0D0D0
sideBarSectionHeader.background#181D20
sideBarSectionHeader.border#181D20
sideBarSectionHeader.foreground#D0D0D0
sideBarTitle.foreground#D0D0D0
statusBar.background#7A9C9B
statusBar.border#181D20
statusBar.debuggingBackground#DB5252
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#7A9C9B
statusBar.noFolderForeground#FFFFFF
statusBarItem.activeBackground#7A9C9B80
statusBarItem.errorBackground#DB5252
statusBarItem.errorForeground#FFFFFF
statusBarItem.errorHoverBackground#DB5252
statusBarItem.hoverBackground#7A9C9B60
statusBarItem.prominentBackground#A7AAA0
statusBarItem.prominentHoverBackground#A7AAA0B0
statusBarItem.remoteBackground#DB5252
statusBarItem.remoteForeground#FFFFFF
statusBarItem.remoteHoverBackground#DB5252
statusBarItem.remoteHoverForeground#FFFFFF
statusBarItem.warningBackground#CC7722
statusBarItem.warningForeground#FFFFFF
statusBarItem.warningHoverBackground#CC7722
tab.activeBackground#283035
tab.activeForeground#D0D0D0
tab.activeModifiedBorder#D0D0D0
tab.hoverBackground#284D2850
tab.hoverForeground#D0D0D0
tab.inactiveBackground#181D20
tab.inactiveForeground#D0D0D0B0
tab.inactiveModifiedBorder#D0D0D0B0
tab.lastPinnedBorder#7A9C9B
tab.unfocusedActiveBackground#283035
tab.unfocusedActiveForeground#D0D0D0C0
tab.unfocusedActiveModifiedBorder#D0D0D0B0
tab.unfocusedInactiveBackground#181D20
tab.unfocusedInactiveForeground#D0D0D0A0
terminal.ansiBlack#1D2021
terminal.ansiBlue#5F8CA8
terminal.ansiBrightBlack#3A4045
terminal.ansiBrightBlue#9BBBD7
terminal.ansiBrightCyan#B3E0E0
terminal.ansiBrightGreen#B2F090
terminal.ansiBrightMagenta#FF99CC
terminal.ansiBrightRed#FF6B6B
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFE066
terminal.ansiCyan#6CA9A7
terminal.ansiGreen#718C6A
terminal.ansiMagenta#A174A1
terminal.ansiRed#DB5252
terminal.ansiWhite#D0D0D0
terminal.ansiYellow#CC7722
terminal.background#181D20
terminal.border#7A9C9B
terminal.dropBackground#284D2860
terminal.foreground#D0D0D0
terminal.inactiveSelectionBackground#284D2850
terminal.selectionBackground#284D2880
terminal.tab.activeBorder#7A9C9B
terminalCursor.background#DB5252
terminalCursor.foreground#DB5252
terminalOverviewRuler.cursorForeground#DB5252
terminalOverviewRuler.findMatchForeground#284D28
textBlockQuote.background#181D20
textBlockQuote.border#7A9C9B
textCodeBlock.background#181D20
textLink.activeForeground#D0D0D0
textLink.foreground#7A9C9B
textPreformat.foreground#D0D0D0
textSeparator.foreground#7A9C9B
timeline.background#181D20
timeline.border#7A9C9B
timeline.foreground#D0D0D0
timeline.textForeground#D0D0D0
titleBar.activeBackground#181D20
titleBar.activeForeground#D0D0D0
titleBar.border#283035
titleBar.inactiveBackground#181D20
titleBar.inactiveForeground#D0D0D0C0
tree.tableColumnsBorder#7A9C9B80
tree.tableHeaderBackground#181D20
welcomePage.background#181D20
welcomePage.buttonBackground#7A9C9B
welcomePage.buttonHoverBackground#6A8C8A
welcomePage.progress.background#A7AAA0
welcomePage.progress.foreground#7A9C9B
welcomePage.tileBackground#181D20
welcomePage.tileBorder#7A9C9B
welcomePage.tileForeground#D0D0D0
welcomePage.tileHoverBackground#7A9C9B50
widget.shadow#00000060
window.activeBorder#283035
window.inactiveBorder#181D20
workspace.disconnectedBackground#DB5252
workspace.pastBackground#DB5252

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, markup.quote	#60706F	—
string, punctuation.definition.string, variable.template.interpolation, template.expression	#99CC99	—
keyword, keyword.control, keyword.control.class, keyword.control.def, keyword.control.function, storage.type, storage.modifier, storage.type.modifier, keyword.other.debugger, invalid, invalid.deprecated, markup.deleted	#DB5252	—
entity.name.function, support.function, entity.name.method, variable.function, meta.function.call, entity.name.function.member, meta.property.object, variable.other.property, entity.name.property, punctuation, meta.brace, meta.delimiter, operator, keyword.operator, markup.inserted, markup.changed	#7A9C9B	—
variable, entity.name.variable, support.variable, meta.definition.variable, meta.module-reference, entity.other.type.php, entity.name.scope-resolution, support.constant.property, variable.other.property, meta.property.object, entity.name.property, support.variable.property, markup.heading, markup.heading entity.name, markup.heading punctuation.definition.heading, markup.bold, markup.italic, markup.strikethrough, markup.list, entity.name.tag, punctuation.definition.tag.html, entity.other.attribute-name, support.constant, constant.numeric, constant.language, constant.other.color, variable.language.this, variable.language.super, entity.name.tag.yaml, entity.name.section.yaml	#D0D0D0	—
markup.inserted, markup.changed	#7A9C9B	—
markup.deleted	#DB5252	—
markup.underline.link, string.other.link	#D0D0D0	underline

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