CITS Themes

Name: CITS Themes
Author: Axel Ollivier

Publisher: Axel OllivierThemes in package: 18

A curated collection of VS Code color themes inspired by cinema, anime, and cult films — Ghost in the Shell, Princess Mononoke, Blade Runner, Spirited Away, Studio Ghibli, Star Wars.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

CITS Themes — CITS: 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#f7f3ec
activityBar.activeBorder#2c2c2c
activityBar.background#f7f3ec
activityBar.border#00000000
activityBar.foreground#2c2c2c
activityBar.inactiveForeground#aaaaaa
activityBarBadge.background#2c2c2c
activityBarBadge.foreground#f7f3ec
badge.background#2c2c2c
badge.foreground#f7f3ec
breadcrumb.activeSelectionForeground#2c2c2c
breadcrumb.background#f7f3ec
breadcrumb.focusForeground#2c2c2c
breadcrumb.foreground#aaaaaa
breadcrumbPicker.background#f7f3ec
button.background#2c2c2c
button.foreground#f7f3ec
button.hoverBackground#2c2c2c
button.secondaryBackground#f7f3ec
button.secondaryForeground#2c2c2c
button.secondaryHoverBackground#f7f3ec
charts.blue#2a4a80
charts.foreground#2c2c2c
charts.green#2a6a30
charts.lines#f7f3ec
charts.orange#8a6010
charts.purple#7a3a7a
charts.red#aa2222
charts.yellow#8a6010
commandCenter.activeBackground#f7f3ec
commandCenter.activeBorder#2c2c2c
commandCenter.activeForeground#2c2c2c
commandCenter.background#f7f3ec
commandCenter.border#2c2c2c
commandCenter.foreground#2c2c2c
debugIcon.breakpointDisabledForeground#aaaaaa
debugIcon.breakpointForeground#aa2222
debugIcon.breakpointUnverifiedForeground#8a6010
debugIcon.continueForeground#2c2c2c
debugIcon.pauseForeground#8a6010
debugIcon.restartForeground#3a6a3a
debugIcon.stepBackForeground#2c2c2c
debugIcon.stepIntoForeground#2c2c2c
debugIcon.stepOutForeground#2c2c2c
debugIcon.stepOverForeground#2c2c2c
debugIcon.stopForeground#aa2222
debugToolBar.background#f7f3ec
debugToolBar.border#00000000
descriptionForeground#aaaaaa
diffEditor.insertedLineBackground#2a7a300c
diffEditor.insertedTextBackground#2a7a3018
diffEditor.insertedTextBorder#00000000
diffEditor.removedLineBackground#aa22220c
diffEditor.removedTextBackground#aa222218
diffEditor.removedTextBorder#00000000
diffEditorGutter.insertedLineBackground#2a7a3020
diffEditorGutter.removedLineBackground#aa222220
diffEditorOverview.insertedForeground#2a7a30
diffEditorOverview.removedForeground#aa2222
disabledForeground#aaaaaa
dropdown.background#f7f3ec
dropdown.border#00000000
dropdown.foreground#2c2c2c
dropdown.listBackground#f7f3ec
editor.background#f7f3ec
editor.findMatchBackground#2c2c2c28
editor.findMatchBorder#2c2c2c
editor.findMatchHighlightBackground#2c2c2c14
editor.findMatchHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#2c2c2c14
editor.foreground#2c2c2c
editor.hoverHighlightBackground#2c2c2c10
editor.inactiveSelectionBackground#2c2c2c10
editor.lineHighlightBackground#00000000
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#2c2c2c0a
editor.selectionBackground#2c2c2c
editor.selectionForeground#f7f3ec
editor.selectionHighlightBackground#00000000
editor.selectionHighlightBorder#00000000
editor.stackFrameHighlightBackground#2c2c2c0a
editor.wordHighlightBackground#00000000
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#00000000
editor.wordHighlightStrongBorder#00000000
editorBracketHighlight.foreground1#2c2c2c
editorBracketHighlight.foreground2#2c2c2c
editorBracketHighlight.foreground3#aaaaaa
editorBracketHighlight.foreground4#2c2c2c
editorBracketHighlight.foreground5#2c2c2c
editorBracketHighlight.foreground6#aaaaaa
editorBracketHighlight.unexpectedBracket.foreground#aa2222
editorBracketMatch.background#2c2c2c14
editorBracketMatch.border#00000000
editorCursor.background#f7f3ec
editorCursor.foreground#2c2c2c
editorError.border#00000000
editorError.foreground#aa2222
editorGroupHeader.border#00000000
editorGroupHeader.tabsBackground#f7f3ec
editorGutter.addedBackground#2a7a30
editorGutter.background#f7f3ec
editorGutter.commentRangeForeground#aaaaaa
editorGutter.deletedBackground#aa2222
editorGutter.modifiedBackground#8a6010
editorHint.foreground#aaaaaa
editorHoverWidget.background#f7f3ec
editorHoverWidget.border#2c2c2c
editorHoverWidget.foreground#2c2c2c
editorIndentGuide.activeBackground#00000000
editorIndentGuide.background#00000000
editorInfo.border#00000000
editorInfo.foreground#2c2c2c
editorInlayHint.background#f7f3ec
editorInlayHint.foreground#aaaaaa
editorInlayHint.parameterForeground#aaaaaa
editorInlayHint.typeForeground#aaaaaa
editorLineNumber.activeForeground#aaaaaa
editorLineNumber.foreground#aaaaaa
editorOverviewRuler.addedForeground#2c2c2c40
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#aa222250
editorOverviewRuler.errorForeground#aa2222
editorOverviewRuler.findMatchForeground#2c2c2c50
editorOverviewRuler.infoForeground#2c2c2c
editorOverviewRuler.modifiedForeground#2c2c2c40
editorOverviewRuler.selectionHighlightForeground#2c2c2c28
editorOverviewRuler.warningForeground#8a6010
editorOverviewRuler.wordHighlightForeground#2c2c2c40
editorOverviewRuler.wordHighlightStrongForeground#2c2c2c50
editorRuler.foreground#00000000
editorSuggestWidget.background#f7f3ec
editorSuggestWidget.border#2c2c2c
editorSuggestWidget.foreground#2c2c2c
editorSuggestWidget.highlightForeground#2c2c2c
editorSuggestWidget.selectedBackground#2c2c2c
editorSuggestWidget.selectedForeground#f7f3ec
editorWarning.border#00000000
editorWarning.foreground#8a6010
editorWhitespace.foreground#00000000
editorWidget.background#f7f3ec
editorWidget.border#2c2c2c
editorWidget.foreground#2c2c2c
editorWidget.resizeBorder#2c2c2c
errorForeground#aa2222
focusBorder#2c2c2c
foreground#2c2c2c
gitDecoration.addedResourceForeground#3a6a3a
gitDecoration.conflictingResourceForeground#aa2222
gitDecoration.deletedResourceForeground#aa2222
gitDecoration.ignoredResourceForeground#aaaaaa
gitDecoration.modifiedResourceForeground#8a6010
gitDecoration.stageDeletedResourceForeground#aa2222
gitDecoration.stageModifiedResourceForeground#8a6010
gitDecoration.submoduleResourceForeground#2c2c2c
gitDecoration.untrackedResourceForeground#3a6a3a
icon.foreground#2c2c2c
input.background#f7f3ec
input.border#00000000
input.foreground#2c2c2c
input.placeholderForeground#aaaaaa
inputOption.activeBackground#2c2c2c14
inputOption.activeBorder#2c2c2c
inputOption.activeForeground#2c2c2c
inputValidation.errorBackground#f7f3ec
inputValidation.errorBorder#aa2222
inputValidation.infoBackground#f7f3ec
inputValidation.infoBorder#2c2c2c
inputValidation.warningBackground#f7f3ec
inputValidation.warningBorder#8a6010
keybindingLabel.background#f7f3ec
keybindingLabel.border#00000000
keybindingLabel.bottomBorder#00000000
keybindingLabel.foreground#2c2c2c
list.activeSelectionBackground#2c2c2c
list.activeSelectionForeground#f7f3ec
list.errorForeground#aa2222
list.focusBackground#2c2c2c
list.focusForeground#f7f3ec
list.highlightForeground#2c2c2c
list.hoverBackground#2c2c2c0a
list.hoverForeground#2c2c2c
list.inactiveSelectionBackground#2c2c2c
list.inactiveSelectionForeground#f7f3ec
list.warningForeground#8a6010
listFilterWidget.background#f7f3ec
listFilterWidget.noMatchesOutline#00000000
listFilterWidget.outline#00000000
menu.background#f7f3ec
menu.border#2c2c2c
menu.foreground#2c2c2c
menu.selectionBackground#2c2c2c
menu.selectionBorder#00000000
menu.selectionForeground#f7f3ec
menu.separatorBackground#f7f3ec
menubar.selectionBackground#2c2c2c
menubar.selectionForeground#f7f3ec
minimap.background#f7f3ec
minimap.errorHighlight#aa2222
minimap.findMatchHighlight#2c2c2c50
minimap.selectionHighlight#2c2c2c28
minimap.warningHighlight#8a6010
minimapGutter.addedBackground#2c2c2c
minimapGutter.deletedBackground#aa2222
minimapGutter.modifiedBackground#2c2c2c
minimapSlider.activeBackground#2c2c2c28
minimapSlider.background#2c2c2c0a
minimapSlider.hoverBackground#2c2c2c18
notificationCenter.border#2c2c2c
notificationCenterHeader.background#f7f3ec
notificationCenterHeader.foreground#2c2c2c
notifications.background#f7f3ec
notifications.border#2c2c2c
notifications.foreground#2c2c2c
notificationsErrorIcon.foreground#aa2222
notificationsInfoIcon.foreground#2c2c2c
notificationsWarningIcon.foreground#8a6010
notificationToast.border#2c2c2c
panel.background#f7f3ec
panel.border#00000000
panel.dropBorder#2c2c2c
panelInput.border#00000000
panelSection.border#00000000
panelTitle.activeBorder#2c2c2c
panelTitle.activeForeground#2c2c2c
panelTitle.inactiveForeground#aaaaaa
peekView.border#2c2c2c
peekViewEditor.background#f7f3ec
peekViewEditor.matchHighlightBackground#2c2c2c20
peekViewEditor.matchHighlightBorder#2c2c2c
peekViewEditorGutter.background#f7f3ec
peekViewResult.background#f7f3ec
peekViewResult.fileForeground#2c2c2c
peekViewResult.lineForeground#aaaaaa
peekViewResult.matchHighlightBackground#2c2c2c14
peekViewResult.selectionBackground#2c2c2c
peekViewResult.selectionForeground#f7f3ec
peekViewTitle.background#f7f3ec
peekViewTitleDescription.foreground#aaaaaa
peekViewTitleLabel.foreground#2c2c2c
pickerGroup.border#2c2c2c20
pickerGroup.foreground#aaaaaa
problemsErrorIcon.foreground#aa2222
problemsInfoIcon.foreground#2c2c2c
problemsWarningIcon.foreground#8a6010
progressBar.background#2c2c2c
quickInput.background#f7f3ec
quickInput.foreground#2c2c2c
quickInputList.focusBackground#2c2c2c
quickInputList.focusForeground#f7f3ec
quickInputTitle.background#f7f3ec
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#2c2c2c30
scrollbarSlider.background#2c2c2c10
scrollbarSlider.hoverBackground#2c2c2c20
selection.background#2c2c2c18
settings.checkboxBackground#f7f3ec
settings.checkboxBorder#2c2c2c28
settings.checkboxForeground#2c2c2c
settings.dropdownBackground#f7f3ec
settings.dropdownBorder#2c2c2c28
settings.dropdownForeground#2c2c2c
settings.headerForeground#2c2c2c
settings.modifiedItemIndicator#8a6010
settings.numberInputBackground#f7f3ec
settings.numberInputBorder#2c2c2c28
settings.numberInputForeground#2c2c2c
settings.textInputBackground#f7f3ec
settings.textInputBorder#2c2c2c28
settings.textInputForeground#2c2c2c
sideBar.background#f7f3ec
sideBar.border#00000000
sideBar.foreground#2c2c2c
sideBarSectionHeader.background#f7f3ec
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#2c2c2c
sideBarTitle.foreground#2c2c2c
statusBar.background#f7f3ec
statusBar.border#00000000
statusBar.debuggingBackground#2c2c2c
statusBar.debuggingForeground#f7f3ec
statusBar.foreground#2c2c2c
statusBar.noFolderBackground#f7f3ec
statusBar.noFolderForeground#2c2c2c
statusBarItem.activeBackground#2c2c2c14
statusBarItem.errorBackground#aa222250
statusBarItem.errorForeground#f7f3ec
statusBarItem.hoverBackground#2c2c2c0e
statusBarItem.prominentBackground#2c2c2c14
statusBarItem.remoteBackground#2c2c2c
statusBarItem.remoteForeground#f7f3ec
statusBarItem.warningBackground#8a601050
statusBarItem.warningForeground#f7f3ec
tab.activeBackground#f7f3ec
tab.activeBorder#f7f3ec
tab.activeBorderTop#2c2c2c
tab.activeForeground#2c2c2c
tab.border#00000000
tab.hoverBackground#f7f3ec
tab.hoverForeground#2c2c2c
tab.inactiveBackground#f7f3ec
tab.inactiveForeground#aaaaaa
tab.lastPinnedBorder#00000000
tab.unfocusedActiveBackground#f7f3ec
tab.unfocusedActiveForeground#2c2c2c
tab.unfocusedInactiveForeground#aaaaaa
terminal.ansiBlack#2c2c2c
terminal.ansiBlue#2a4a80
terminal.ansiBrightBlack#2c2c2c
terminal.ansiBrightBlue#3a5a99
terminal.ansiBrightCyan#3a8888
terminal.ansiBrightGreen#3a8040
terminal.ansiBrightMagenta#994a99
terminal.ansiBrightRed#cc3333
terminal.ansiBrightWhite#f7f3ec
terminal.ansiBrightYellow#aa7818
terminal.ansiCyan#2a6a6a
terminal.ansiGreen#2a6a30
terminal.ansiMagenta#7a3a7a
terminal.ansiRed#aa2222
terminal.ansiWhite#aaaaaa
terminal.ansiYellow#8a6010
terminal.background#f7f3ec
terminal.border#00000000
terminal.foreground#2c2c2c
terminal.selectionBackground#2c2c2c18
terminalCursor.background#f7f3ec
terminalCursor.foreground#2c2c2c
testing.iconErrored#aa2222
testing.iconFailed#aa2222
testing.iconPassed#3a6a3a
testing.iconSkipped#aaaaaa
testing.runAction#2c2c2c
titleBar.activeBackground#f7f3ec
titleBar.activeForeground#2c2c2c
titleBar.border#00000000
titleBar.inactiveBackground#f7f3ec
titleBar.inactiveForeground#aaaaaa
tree.indentGuidesStroke#00000000
widget.border#2c2c2c
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle