CITS Themes
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.
Color themes
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.activeBackground#00000000
- activityBar.activeBorder#e0e0e0
- activityBar.background#000000
- activityBar.border#00000000
- activityBar.foreground#e0e0e0
- activityBar.inactiveForeground#303030
- activityBarBadge.background#ffffff
- activityBarBadge.foreground#000000
- badge.background#ffffff
- badge.foreground#000000
- breadcrumb.activeSelectionForeground#a0a0a0
- breadcrumb.background#000000
- breadcrumb.focusForeground#707070
- breadcrumb.foreground#282828
- breadcrumbPicker.background#000000
- button.background#1e1e1e
- button.foreground#ffffff
- button.hoverBackground#2a2a2a
- button.secondaryBackground#000000
- button.secondaryForeground#a0a0a0
- button.secondaryHoverBackground#141414
- charts.blue#707070
- charts.foreground#a0a0a0
- charts.green#606060
- charts.lines#1e1e1e
- charts.orange#909090
- charts.purple#505050
- charts.red#ff4444
- charts.yellow#888888
- commandCenter.activeBackground#000000
- commandCenter.activeBorder#404040
- commandCenter.activeForeground#e0e0e0
- commandCenter.background#000000
- commandCenter.border#1e1e1e
- commandCenter.foreground#404040
- debugConsole.errorForeground#ff4444
- debugConsole.infoForeground#707070
- debugConsole.sourceForeground#a0a0a0
- debugConsole.warningForeground#888888
- debugConsoleInputIcon.foreground#707070
- debugIcon.breakpointDisabledForeground#282828
- debugIcon.breakpointForeground#ff4444
- debugIcon.breakpointUnverifiedForeground#888888
- debugIcon.continueForeground#a0a0a0
- debugIcon.disconnectForeground#ff4444
- debugIcon.pauseForeground#888888
- debugIcon.restartForeground#707070
- debugIcon.stepBackForeground#606060
- debugIcon.stepIntoForeground#a0a0a0
- debugIcon.stepOutForeground#a0a0a0
- debugIcon.stepOverForeground#a0a0a0
- debugIcon.stopForeground#ff4444
- debugToolBar.background#000000
- debugToolBar.border#00000000
- descriptionForeground#404040
- diffEditor.insertedLineBackground#ffffff05
- diffEditor.insertedTextBackground#ffffff08
- diffEditor.insertedTextBorder#00000000
- diffEditor.removedLineBackground#ff444405
- diffEditor.removedTextBackground#ff444408
- diffEditor.removedTextBorder#00000000
- diffEditorGutter.insertedLineBackground#ffffff0a
- diffEditorGutter.removedLineBackground#ff44440a
- diffEditorOverview.insertedForeground#606060
- diffEditorOverview.removedForeground#ff4444
- disabledForeground#282828
- dropdown.background#000000
- dropdown.border#1e1e1e
- dropdown.foreground#a0a0a0
- dropdown.listBackground#000000
- editor.background#000000
- editor.findMatchBackground#ffffff28
- editor.findMatchBorder#ffffff
- editor.findMatchHighlightBackground#ffffff14
- editor.findMatchHighlightBorder#ffffff30
- editor.focusedStackFrameHighlightBackground#ffffff0a
- editor.foreground#c8c8c8
- editor.hoverHighlightBackground#ffffff0c
- editor.inactiveSelectionBackground#ffffff0c
- editor.lineHighlightBackground#00000000
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#ffffff08
- editor.selectionBackground#ffffff18
- editor.selectionHighlightBackground#ffffff10
- editor.selectionHighlightBorder#ffffff20
- editor.stackFrameHighlightBackground#88888810
- editor.wordHighlightBackground#ffffff0a
- editor.wordHighlightBorder#ffffff20
- editor.wordHighlightStrongBackground#ffffff0e
- editor.wordHighlightStrongBorder#ffffff28
- editorBracketHighlight.foreground1#e0e0e0
- editorBracketHighlight.foreground2#b0b0b0
- editorBracketHighlight.foreground3#888888
- editorBracketHighlight.foreground4#c0c0c0
- editorBracketHighlight.foreground5#a0a0a0
- editorBracketHighlight.foreground6#707070
- editorBracketHighlight.unexpectedBracket.foreground#ff4444
- editorBracketMatch.background#ffffff10
- editorBracketMatch.border#ffffff40
- editorCursor.background#000000
- editorCursor.foreground#ffffff
- editorError.border#ff444430
- editorError.foreground#ff4444
- editorGroupHeader.border#00000000
- editorGroupHeader.noTabsBackground#000000
- editorGroupHeader.tabsBackground#000000
- editorGutter.addedBackground#ffffff40
- editorGutter.background#000000
- editorGutter.commentRangeForeground#1e1e1e
- editorGutter.deletedBackground#ff444450
- editorGutter.modifiedBackground#808080
- editorHint.foreground#383838
- editorHoverWidget.background#000000
- editorHoverWidget.border#1e1e1e
- editorHoverWidget.foreground#a0a0a0
- editorIndentGuide.activeBackground#1e1e1e
- editorIndentGuide.background#00000000
- editorInfo.border#50505030
- editorInfo.foreground#505050
- editorInlayHint.background#00000000
- editorInlayHint.foreground#282828
- editorInlayHint.parameterForeground#2a2a2a
- editorInlayHint.typeForeground#303030
- editorLineNumber.activeForeground#505050
- editorLineNumber.foreground#282828
- editorOverviewRuler.addedForeground#ffffff50
- editorOverviewRuler.border#00000000
- editorOverviewRuler.deletedForeground#ff444860
- editorOverviewRuler.errorForeground#ff4444
- editorOverviewRuler.findMatchForeground#ffffff60
- editorOverviewRuler.infoForeground#606060
- editorOverviewRuler.modifiedForeground#808080
- editorOverviewRuler.rangeHighlightForeground#ffffff30
- editorOverviewRuler.selectionHighlightForeground#ffffff20
- editorOverviewRuler.warningForeground#888888
- editorOverviewRuler.wordHighlightForeground#ffffff40
- editorOverviewRuler.wordHighlightStrongForeground#ffffff50
- editorRuler.foreground#00000000
- editorSuggestWidget.background#000000
- editorSuggestWidget.border#1e1e1e
- editorSuggestWidget.foreground#a0a0a0
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#141414
- editorSuggestWidget.selectedForeground#ffffff
- editorWarning.border#88888830
- editorWarning.foreground#888888
- editorWhitespace.foreground#00000000
- editorWidget.background#000000
- editorWidget.border#1e1e1e
- editorWidget.foreground#a0a0a0
- editorWidget.resizeBorder#404040
- errorForeground#ff4444
- extensionButton.prominentBackground#1e1e1e
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#2a2a2a
- extensionIcon.preReleaseForeground#505050
- extensionIcon.starForeground#888888
- extensionIcon.verifiedForeground#606060
- focusBorder#ffffff30
- foreground#a0a0a0
- gitDecoration.addedResourceForeground#707070
- gitDecoration.conflictingResourceForeground#ff4444
- gitDecoration.deletedResourceForeground#ff4444
- gitDecoration.ignoredResourceForeground#1e1e1e
- gitDecoration.modifiedResourceForeground#909090
- gitDecoration.stageDeletedResourceForeground#ff6666
- gitDecoration.stageModifiedResourceForeground#b0b0b0
- gitDecoration.submoduleResourceForeground#404040
- gitDecoration.untrackedResourceForeground#505050
- icon.foreground#505050
- input.background#000000
- input.border#1e1e1e
- input.foreground#c0c0c0
- input.placeholderForeground#282828
- inputOption.activeBackground#ffffff10
- inputOption.activeBorder#ffffff
- inputOption.activeForeground#ffffff
- inputValidation.errorBackground#0a0000
- inputValidation.errorBorder#ff4444
- inputValidation.errorForeground#ff4444
- inputValidation.infoBackground#000000
- inputValidation.infoBorder#404040
- inputValidation.warningBackground#000000
- inputValidation.warningBorder#888888
- keybindingLabel.background#000000
- keybindingLabel.border#1e1e1e
- keybindingLabel.bottomBorder#282828
- keybindingLabel.foreground#a0a0a0
- list.activeSelectionBackground#141414
- list.activeSelectionForeground#ffffff
- list.errorForeground#ff4444
- list.focusBackground#141414
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#000000
- list.hoverForeground#c0c0c0
- list.inactiveSelectionBackground#000000
- list.inactiveSelectionForeground#a0a0a0
- list.warningForeground#888888
- listFilterWidget.background#000000
- listFilterWidget.noMatchesOutline#ff444430
- listFilterWidget.outline#ffffff20
- menu.background#000000
- menu.border#1e1e1e
- menu.foreground#a0a0a0
- menu.selectionBackground#141414
- menu.selectionBorder#00000000
- menu.selectionForeground#ffffff
- menu.separatorBackground#1e1e1e
- menubar.selectionBackground#000000
- menubar.selectionBorder#00000000
- menubar.selectionForeground#e0e0e0
- minimap.background#000000
- minimap.errorHighlight#ff4444
- minimap.findMatchHighlight#ffffff40
- minimap.selectionHighlight#ffffff20
- minimap.warningHighlight#888888
- minimapGutter.addedBackground#505050
- minimapGutter.deletedBackground#ff4444
- minimapGutter.modifiedBackground#808080
- minimapSlider.activeBackground#ffffff18
- minimapSlider.background#ffffff06
- minimapSlider.hoverBackground#ffffff0e
- notificationCenter.border#1e1e1e
- notificationCenterHeader.background#000000
- notificationCenterHeader.foreground#404040
- notifications.background#000000
- notifications.border#1e1e1e
- notifications.foreground#a0a0a0
- notificationsErrorIcon.foreground#ff4444
- notificationsInfoIcon.foreground#505050
- notificationsWarningIcon.foreground#888888
- notificationToast.border#1e1e1e
- panel.background#000000
- panel.border#00000000
- panel.dropBorder#ffffff
- panelInput.border#1e1e1e
- panelSection.border#00000000
- panelTitle.activeBorder#e0e0e0
- panelTitle.activeForeground#e0e0e0
- panelTitle.inactiveForeground#282828
- peekView.border#1e1e1e
- peekViewEditor.background#000000
- peekViewEditor.matchHighlightBackground#ffffff18
- peekViewEditor.matchHighlightBorder#ffffff
- peekViewEditorGutter.background#000000
- peekViewResult.background#000000
- peekViewResult.fileForeground#505050
- peekViewResult.lineForeground#303030
- peekViewResult.matchHighlightBackground#ffffff10
- peekViewResult.selectionBackground#141414
- peekViewResult.selectionForeground#e0e0e0
- peekViewTitle.background#000000
- peekViewTitleDescription.foreground#303030
- peekViewTitleLabel.foreground#a0a0a0
- pickerGroup.border#1e1e1e
- pickerGroup.foreground#282828
- problemsErrorIcon.foreground#ff4444
- problemsInfoIcon.foreground#505050
- problemsWarningIcon.foreground#888888
- progressBar.background#505050
- quickInput.background#000000
- quickInput.foreground#a0a0a0
- quickInputList.focusBackground#141414
- quickInputList.focusForeground#ffffff
- quickInputList.focusIconForeground#ffffff
- quickInputTitle.background#000000
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#ffffff1e
- scrollbarSlider.background#ffffff08
- scrollbarSlider.hoverBackground#ffffff12
- selection.background#ffffff18
- settings.checkboxBackground#000000
- settings.checkboxBorder#1e1e1e
- settings.checkboxForeground#a0a0a0
- settings.dropdownBackground#000000
- settings.dropdownBorder#1e1e1e
- settings.dropdownForeground#a0a0a0
- settings.headerForeground#a0a0a0
- settings.modifiedItemIndicator#808080
- settings.numberInputBackground#000000
- settings.numberInputBorder#1e1e1e
- settings.numberInputForeground#c0c0c0
- settings.textInputBackground#000000
- settings.textInputBorder#1e1e1e
- settings.textInputForeground#c0c0c0
- sideBar.background#000000
- sideBar.border#00000000
- sideBar.foreground#606060
- sideBarSectionHeader.background#000000
- sideBarSectionHeader.border#00000000
- sideBarSectionHeader.foreground#383838
- sideBarTitle.foreground#404040
- statusBar.background#000000
- statusBar.border#00000000
- statusBar.debuggingBackground#1e1e1e
- statusBar.debuggingForeground#e0e0e0
- statusBar.foreground#282828
- statusBar.noFolderBackground#000000
- statusBar.noFolderForeground#282828
- statusBarItem.activeBackground#ffffff10
- statusBarItem.errorBackground#ff444430
- statusBarItem.errorForeground#ff4444
- statusBarItem.hoverBackground#ffffff08
- statusBarItem.prominentBackground#ffffff10
- statusBarItem.prominentHoverBackground#ffffff18
- statusBarItem.remoteBackground#1e1e1e
- statusBarItem.remoteForeground#e0e0e0
- statusBarItem.warningBackground#88888830
- statusBarItem.warningForeground#888888
- tab.activeBackground#000000
- tab.activeBorder#000000
- tab.activeBorderTop#e0e0e0
- tab.activeForeground#e0e0e0
- tab.border#00000000
- tab.hoverBackground#000000
- tab.hoverForeground#707070
- tab.inactiveBackground#000000
- tab.inactiveForeground#282828
- tab.lastPinnedBorder#1e1e1e
- tab.unfocusedActiveBackground#000000
- tab.unfocusedActiveForeground#505050
- tab.unfocusedInactiveBackground#000000
- tab.unfocusedInactiveForeground#1e1e1e
- terminal.ansiBlack#000000
- terminal.ansiBlue#505050
- terminal.ansiBrightBlack#383838
- terminal.ansiBrightBlue#808080
- terminal.ansiBrightCyan#b8b8b8
- terminal.ansiBrightGreen#a0a0a0
- terminal.ansiBrightMagenta#909090
- terminal.ansiBrightRed#ff4444
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#b0b0b0
- terminal.ansiCyan#787878
- terminal.ansiGreen#707070
- terminal.ansiMagenta#606060
- terminal.ansiRed#cc3333
- terminal.ansiWhite#c0c0c0
- terminal.ansiYellow#888888
- terminal.background#000000
- terminal.border#00000000
- terminal.foreground#c0c0c0
- terminal.selectionBackground#ffffff18
- terminalCursor.background#000000
- terminalCursor.foreground#ffffff
- testing.iconErrored#ff4444
- testing.iconFailed#ff4444
- testing.iconPassed#606060
- testing.iconSkipped#282828
- testing.runAction#a0a0a0
- titleBar.activeBackground#000000
- titleBar.activeForeground#282828
- titleBar.border#00000000
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#1a1a1a
- tree.indentGuidesStroke#141414
- walkThrough.embeddedEditorBackground#000000
- welcomePage.background#000000
- welcomePage.progress.background#000000
- welcomePage.progress.foreground#505050
- welcomePage.tileBackground#000000
- welcomePage.tileBorder#1e1e1e
- welcomePage.tileHoverBackground#141414
- widget.shadow#00000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #282828 | italic |
| comment.block.documentation, comment.line.documentation | #343434 | italic |
| string, string.quoted, string.template | #e0e0e0 | — |
| constant.character.escape, constant.other.placeholder | #ffffff | — |
| string.regexp, punctuation.definition.string.regexp, string.regexp.character-class | #909090 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #ffffff | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #c0c0c0 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #909090 | — |
| constant.other, constant.character | #b0b0b0 | — |
| variable.other.constant | #a0a0a0 | — |
| keyword, keyword.control, keyword.control.flow | #ffffff | italic |
| keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic | #d0d0d0 | — |
| keyword.operator.logical.python, keyword.operator.wordlike | #d0d0d0 | italic |
| keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof | #808080 | italic |
| storage, storage.type, storage.modifier | #808080 | italic |
| entity.name.function, meta.function entity.name.function | #f0f0f0 | — |
| meta.function-call entity.name.function, meta.function-call.generic, support.function | #d8d8d8 | — |
| variable.parameter, meta.function.parameters variable.other | #a8a8a8 | italic |
| storage.type.function.arrow | #d0d0d0 | — |
| entity.name.class, entity.name.type.class, entity.name.type | #b0b0b0 | — |
| entity.other.inherited-class | #909090 | italic |
| entity.name.type.interface, support.type.interface | #a0a0a0 | italic |
| entity.name.type.parameter, variable.type.parameter | #909090 | — |
| support.type, support.type.primitive, keyword.type | #808080 | — |
| variable, variable.other, variable.other.readwrite | #c8c8c8 | — |
| variable.language.self, variable.language.this, variable.language.super | #909090 | italic |
| variable.other.property, variable.other.object.property, meta.property-name, support.variable.property | #b8b8b8 | — |
| meta.object-literal.key, meta.object.member, support.type.property-name | #a8a8a8 | — |
| punctuation, meta.brace, punctuation.separator, punctuation.terminator | #404040 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #686868 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #888888 | italic |
| entity.name.namespace, entity.name.module, entity.name.package | #808080 | — |
| entity.name.tag, meta.tag.sgml | #e8e8e8 | — |
| punctuation.definition.tag, meta.tag punctuation | #484848 | — |
| entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name | #b0b0b0 | — |
| meta.tag.attributes string | #e0e0e0 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #b0b0b0 | — |
| support.type.property-name.css, meta.property-name.css | #a0a0a0 | — |
| meta.property-value.css, support.constant.property-value.css | #e0e0e0 | — |
| constant.other.color.rgb-value.css, keyword.other.unit.css | #c0c0c0 | — |
| keyword.control.at-rule.css | #ffffff | italic |
| markup.heading, entity.name.section.markdown | #ffffff | bold |
| markup.bold | #f0f0f0 | bold |
| markup.italic | #c0c0c0 | italic |
| markup.inline.raw | #e0e0e0 | — |
| markup.fenced_code.block | #d0d0d0 | — |
| markup.underline.link | #909090 | underline |
| markup.quote | #404040 | italic |
| punctuation.definition.list.begin.markdown | #606060 | — |
| support.type.property-name.json | #c8c8c8 | — |
| entity.name.tag.yaml | #c8c8c8 | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml | #888888 | — |
| support.function.builtin.shell | #d0d0d0 | — |
| variable.other.normal.shell, variable.other.special.shell | #b0b0b0 | — |
| invalid | #ff4444 | strikethrough |
| invalid.deprecated | #888888 | strikethrough |
| meta.diff, meta.diff.header | #383838 | — |
| markup.inserted | #e0e0e0 | — |
| markup.deleted | #ff4444 | — |
| markup.changed | #888888 | — |