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 Blue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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