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 Red

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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