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 Green

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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