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 Amber

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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