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#0e0418
- activityBar.activeBorder#cc10d8
- activityBar.background#060308
- activityBar.border#0e0418
- activityBar.foreground#cc10d8
- activityBar.inactiveForeground#280a30
- activityBarBadge.background#18d858
- activityBarBadge.foreground#001808
- badge.background#18d858
- badge.foreground#001808
- breadcrumb.activeSelectionForeground#cc10d8
- breadcrumb.background#080410
- breadcrumb.focusForeground#a080c0
- breadcrumb.foreground#280a38
- breadcrumbPicker.background#060210
- button.background#680890
- button.foreground#f0d8ff
- button.hoverBackground#8810b8
- button.secondaryBackground#180828
- button.secondaryForeground#cc10d8
- button.secondaryHoverBackground#1e0a30
- charts.blue#cc10d8
- charts.foreground#a080c0
- charts.green#18d858
- charts.lines#200838
- charts.orange#e05808
- charts.purple#6608cc
- charts.red#f01840
- charts.yellow#c09018
- commandCenter.activeBackground#180828
- commandCenter.activeBorder#cc10d8
- commandCenter.activeForeground#cc10d8
- commandCenter.background#060210
- commandCenter.border#cc10d830
- commandCenter.foreground#806098
- debugConsole.errorForeground#f01840
- debugConsole.infoForeground#cc10d8
- debugConsole.sourceForeground#a080c0
- debugConsole.warningForeground#c09018
- debugConsoleInputIcon.foreground#18d858
- debugIcon.breakpointDisabledForeground#280a38
- debugIcon.breakpointForeground#f040f0
- debugIcon.breakpointUnverifiedForeground#c09018
- debugIcon.continueForeground#cc10d8
- debugIcon.disconnectForeground#f01840
- debugIcon.pauseForeground#c09018
- debugIcon.restartForeground#18d858
- debugIcon.stepBackForeground#6608cc
- debugIcon.stepIntoForeground#cc10d8
- debugIcon.stepOutForeground#cc10d8
- debugIcon.stepOverForeground#cc10d8
- debugIcon.stopForeground#f01840
- debugToolBar.background#050208
- debugToolBar.border#cc10d830
- descriptionForeground#503060
- diffEditor.insertedLineBackground#cc10d80a
- diffEditor.insertedTextBackground#cc10d80e
- diffEditor.insertedTextBorder#00000000
- diffEditor.removedLineBackground#f018400a
- diffEditor.removedTextBackground#f018400e
- diffEditor.removedTextBorder#00000000
- diffEditorGutter.insertedLineBackground#cc10d814
- diffEditorGutter.removedLineBackground#f0184014
- diffEditorOverview.insertedForeground#cc10d8
- diffEditorOverview.removedForeground#f01840
- disabledForeground#301840
- dropdown.background#060210
- dropdown.border#cc10d828
- dropdown.foreground#a080c0
- dropdown.listBackground#060210
- editor.background#070310
- editor.findMatchBackground#18d85828
- editor.findMatchBorder#18d858
- editor.findMatchHighlightBackground#c090181e
- editor.findMatchHighlightBorder#c0901844
- editor.focusedStackFrameHighlightBackground#cc10d814
- editor.foreground#c0a0d8
- editor.hoverHighlightBackground#cc10d814
- editor.inactiveSelectionBackground#cc10d80c
- editor.lineHighlightBackground#120620
- editor.lineHighlightBorder#1a08200a
- editor.rangeHighlightBackground#cc10d80c
- editor.selectionBackground#cc10d818
- editor.selectionHighlightBackground#cc10d812
- editor.selectionHighlightBorder#cc10d830
- editor.stackFrameHighlightBackground#c0901814
- editor.wordHighlightBackground#6608cc14
- editor.wordHighlightBorder#6608cc38
- editor.wordHighlightStrongBackground#18d85814
- editor.wordHighlightStrongBorder#18d85838
- editorBracketHighlight.foreground1#cc10d8
- editorBracketHighlight.foreground2#18d858
- editorBracketHighlight.foreground3#c09018
- editorBracketHighlight.foreground4#6608cc
- editorBracketHighlight.foreground5#f040f0
- editorBracketHighlight.foreground6#30c0d8
- editorBracketHighlight.unexpectedBracket.foreground#f01840
- editorBracketMatch.background#cc10d818
- editorBracketMatch.border#cc10d860
- editorCursor.background#02000a
- editorCursor.foreground#cc10d8
- editorError.border#f0184038
- editorError.foreground#f01840
- editorGroupHeader.border#0e0418
- editorGroupHeader.noTabsBackground#060308
- editorGroupHeader.tabsBackground#060308
- editorGutter.addedBackground#cc10d850
- editorGutter.background#070310
- editorGutter.commentRangeForeground#200a30
- editorGutter.deletedBackground#f0184050
- editorGutter.modifiedBackground#c0901850
- editorHint.foreground#cc10d870
- editorHoverWidget.background#060210
- editorHoverWidget.border#cc10d830
- editorHoverWidget.foreground#a080c0
- editorIndentGuide.activeBackground#200a30
- editorIndentGuide.background#150620
- editorInfo.border#6608cc38
- editorInfo.foreground#6608cc
- editorInlayHint.background#060210
- editorInlayHint.foreground#280a38
- editorInlayHint.parameterForeground#300e40
- editorInlayHint.typeForeground#3a1048
- editorLineNumber.activeForeground#cc10d890
- editorLineNumber.foreground#280a38
- editorOverviewRuler.addedForeground#cc10d870
- editorOverviewRuler.border#0e0418
- editorOverviewRuler.deletedForeground#f0184070
- editorOverviewRuler.errorForeground#f01840
- editorOverviewRuler.findMatchForeground#18d85870
- editorOverviewRuler.infoForeground#cc10d8
- editorOverviewRuler.modifiedForeground#c0901870
- editorOverviewRuler.rangeHighlightForeground#cc10d840
- editorOverviewRuler.selectionHighlightForeground#cc10d828
- editorOverviewRuler.warningForeground#c09018
- editorOverviewRuler.wordHighlightForeground#6608cc70
- editorOverviewRuler.wordHighlightStrongForeground#18d85870
- editorRuler.foreground#150620
- editorSuggestWidget.background#060210
- editorSuggestWidget.border#cc10d828
- editorSuggestWidget.foreground#a080c0
- editorSuggestWidget.highlightForeground#cc10d8
- editorSuggestWidget.selectedBackground#180828
- editorSuggestWidget.selectedForeground#cc10d8
- editorWarning.border#c0901838
- editorWarning.foreground#c09018
- editorWhitespace.foreground#1a0828
- editorWidget.background#060210
- editorWidget.border#cc10d830
- editorWidget.foreground#a080c0
- editorWidget.resizeBorder#cc10d8
- errorForeground#f01840
- extensionButton.prominentBackground#680890
- extensionButton.prominentForeground#f0d8ff
- extensionButton.prominentHoverBackground#8810b8
- extensionIcon.preReleaseForeground#18d858
- extensionIcon.starForeground#c09018
- extensionIcon.verifiedForeground#cc10d8
- focusBorder#cc10d860
- foreground#c0a0d8
- gitDecoration.addedResourceForeground#cc10d8
- gitDecoration.conflictingResourceForeground#f040f0
- gitDecoration.deletedResourceForeground#f01840
- gitDecoration.ignoredResourceForeground#200838
- gitDecoration.modifiedResourceForeground#c09018
- gitDecoration.stageDeletedResourceForeground#ff4060
- gitDecoration.stageModifiedResourceForeground#e0b030
- gitDecoration.submoduleResourceForeground#6608cc
- gitDecoration.untrackedResourceForeground#18d858
- icon.foreground#806098
- input.background#060210
- input.border#cc10d828
- input.foreground#c0a0d8
- input.placeholderForeground#280a38
- inputOption.activeBackground#cc10d81a
- inputOption.activeBorder#cc10d8
- inputOption.activeForeground#cc10d8
- inputValidation.errorBackground#180008
- inputValidation.errorBorder#f01840
- inputValidation.errorForeground#f01840
- inputValidation.infoBackground#0a0018
- inputValidation.infoBorder#cc10d8
- inputValidation.warningBackground#141000
- inputValidation.warningBorder#c09018
- keybindingLabel.background#180828
- keybindingLabel.border#cc10d830
- keybindingLabel.bottomBorder#9808b0
- keybindingLabel.foreground#cc10d8
- list.activeSelectionBackground#180828
- list.activeSelectionForeground#cc10d8
- list.errorForeground#f01840
- list.focusBackground#180828
- list.focusForeground#cc10d8
- list.highlightForeground#cc10d8
- list.hoverBackground#120620
- list.hoverForeground#e030f0
- list.inactiveSelectionBackground#100620
- list.inactiveSelectionForeground#806098
- list.warningForeground#c09018
- listFilterWidget.background#060210
- listFilterWidget.noMatchesOutline#f0184050
- listFilterWidget.outline#cc10d840
- menu.background#060210
- menu.border#cc10d828
- menu.foreground#a080c0
- menu.selectionBackground#180828
- menu.selectionBorder#cc10d830
- menu.selectionForeground#cc10d8
- menu.separatorBackground#0e0418
- menubar.selectionBackground#180828
- menubar.selectionBorder#cc10d830
- menubar.selectionForeground#cc10d8
- minimap.background#060308
- minimap.errorHighlight#f01840
- minimap.findMatchHighlight#18d85870
- minimap.selectionHighlight#cc10d838
- minimap.warningHighlight#c09018
- minimapGutter.addedBackground#cc10d8
- minimapGutter.deletedBackground#f01840
- minimapGutter.modifiedBackground#c09018
- minimapSlider.activeBackground#cc10d820
- minimapSlider.background#cc10d806
- minimapSlider.hoverBackground#cc10d814
- notificationCenter.border#cc10d830
- notificationCenterHeader.background#050208
- notificationCenterHeader.foreground#cc10d8
- notifications.background#060210
- notifications.border#cc10d828
- notifications.foreground#a080c0
- notificationsErrorIcon.foreground#f01840
- notificationsInfoIcon.foreground#cc10d8
- notificationsWarningIcon.foreground#c09018
- notificationToast.border#cc10d830
- panel.background#060308
- panel.border#0e0418
- panel.dropBorder#cc10d8
- panelInput.border#cc10d828
- panelSection.border#0e0418
- panelTitle.activeBorder#cc10d8
- panelTitle.activeForeground#cc10d8
- panelTitle.inactiveForeground#280a38
- peekView.border#cc10d830
- peekViewEditor.background#060210
- peekViewEditor.matchHighlightBackground#18d85828
- peekViewEditor.matchHighlightBorder#18d858
- peekViewEditorGutter.background#060210
- peekViewResult.background#050208
- peekViewResult.fileForeground#806098
- peekViewResult.lineForeground#3a1048
- peekViewResult.matchHighlightBackground#cc10d81a
- peekViewResult.selectionBackground#180828
- peekViewResult.selectionForeground#cc10d8
- peekViewTitle.background#050208
- peekViewTitleDescription.foreground#3a1048
- peekViewTitleLabel.foreground#cc10d8
- pickerGroup.border#cc10d828
- pickerGroup.foreground#cc10d850
- problemsErrorIcon.foreground#f01840
- problemsInfoIcon.foreground#6608cc
- problemsWarningIcon.foreground#c09018
- progressBar.background#cc10d8
- quickInput.background#060210
- quickInput.foreground#a080c0
- quickInputList.focusBackground#180828
- quickInputList.focusForeground#cc10d8
- quickInputList.focusIconForeground#cc10d8
- quickInputTitle.background#050208
- scrollbar.shadow#00000090
- scrollbarSlider.activeBackground#cc10d830
- scrollbarSlider.background#cc10d810
- scrollbarSlider.hoverBackground#cc10d820
- selection.background#cc10d820
- settings.checkboxBackground#060210
- settings.checkboxBorder#cc10d828
- settings.checkboxForeground#cc10d8
- settings.dropdownBackground#060210
- settings.dropdownBorder#cc10d828
- settings.dropdownForeground#a080c0
- settings.headerForeground#cc10d8
- settings.modifiedItemIndicator#c09018
- settings.numberInputBackground#060210
- settings.numberInputBorder#cc10d828
- settings.numberInputForeground#c0a0d8
- settings.textInputBackground#060210
- settings.textInputBorder#cc10d828
- settings.textInputForeground#c0a0d8
- sideBar.background#080410
- sideBar.border#0e0418
- sideBar.foreground#604878
- sideBarSectionHeader.background#060308
- sideBarSectionHeader.border#0e0418
- sideBarSectionHeader.foreground#9808b0
- sideBarTitle.foreground#cc10d8
- statusBar.background#050208
- statusBar.border#0e0418
- statusBar.debuggingBackground#6608cc
- statusBar.debuggingForeground#f0e8ff
- statusBar.foreground#401050
- statusBar.noFolderBackground#050208
- statusBar.noFolderForeground#401050
- statusBarItem.activeBackground#cc10d81a
- statusBarItem.errorBackground#f0184070
- statusBarItem.errorForeground#ffe8f0
- statusBarItem.hoverBackground#cc10d814
- statusBarItem.prominentBackground#cc10d81a
- statusBarItem.prominentHoverBackground#cc10d828
- statusBarItem.remoteBackground#cc10d8
- statusBarItem.remoteForeground#060308
- statusBarItem.warningBackground#c0901870
- statusBarItem.warningForeground#fff8e0
- tab.activeBackground#070310
- tab.activeBorder#070310
- tab.activeBorderTop#cc10d8
- tab.activeForeground#cc10d8
- tab.border#0e0418
- tab.hoverBackground#120620
- tab.hoverForeground#806098
- tab.inactiveBackground#060308
- tab.inactiveForeground#280a38
- tab.lastPinnedBorder#cc10d830
- tab.unfocusedActiveBackground#070310
- tab.unfocusedActiveForeground#806098
- tab.unfocusedInactiveBackground#060308
- tab.unfocusedInactiveForeground#1c0628
- terminal.ansiBlack#060308
- terminal.ansiBlue#6608cc
- terminal.ansiBrightBlack#280a38
- terminal.ansiBrightBlue#8830e8
- terminal.ansiBrightCyan#60e0f0
- terminal.ansiBrightGreen#40f880
- terminal.ansiBrightMagenta#f040f0
- terminal.ansiBrightRed#ff4060
- terminal.ansiBrightWhite#e0c8f0
- terminal.ansiBrightYellow#e0b030
- terminal.ansiCyan#30c0d8
- terminal.ansiGreen#18d858
- terminal.ansiMagenta#cc10d8
- terminal.ansiRed#f01840
- terminal.ansiWhite#c0a0d8
- terminal.ansiYellow#c09018
- terminal.background#060308
- terminal.border#0e0418
- terminal.foreground#a080c0
- terminal.selectionBackground#cc10d81a
- terminalCursor.background#02000a
- terminalCursor.foreground#cc10d8
- testing.iconErrored#f01840
- testing.iconFailed#f01840
- testing.iconPassed#18d858
- testing.iconSkipped#280a38
- testing.runAction#cc10d8
- titleBar.activeBackground#050208
- titleBar.activeForeground#401050
- titleBar.border#0e0418
- titleBar.inactiveBackground#050208
- titleBar.inactiveForeground#280838
- tree.indentGuidesStroke#1a0828
- walkThrough.embeddedEditorBackground#060210
- welcomePage.background#070310
- welcomePage.progress.background#060210
- welcomePage.progress.foreground#cc10d8
- welcomePage.tileBackground#060210
- welcomePage.tileBorder#0e0418
- welcomePage.tileHoverBackground#180828
- widget.shadow#00000090
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #280a38 | italic |
| comment.block.documentation, comment.line.documentation | #380e48 | italic |
| string, string.quoted, string.template | #cc10d8 | — |
| constant.character.escape, constant.other.placeholder | #18d858 | — |
| string.regexp, punctuation.definition.string.regexp, string.regexp.character-class | #e05808 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #18d858 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #c09018 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #e05808 | — |
| constant.other, constant.character | #e0b030 | — |
| variable.other.constant | #e05808 | — |
| keyword, keyword.control, keyword.control.flow | #f040f0 | italic |
| keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic | #cc10d8 | — |
| keyword.operator.logical.python, keyword.operator.wordlike | #cc10d8 | italic |
| keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof | #6608cc | italic |
| storage, storage.type, storage.modifier | #6608cc | italic |
| entity.name.function, meta.function entity.name.function | #18d858 | — |
| meta.function-call entity.name.function, meta.function-call.generic, support.function | #10b048 | — |
| variable.parameter, meta.function.parameters variable.other | #a080c0 | italic |
| storage.type.function.arrow | #cc10d8 | — |
| entity.name.class, entity.name.type.class, entity.name.type | #8830e8 | — |
| entity.other.inherited-class | #6010c8 | italic |
| entity.name.type.interface, support.type.interface | #8830e8 | italic |
| entity.name.type.parameter, variable.type.parameter | #a050f8 | — |
| support.type, support.type.primitive, keyword.type | #6010c8 | — |
| variable, variable.other, variable.other.readwrite | #c0a0d8 | — |
| variable.language.self, variable.language.this, variable.language.super | #e05808 | italic |
| variable.other.property, variable.other.object.property, meta.property-name, support.variable.property | #9870b8 | — |
| meta.object-literal.key, meta.object.member, support.type.property-name | #8060a8 | — |
| punctuation, meta.brace, punctuation.separator, punctuation.terminator | #380e48 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #7010a0 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #c09018 | italic |
| entity.name.namespace, entity.name.module, entity.name.package | #6010c8 | — |
| entity.name.tag, meta.tag.sgml | #f040f0 | — |
| punctuation.definition.tag, meta.tag punctuation | #5008a0 | — |
| entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name | #6608cc | — |
| meta.tag.attributes string | #cc10d8 | — |
| 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 | #6608cc | — |
| support.type.property-name.css, meta.property-name.css | #8830e8 | — |
| meta.property-value.css, support.constant.property-value.css | #cc10d8 | — |
| constant.other.color.rgb-value.css, keyword.other.unit.css | #c09018 | — |
| keyword.control.at-rule.css | #f040f0 | italic |
| markup.heading, entity.name.section.markdown | #cc10d8 | bold |
| markup.bold | #f040f0 | bold |
| markup.italic | #6608cc | italic |
| markup.inline.raw | #18d858 | — |
| markup.fenced_code.block | #18d858 | — |
| markup.underline.link | #8830e8 | underline |
| markup.quote | #380e48 | italic |
| punctuation.definition.list.begin.markdown | #f040f0 | — |
| support.type.property-name.json | #8830e8 | — |
| entity.name.tag.yaml | #8830e8 | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml | #c09018 | — |
| support.function.builtin.shell | #18d858 | — |
| variable.other.normal.shell, variable.other.special.shell | #c09018 | — |
| invalid | #f01840 | strikethrough |
| invalid.deprecated | #e05808 | strikethrough |
| meta.diff, meta.diff.header | #280a38 | — |
| markup.inserted | #cc10d8 | — |
| markup.deleted | #f01840 | — |
| markup.changed | #c09018 | — |