CRT Themes

Name: CRT Themes
Author: krueger71

Publisher: krueger71Themes in package: 7

Color themes for a more civilized age

GitHub

Color themes

VS Code preview

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

CRT Themes — CRT 64

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

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#6c5eb588
activityBar.activeBorder#6c5eb588
activityBar.activeFocusBorder#6c5eb588
activityBar.background#352879
activityBar.border#6c5eb588
activityBar.dropBorder#6c5eb588
activityBar.foreground#6c5eb5
activityBar.inactiveForeground#6c5eb588
activityBarBadge.background#6c5eb5
activityBarBadge.foreground#352879
badge.background#352879
badge.foreground#6c5eb5
breadcrumb.activeSelectionForeground#6c5eb5
breadcrumb.background#352879
breadcrumb.focusForeground#6c5eb5
breadcrumb.foreground#6c5eb588
breadcrumbPicker.background#352879
button.background#352879
button.foreground#6c5eb5
button.hoverBackground#6c5eb588
checkbox.background#352879
checkbox.border#6c5eb588
checkbox.foreground#6c5eb5
debugConsole.errorForeground#6c5eb5
debugConsole.infoForeground#6c5eb5
debugConsole.sourceForeground#6c5eb5
debugConsole.warningForeground#6c5eb5
debugConsoleInputIcon.foreground#6c5eb5
debugExceptionWidget.background#352879
debugExceptionWidget.border#6c5eb588
debugIcon.breakpointCurrentStackframeForeground#6c5eb5
debugIcon.breakpointDisabledForeground#6c5eb533
debugIcon.breakpointForeground#6c5eb5
debugIcon.breakpointStackframeForeground#6c5eb5
debugIcon.breakpointUnverifiedForeground#6c5eb5
debugIcon.continueForeground#6c5eb5
debugIcon.disconnectForeground#6c5eb5
debugIcon.pauseForeground#6c5eb5
debugIcon.restartForeground#6c5eb5
debugIcon.startForeground#6c5eb5
debugIcon.stepBackForeground#6c5eb5
debugIcon.stepIntoForeground#6c5eb5
debugIcon.stepOutForeground#6c5eb5
debugIcon.stepOverForeground#6c5eb5
debugIcon.stopForeground#6c5eb5
debugTokenExpression.boolean#6c5eb5
debugTokenExpression.error#6c5eb5
debugTokenExpression.name#6c5eb5
debugTokenExpression.number#6c5eb5
debugTokenExpression.string#6c5eb5
debugTokenExpression.value#6c5eb5
debugToolBar.background#352879
debugToolBar.border#6c5eb588
debugView.exceptionLabelBackground#352879
debugView.exceptionLabelForeground#6c5eb5
debugView.stateLabelBackground#352879
debugView.stateLabelForeground#6c5eb5
debugView.valueChangedHighlight#6c5eb588
descriptionForeground#6c5eb5
diffEditor.border#6c5eb588
diffEditor.diagonalFill#6c5eb511
diffEditor.insertedTextBackground#6c5eb533
diffEditor.removedTextBackground#6c5eb533
dropdown.background#352879
dropdown.border#6c5eb588
dropdown.foreground#6c5eb5
dropdown.listBackground#352879
editor.background#352879
editor.findMatchBackground#6c5eb588
editor.findMatchBorder#6c5eb588
editor.findMatchHighlightBackground#352879
editor.findMatchHighlightBorder#6c5eb588
editor.findRangeHighlightBackground#352879
editor.findRangeHighlightBorder#6c5eb588
editor.focusedStackFrameHighlightBackground#352879
editor.foldBackground#352879
editor.foreground#6c5eb5
editor.hoverHighlightBackground#403385ff
editor.inactiveSelectionBackground#352879
editor.lineHighlightBackground#6c5eb511
editor.rangeHighlightBackground#352879
editor.rangeHighlightBorder#6c5eb588
editor.selectionBackground#6c5eb533
editor.selectionForeground#6c5eb5
editor.selectionHighlightBackground#352879
editor.selectionHighlightBorder#6c5eb588
editor.snippetFinalTabstopHighlightBackground#352879
editor.snippetFinalTabstopHighlightBorder#6c5eb588
editor.snippetTabstopHighlightBackground#352879
editor.snippetTabstopHighlightBorder#6c5eb588
editor.stackFrameHighlightBackground#352879
editor.symbolHighlightBackground#6c5eb533
editor.symbolHighlightBorder#6c5eb588
editor.wordHighlightBackground#6c5eb533
editor.wordHighlightBorder#6c5eb588
editor.wordHighlightStrongBackground#6c5eb588
editor.wordHighlightStrongBorder#6c5eb588
editorBracketMatch.background#352879
editorBracketMatch.border#6c5eb588
editorCodeLens.foreground#6c5eb5
editorCursor.background#352879
editorCursor.foreground#6c5eb5
editorError.border#6c5eb588
editorError.foreground#6c5eb5
editorGroup.border#6c5eb588
editorGroup.dropBackground#6c5eb533
editorGroup.emptyBackground#352879
editorGroup.focusedEmptyBorder#6c5eb588
editorGroupHeader.border#6c5eb588
editorGroupHeader.noTabsBackground#352879
editorGroupHeader.tabsBackground#352879
editorGroupHeader.tabsBorder#6c5eb588
editorGutter.addedBackground#6c5eb533
editorGutter.background#352879
editorGutter.commentRangeForeground#6c5eb533
editorGutter.deletedBackground#6c5eb533
editorGutter.foldingControlForeground#6c5eb588
editorGutter.modifiedBackground#6c5eb533
editorHint.border#6c5eb588
editorHint.foreground#6c5eb5
editorHoverWidget.background#403385ff
editorHoverWidget.border#6c5eb588
editorHoverWidget.foreground#6c5eb5
editorHoverWidget.statusBarBackground#6c5eb533
editorIndentGuide.activeBackground#6c5eb533
editorIndentGuide.background#6c5eb511
editorInfo.border#6c5eb588
editorInfo.foreground#6c5eb5
editorLightBulb.foreground#6c5eb588
editorLightBulbAutoFix.foreground#6c5eb588
editorLineNumber.activeForeground#6c5eb5
editorLineNumber.foreground#6c5eb533
editorLink.activeForeground#6c5eb5
editorMarkerNavigation.background#6c5eb533
editorMarkerNavigationError.background#6c5eb533
editorMarkerNavigationInfo.background#6c5eb533
editorMarkerNavigationWarning.background#6c5eb533
editorOverviewRuler.addedForeground#6c5eb533
editorOverviewRuler.background#352879
editorOverviewRuler.border#6c5eb588
editorOverviewRuler.bracketMatchForeground#6c5eb533
editorOverviewRuler.commonContentForeground#6c5eb533
editorOverviewRuler.currentContentForeground#6c5eb533
editorOverviewRuler.deletedForeground#6c5eb533
editorOverviewRuler.errorForeground#6c5eb588
editorOverviewRuler.findMatchForeground#6c5eb533
editorOverviewRuler.incomingContentForeground#6c5eb533
editorOverviewRuler.infoForeground#6c5eb533
editorOverviewRuler.modifiedForeground#6c5eb533
editorOverviewRuler.rangeHighlightForeground#6c5eb533
editorOverviewRuler.selectionHighlightForeground#6c5eb533
editorOverviewRuler.warningForeground#6c5eb533
editorOverviewRuler.wordHighlightForeground#6c5eb533
editorOverviewRuler.wordHighlightStrongForeground#6c5eb533
editorPane.background#6c5eb533
editorRuler.foreground#6c5eb5
editorSuggestWidget.background#352879
editorSuggestWidget.border#6c5eb588
editorSuggestWidget.foreground#6c5eb5
editorSuggestWidget.highlightForeground#6c5eb5
editorSuggestWidget.selectedBackground#6c5eb588
editorUnnecessaryCode.border#6c5eb588
editorUnnecessaryCode.opacity#6c5eb533
editorWarning.border#6c5eb588
editorWarning.foreground#6c5eb5
editorWhitespace.foreground#6c5eb533
editorWidget.background#352879
editorWidget.border#6c5eb588
editorWidget.foreground#6c5eb5
editorWidget.resizeBorder#6c5eb588
errorForeground#6c5eb5
extensionBadge.remoteBackground#352879
extensionBadge.remoteForeground#6c5eb5
extensionButton.prominentBackground#352879
extensionButton.prominentForeground#6c5eb5
extensionButton.prominentHoverBackground#352879
focusBorder#6c5eb588
foreground#6c5eb5
gitDecoration.addedResourceForeground#6c5eb5
gitDecoration.conflictingResourceForeground#6c5eb5
gitDecoration.deletedResourceForeground#6c5eb5
gitDecoration.ignoredResourceForeground#6c5eb588
gitDecoration.modifiedResourceForeground#6c5eb5
gitDecoration.submoduleResourceForeground#6c5eb5
gitDecoration.untrackedResourceForeground#6c5eb5
icon.foreground#6c5eb5
imagePreview.border#6c5eb588
input.background#352879
input.border#6c5eb588
input.foreground#6c5eb5
input.placeholderForeground#6c5eb588
inputOption.activeBackground#6c5eb533
inputOption.activeBorder#6c5eb588
inputOption.activeForeground#6c5eb588
inputValidation.errorBackground#352879
inputValidation.errorBorder#6c5eb588
inputValidation.errorForeground#6c5eb5
inputValidation.infoBackground#352879
inputValidation.infoBorder#6c5eb588
inputValidation.infoForeground#6c5eb5
inputValidation.warningBackground#352879
inputValidation.warningBorder#6c5eb588
inputValidation.warningForeground#6c5eb5
list.activeSelectionBackground#6c5eb5
list.activeSelectionForeground#352879
list.deemphasizedForeground#6c5eb588
list.dropBackground#6c5eb533
list.errorForeground#6c5eb5
list.filterMatchBackground#352879
list.filterMatchBorder#6c5eb588
list.focusBackground#6c5eb588
list.focusForeground#6c5eb5
list.highlightForeground#6c5eb5
list.hoverBackground#6c5eb588
list.hoverForeground#6c5eb5
list.inactiveFocusBackground#6c5eb533
list.inactiveSelectionBackground#6c5eb533
list.inactiveSelectionForeground#6c5eb5
list.invalidItemForeground#6c5eb5
list.warningForeground#6c5eb5
listFilterWidget.background#352879
listFilterWidget.noMatchesOutline#6c5eb588
listFilterWidget.outline#6c5eb5
menu.background#352879
menu.border#6c5eb588
menu.foreground#6c5eb5
menu.selectionBackground#6c5eb588
menu.selectionBorder#6c5eb588
menu.selectionForeground#352879
menu.separatorBackground#6c5eb588
menubar.selectionBackground#6c5eb533
menubar.selectionBorder#6c5eb588
menubar.selectionForeground#6c5eb5
merge.border#6c5eb588
merge.commonContentBackground#352879
merge.commonHeaderBackground#352879
merge.currentContentBackground#352879
merge.currentHeaderBackground#352879
merge.incomingContentBackground#352879
merge.incomingHeaderBackground#352879
minimap.background#352879
minimap.errorHighlight#6c5eb588
minimap.findMatchHighlight#6c5eb588
minimap.selectionHighlight#6c5eb588
minimap.warningHighlight#6c5eb588
minimapGutter.addedBackground#6c5eb533
minimapGutter.deletedBackground#6c5eb533
minimapGutter.modifiedBackground#6c5eb533
minimapSlider.activeBackground#6c5eb533
minimapSlider.background#6c5eb511
minimapSlider.hoverBackground#6c5eb511
notebook.cellBorderColor#6c5eb588
notebook.cellStatusBarItemHoverBackground#6c5eb511
notebook.cellToolbarSeperator#6c5eb588
notebook.focusedCellIndicator#6c5eb533
notebook.outputContainerBackgroundColor#352879
notebookStatusErrorIcon.foreground#ff0000
notebookStatusRunningIcon.foreground#ff0000
notebookStatusSuccessIcon.foreground#ff0000
notificationCenter.border#6c5eb588
notificationCenterHeader.background#352879
notificationCenterHeader.foreground#6c5eb5
notificationLink.foreground#6c5eb5
notifications.background#352879
notifications.border#6c5eb588
notifications.foreground#6c5eb5
notificationsErrorIcon.foreground#6c5eb5
notificationsInfoIcon.foreground#6c5eb5
notificationsWarningIcon.foreground#6c5eb5
notificationToast.border#6c5eb588
panel.background#352879
panel.border#6c5eb588
panel.dropBorder#6c5eb5
panelInput.border#6c5eb588
panelSection.border#6c5eb588
panelSection.dropBackground#6c5eb511
panelSectionHeader.background#352879
panelSectionHeader.border#6c5eb588
panelSectionHeader.foreground#6c5eb5
panelTitle.activeBorder#6c5eb588
panelTitle.activeForeground#6c5eb5
panelTitle.inactiveForeground#6c5eb588
peekView.border#6c5eb588
peekViewEditor.background#352879
peekViewEditor.matchHighlightBackground#352879
peekViewEditor.matchHighlightBorder#6c5eb588
peekViewEditorGutter.background#352879
peekViewResult.background#352879
peekViewResult.fileForeground#6c5eb5
peekViewResult.lineForeground#6c5eb5
peekViewResult.matchHighlightBackground#352879
peekViewResult.selectionBackground#352879
peekViewResult.selectionForeground#6c5eb5
peekViewTitle.background#352879
peekViewTitleDescription.foreground#6c5eb5
peekViewTitleLabel.foreground#6c5eb5
pickerGroup.border#6c5eb588
pickerGroup.foreground#6c5eb5
problemsErrorIcon.foreground#6c5eb5
problemsInfoIcon.foreground#6c5eb5
problemsWarningIcon.foreground#6c5eb5
progressBar.background#6c5eb588
quickInput.background#352879
quickInput.foreground#6c5eb5
quickInputTitle.background#352879
scrollbar.shadow#6c5eb533
scrollbarSlider.activeBackground#6c5eb533
scrollbarSlider.background#6c5eb533
scrollbarSlider.hoverBackground#6c5eb533
searchEditor.findMatchBackground#352879
searchEditor.findMatchBorder#6c5eb588
searchEditor.textInputBorder#6c5eb588
selection.background#6c5eb588
settings.checkboxBackground#352879
settings.checkboxBorder#6c5eb588
settings.checkboxForeground#6c5eb5
settings.dropdownBackground#352879
settings.dropdownBorder#6c5eb588
settings.dropdownForeground#6c5eb5
settings.dropdownListBorder#6c5eb588
settings.headerForeground#6c5eb5
settings.modifiedItemIndicator#6c5eb588
settings.numberInputBackground#352879
settings.numberInputBorder#6c5eb588
settings.numberInputForeground#6c5eb5
settings.textInputBackground#352879
settings.textInputBorder#6c5eb588
settings.textInputForeground#6c5eb5
sideBar.background#352879
sideBar.border#6c5eb588
sideBar.dropBackground#6c5eb533
sideBar.foreground#6c5eb5
sideBarSectionHeader.background#6c5eb533
sideBarSectionHeader.border#6c5eb588
sideBarSectionHeader.foreground#6c5eb5
sideBarTitle.foreground#6c5eb5
statusBar.background#6c5eb533
statusBar.border#6c5eb588
statusBar.debuggingBackground#6c5eb5
statusBar.debuggingBorder#6c5eb588
statusBar.debuggingForeground#352879
statusBar.foreground#6c5eb5
statusBar.noFolderBackground#352879
statusBar.noFolderBorder#6c5eb588
statusBar.noFolderForeground#6c5eb5
statusBarItem.activeBackground#352879
statusBarItem.hoverBackground#352879
statusBarItem.prominentBackground#352879
statusBarItem.prominentForeground#6c5eb5
statusBarItem.prominentHoverBackground#352879
statusBarItem.remoteBackground#352879
statusBarItem.remoteForeground#6c5eb5
symbolIcon.arrayForeground#6c5eb5
symbolIcon.booleanForeground#6c5eb5
symbolIcon.classForeground#6c5eb5
symbolIcon.colorForeground#6c5eb5
symbolIcon.constantForeground#6c5eb5
symbolIcon.constructorForeground#6c5eb5
symbolIcon.enumeratorForeground#6c5eb5
symbolIcon.enumeratorMemberForeground#6c5eb5
symbolIcon.eventForeground#6c5eb5
symbolIcon.fieldForeground#6c5eb5
symbolIcon.fileForeground#6c5eb5
symbolIcon.folderForeground#6c5eb5
symbolIcon.functionForeground#6c5eb5
symbolIcon.interfaceForeground#6c5eb5
symbolIcon.keyForeground#6c5eb5
symbolIcon.keywordForeground#6c5eb5
symbolIcon.methodForeground#6c5eb5
symbolIcon.moduleForeground#6c5eb5
symbolIcon.namespaceForeground#6c5eb5
symbolIcon.nullForeground#6c5eb5
symbolIcon.numberForeground#6c5eb5
symbolIcon.objectForeground#6c5eb5
symbolIcon.operatorForeground#6c5eb5
symbolIcon.packageForeground#6c5eb5
symbolIcon.propertyForeground#6c5eb5
symbolIcon.referenceForeground#6c5eb5
symbolIcon.snippetForeground#6c5eb5
symbolIcon.stringForeground#6c5eb5
symbolIcon.structForeground#6c5eb5
symbolIcon.textForeground#6c5eb5
symbolIcon.typeParameterForeground#6c5eb5
symbolIcon.unitForeground#6c5eb5
symbolIcon.variableForeground#6c5eb5
tab.activeBackground#6c5eb533
tab.activeBorder#352879
tab.activeBorderTop#352879
tab.activeForeground#6c5eb5
tab.activeModifiedBorder#6c5eb588
tab.border#352879
tab.hoverBackground#6c5eb533
tab.hoverBorder#6c5eb588
tab.hoverForeground#6c5eb588
tab.inactiveBackground#352879
tab.inactiveForeground#6c5eb588
tab.inactiveModifiedBorder#352879
tab.unfocusedActiveBackground#6c5eb533
tab.unfocusedActiveBorder#352879
tab.unfocusedActiveBorderTop#352879
tab.unfocusedActiveForeground#6c5eb5
tab.unfocusedActiveModifiedBorder#352879
tab.unfocusedHoverBackground#6c5eb533
tab.unfocusedHoverBorder#352879
tab.unfocusedHoverForeground#6c5eb533
tab.unfocusedInactiveBackground#352879
tab.unfocusedInactiveForeground#6c5eb588
tab.unfocusedInactiveModifiedBorder#352879
terminal.ansiBlack#6c5eb5ff
terminal.ansiBlue#685ab1ff
terminal.ansiBrightBlack#6c5eb5ff
terminal.ansiBrightBlue#685ab1ff
terminal.ansiBrightCyan#5a4ca1ff
terminal.ansiBrightGreen#6153a9ff
terminal.ansiBrightMagenta#6557adff
terminal.ansiBrightRed#5d50a5ff
terminal.ansiBrightWhite#524599ff
terminal.ansiBrightYellow#56489dff
terminal.ansiCyan#5a4ca1ff
terminal.ansiGreen#6153a9ff
terminal.ansiMagenta#6557adff
terminal.ansiRed#5d50a5ff
terminal.ansiWhite#524599ff
terminal.ansiYellow#56489dff
terminal.background#352879
terminal.border#6c5eb588
terminal.foreground#6c5eb5
terminal.selectionBackground#6c5eb533
terminalCursor.background#352879
terminalCursor.foreground#6c5eb5
textBlockQuote.background#352879
textBlockQuote.border#6c5eb588
textCodeBlock.background#352879
textLink.activeForeground#6c5eb5
textLink.foreground#6c5eb588
textPreformat.foreground#6c5eb5
textSeparator.foreground#6c5eb5
titleBar.activeBackground#352879
titleBar.activeForeground#6c5eb5
titleBar.border#6c5eb588
titleBar.inactiveBackground#352879
titleBar.inactiveForeground#6c5eb5
tree.indentGuidesStroke#6c5eb588
walkThrough.embeddedEditorBackground#352879
welcomePage.background#352879
welcomePage.buttonBackground#352879
welcomePage.buttonHoverBackground#352879
widget.shadow#6c5eb533
window.activeBorder#6c5eb588
window.inactiveBorder#6c5eb533

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6c5eb588	—
keyword, storage	#6c5eb588	—
entity, strong	—	bold
invalid	#6c5eb588	italic 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}!`;
}