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 Paper

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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