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#0c1828
- activityBar.activeBorder#80c0c8
- activityBar.background#030610
- activityBar.border#081020
- activityBar.foreground#80c0c8
- activityBar.inactiveForeground#102030
- activityBarBadge.background#b87890
- activityBarBadge.foreground#f0e0e8
- badge.background#b87890
- badge.foreground#f8e8f0
- breadcrumb.activeSelectionForeground#80c0c8
- breadcrumb.background#040810
- breadcrumb.focusForeground#70a8b8
- breadcrumb.foreground#182838
- breadcrumbPicker.background#04090f
- button.background#2a6880
- button.foreground#c8e8f0
- button.hoverBackground#387898
- button.secondaryBackground#0c1828
- button.secondaryForeground#80c0c8
- button.secondaryHoverBackground#102030
- charts.blue#80c0c8
- charts.foreground#70a8b8
- charts.green#78b090
- charts.lines#102030
- charts.orange#a88050
- charts.purple#9880c0
- charts.red#c05068
- charts.yellow#b89058
- commandCenter.activeBackground#0c1828
- commandCenter.activeBorder#80c0c8
- commandCenter.activeForeground#80c0c8
- commandCenter.background#04090f
- commandCenter.border#80c0c830
- commandCenter.foreground#407888
- debugConsole.errorForeground#c05068
- debugConsole.infoForeground#80c0c8
- debugConsole.sourceForeground#70a8b8
- debugConsole.warningForeground#b89058
- debugConsoleInputIcon.foreground#78b090
- debugIcon.breakpointDisabledForeground#182838
- debugIcon.breakpointForeground#b87890
- debugIcon.breakpointUnverifiedForeground#b89058
- debugIcon.continueForeground#80c0c8
- debugIcon.disconnectForeground#c05068
- debugIcon.pauseForeground#b89058
- debugIcon.restartForeground#78b090
- debugIcon.stepBackForeground#9880c0
- debugIcon.stepIntoForeground#80c0c8
- debugIcon.stepOutForeground#80c0c8
- debugIcon.stepOverForeground#80c0c8
- debugIcon.stopForeground#c05068
- debugToolBar.background#030510
- debugToolBar.border#80c0c830
- descriptionForeground#2a4e68
- diffEditor.insertedLineBackground#80c0c80a
- diffEditor.insertedTextBackground#80c0c80e
- diffEditor.insertedTextBorder#00000000
- diffEditor.removedLineBackground#c050680a
- diffEditor.removedTextBackground#c050680e
- diffEditor.removedTextBorder#00000000
- diffEditorGutter.insertedLineBackground#80c0c814
- diffEditorGutter.removedLineBackground#c0506814
- diffEditorOverview.insertedForeground#80c0c8
- diffEditorOverview.removedForeground#c05068
- disabledForeground#182838
- dropdown.background#04090f
- dropdown.border#80c0c828
- dropdown.foreground#70a8b8
- dropdown.listBackground#04090f
- editor.background#05080f
- editor.findMatchBackground#b8789028
- editor.findMatchBorder#b87890
- editor.findMatchHighlightBackground#b890581e
- editor.findMatchHighlightBorder#b8905844
- editor.focusedStackFrameHighlightBackground#80c0c814
- editor.foreground#88a8c0
- editor.hoverHighlightBackground#80c0c814
- editor.inactiveSelectionBackground#80c0c80c
- editor.lineHighlightBackground#0a142018
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#80c0c80c
- editor.selectionBackground#80c0c818
- editor.selectionHighlightBackground#80c0c812
- editor.selectionHighlightBorder#80c0c830
- editor.stackFrameHighlightBackground#b8905814
- editor.wordHighlightBackground#9880c014
- editor.wordHighlightBorder#9880c038
- editor.wordHighlightStrongBackground#b8789014
- editor.wordHighlightStrongBorder#b8789038
- editorBracketHighlight.foreground1#80c0c8
- editorBracketHighlight.foreground2#b87890
- editorBracketHighlight.foreground3#b89058
- editorBracketHighlight.foreground4#78b090
- editorBracketHighlight.foreground5#9880c0
- editorBracketHighlight.foreground6#7090b8
- editorBracketHighlight.unexpectedBracket.foreground#c05068
- editorBracketMatch.background#80c0c818
- editorBracketMatch.border#80c0c860
- editorCursor.background#000810
- editorCursor.foreground#80c0c8
- editorError.border#c0506838
- editorError.foreground#c05068
- editorGroupHeader.border#081020
- editorGroupHeader.noTabsBackground#030610
- editorGroupHeader.tabsBackground#030610
- editorGutter.addedBackground#80c0c850
- editorGutter.background#05080f
- editorGutter.commentRangeForeground#142838
- editorGutter.deletedBackground#c0506850
- editorGutter.modifiedBackground#b8905850
- editorHint.foreground#80c0c870
- editorHoverWidget.background#030610
- editorHoverWidget.border#80c0c830
- editorHoverWidget.foreground#70a8b8
- editorIndentGuide.activeBackground#142838
- editorIndentGuide.background#0c1828
- editorInfo.border#5890a838
- editorInfo.foreground#5890a8
- editorInlayHint.background#030610
- editorInlayHint.foreground#182838
- editorInlayHint.parameterForeground#204858
- editorInlayHint.typeForeground#2a5060
- editorLineNumber.activeForeground#80c0c890
- editorLineNumber.foreground#162838
- editorOverviewRuler.addedForeground#80c0c870
- editorOverviewRuler.border#081020
- editorOverviewRuler.deletedForeground#c0506870
- editorOverviewRuler.errorForeground#c05068
- editorOverviewRuler.findMatchForeground#b8789070
- editorOverviewRuler.infoForeground#80c0c8
- editorOverviewRuler.modifiedForeground#b8905870
- editorOverviewRuler.rangeHighlightForeground#80c0c840
- editorOverviewRuler.selectionHighlightForeground#80c0c828
- editorOverviewRuler.warningForeground#b89058
- editorOverviewRuler.wordHighlightForeground#9880c070
- editorOverviewRuler.wordHighlightStrongForeground#b8789070
- editorRuler.foreground#0c1828
- editorSuggestWidget.background#04090f
- editorSuggestWidget.border#80c0c828
- editorSuggestWidget.foreground#70a8b8
- editorSuggestWidget.highlightForeground#80c0c8
- editorSuggestWidget.selectedBackground#0c1828
- editorSuggestWidget.selectedForeground#80c0c8
- editorWarning.border#b8905838
- editorWarning.foreground#b89058
- editorWhitespace.foreground#102030
- editorWidget.background#04090f
- editorWidget.border#80c0c830
- editorWidget.foreground#70a8b8
- editorWidget.resizeBorder#80c0c8
- errorForeground#c05068
- extensionButton.prominentBackground#2a6880
- extensionButton.prominentForeground#c8e8f0
- extensionButton.prominentHoverBackground#387898
- extensionIcon.preReleaseForeground#b87890
- extensionIcon.starForeground#b89058
- extensionIcon.verifiedForeground#80c0c8
- focusBorder#80c0c860
- foreground#88a8c0
- gitDecoration.addedResourceForeground#80c0c8
- gitDecoration.conflictingResourceForeground#b87890
- gitDecoration.deletedResourceForeground#c05068
- gitDecoration.ignoredResourceForeground#162838
- gitDecoration.modifiedResourceForeground#b89058
- gitDecoration.stageDeletedResourceForeground#c87888
- gitDecoration.stageModifiedResourceForeground#c8a870
- gitDecoration.submoduleResourceForeground#9880c0
- gitDecoration.untrackedResourceForeground#78b090
- icon.foreground#407888
- input.background#04090f
- input.border#80c0c828
- input.foreground#88a8c0
- input.placeholderForeground#182838
- inputOption.activeBackground#80c0c81a
- inputOption.activeBorder#80c0c8
- inputOption.activeForeground#80c0c8
- inputValidation.errorBackground#180810
- inputValidation.errorBorder#c05068
- inputValidation.errorForeground#c05068
- inputValidation.infoBackground#001018
- inputValidation.infoBorder#80c0c8
- inputValidation.warningBackground#181000
- inputValidation.warningBorder#b89058
- keybindingLabel.background#0c1828
- keybindingLabel.border#80c0c830
- keybindingLabel.bottomBorder#5890a8
- keybindingLabel.foreground#80c0c8
- list.activeSelectionBackground#0c1828
- list.activeSelectionForeground#80c0c8
- list.errorForeground#c05068
- list.focusBackground#0c1828
- list.focusForeground#80c0c8
- list.highlightForeground#80c0c8
- list.hoverBackground#091422
- list.hoverForeground#70a8b8
- list.inactiveSelectionBackground#091422
- list.inactiveSelectionForeground#407888
- list.warningForeground#b89058
- listFilterWidget.background#030610
- listFilterWidget.noMatchesOutline#c0506850
- listFilterWidget.outline#80c0c840
- menu.background#04090f
- menu.border#80c0c828
- menu.foreground#70a8b8
- menu.selectionBackground#0c1828
- menu.selectionBorder#80c0c830
- menu.selectionForeground#80c0c8
- menu.separatorBackground#081020
- menubar.selectionBackground#0c1828
- menubar.selectionBorder#80c0c830
- menubar.selectionForeground#80c0c8
- minimap.background#030610
- minimap.errorHighlight#c05068
- minimap.findMatchHighlight#b8789070
- minimap.selectionHighlight#80c0c838
- minimap.warningHighlight#b89058
- minimapGutter.addedBackground#80c0c8
- minimapGutter.deletedBackground#c05068
- minimapGutter.modifiedBackground#b89058
- minimapSlider.activeBackground#80c0c820
- minimapSlider.background#80c0c806
- minimapSlider.hoverBackground#80c0c814
- notificationCenter.border#80c0c830
- notificationCenterHeader.background#030510
- notificationCenterHeader.foreground#80c0c8
- notifications.background#04090f
- notifications.border#80c0c828
- notifications.foreground#70a8b8
- notificationsErrorIcon.foreground#c05068
- notificationsInfoIcon.foreground#80c0c8
- notificationsWarningIcon.foreground#b89058
- notificationToast.border#80c0c830
- panel.background#030610
- panel.border#081020
- panel.dropBorder#80c0c8
- panelInput.border#80c0c828
- panelSection.border#081020
- panelTitle.activeBorder#80c0c8
- panelTitle.activeForeground#80c0c8
- panelTitle.inactiveForeground#182838
- peekView.border#80c0c830
- peekViewEditor.background#04080e
- peekViewEditor.matchHighlightBackground#b8789028
- peekViewEditor.matchHighlightBorder#b87890
- peekViewEditorGutter.background#04080e
- peekViewResult.background#030510
- peekViewResult.fileForeground#407888
- peekViewResult.lineForeground#204858
- peekViewResult.matchHighlightBackground#80c0c81a
- peekViewResult.selectionBackground#0c1828
- peekViewResult.selectionForeground#80c0c8
- peekViewTitle.background#030510
- peekViewTitleDescription.foreground#204858
- peekViewTitleLabel.foreground#80c0c8
- pickerGroup.border#80c0c828
- pickerGroup.foreground#80c0c850
- problemsErrorIcon.foreground#c05068
- problemsInfoIcon.foreground#5890a8
- problemsWarningIcon.foreground#b89058
- progressBar.background#80c0c8
- quickInput.background#04090f
- quickInput.foreground#70a8b8
- quickInputList.focusBackground#0c1828
- quickInputList.focusForeground#80c0c8
- quickInputList.focusIconForeground#80c0c8
- quickInputTitle.background#030510
- scrollbar.shadow#00000090
- scrollbarSlider.activeBackground#80c0c830
- scrollbarSlider.background#80c0c810
- scrollbarSlider.hoverBackground#80c0c820
- selection.background#80c0c820
- settings.checkboxBackground#04090f
- settings.checkboxBorder#80c0c828
- settings.checkboxForeground#80c0c8
- settings.dropdownBackground#04090f
- settings.dropdownBorder#80c0c828
- settings.dropdownForeground#70a8b8
- settings.headerForeground#80c0c8
- settings.modifiedItemIndicator#b89058
- settings.numberInputBackground#04090f
- settings.numberInputBorder#80c0c828
- settings.numberInputForeground#88a8c0
- settings.textInputBackground#04090f
- settings.textInputBorder#80c0c828
- settings.textInputForeground#88a8c0
- sideBar.background#040810
- sideBar.border#081020
- sideBar.foreground#407888
- sideBarSectionHeader.background#030610
- sideBarSectionHeader.border#081020
- sideBarSectionHeader.foreground#5890a8
- sideBarTitle.foreground#80c0c8
- statusBar.background#030510
- statusBar.border#081020
- statusBar.debuggingBackground#7080b0
- statusBar.debuggingForeground#e0d8f0
- statusBar.foreground#2a4868
- statusBar.noFolderBackground#030510
- statusBar.noFolderForeground#2a4868
- statusBarItem.activeBackground#80c0c81a
- statusBarItem.errorBackground#c0506870
- statusBarItem.errorForeground#f0d8dc
- statusBarItem.hoverBackground#80c0c814
- statusBarItem.prominentBackground#80c0c81a
- statusBarItem.prominentHoverBackground#80c0c828
- statusBarItem.remoteBackground#80c0c8
- statusBarItem.remoteForeground#030610
- statusBarItem.warningBackground#b8905870
- statusBarItem.warningForeground#f0e8d0
- tab.activeBackground#05080f
- tab.activeBorder#05080f
- tab.activeBorderTop#80c0c8
- tab.activeForeground#80c0c8
- tab.border#081020
- tab.hoverBackground#091422
- tab.hoverForeground#407888
- tab.inactiveBackground#030610
- tab.inactiveForeground#182838
- tab.lastPinnedBorder#80c0c830
- tab.unfocusedActiveBackground#05080f
- tab.unfocusedActiveForeground#407888
- tab.unfocusedInactiveBackground#030610
- tab.unfocusedInactiveForeground#142030
- terminal.ansiBlack#030610
- terminal.ansiBlue#6888b8
- terminal.ansiBrightBlack#102030
- terminal.ansiBrightBlue#7090b8
- terminal.ansiBrightCyan#a0d0d8
- terminal.ansiBrightGreen#90c0a8
- terminal.ansiBrightMagenta#c898b0
- terminal.ansiBrightRed#c87888
- terminal.ansiBrightWhite#b0c8d8
- terminal.ansiBrightYellow#c8a870
- terminal.ansiCyan#80c0c8
- terminal.ansiGreen#78b090
- terminal.ansiMagenta#b87890
- terminal.ansiRed#c05068
- terminal.ansiWhite#88a8c0
- terminal.ansiYellow#b89058
- terminal.background#030610
- terminal.border#081020
- terminal.foreground#70a8b8
- terminal.selectionBackground#80c0c81a
- terminalCursor.background#000810
- terminalCursor.foreground#80c0c8
- testing.iconErrored#c05068
- testing.iconFailed#c05068
- testing.iconPassed#78b090
- testing.iconSkipped#182838
- testing.runAction#80c0c8
- titleBar.activeBackground#030510
- titleBar.activeForeground#2a4868
- titleBar.border#081020
- titleBar.inactiveBackground#030510
- titleBar.inactiveForeground#102030
- tree.indentGuidesStroke#102030
- walkThrough.embeddedEditorBackground#04090f
- welcomePage.background#05080f
- welcomePage.progress.background#030610
- welcomePage.progress.foreground#80c0c8
- welcomePage.tileBackground#04090f
- welcomePage.tileBorder#081020
- welcomePage.tileHoverBackground#0c1828
- widget.shadow#00000090
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #162838 | italic |
| comment.block.documentation, comment.line.documentation | #1c3850 | italic |
| string, string.quoted, string.template | #80c0c8 | — |
| constant.character.escape, constant.other.placeholder | #b87890 | — |
| string.regexp, punctuation.definition.string.regexp, string.regexp.character-class | #a88050 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #b87890 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #b89058 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #a88050 | — |
| constant.other, constant.character | #c0a060 | — |
| variable.other.constant | #a88050 | — |
| keyword, keyword.control, keyword.control.flow | #b87890 | italic |
| keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic | #80c0c8 | — |
| keyword.operator.logical.python, keyword.operator.wordlike | #80c0c8 | italic |
| keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof | #9880c0 | italic |
| storage, storage.type, storage.modifier | #9880c0 | italic |
| entity.name.function, meta.function entity.name.function | #78b090 | — |
| meta.function-call entity.name.function, meta.function-call.generic, support.function | #589070 | — |
| variable.parameter, meta.function.parameters variable.other | #70a8b8 | italic |
| storage.type.function.arrow | #80c0c8 | — |
| entity.name.class, entity.name.type.class, entity.name.type | #7090b8 | — |
| entity.other.inherited-class | #5878a8 | italic |
| entity.name.type.interface, support.type.interface | #7090b8 | italic |
| entity.name.type.parameter, variable.type.parameter | #80a0c0 | — |
| support.type, support.type.primitive, keyword.type | #5878a8 | — |
| variable, variable.other, variable.other.readwrite | #88a8c0 | — |
| variable.language.self, variable.language.this, variable.language.super | #a88050 | italic |
| variable.other.property, variable.other.object.property, meta.property-name, support.variable.property | #4090a8 | — |
| meta.object-literal.key, meta.object.member, support.type.property-name | #308898 | — |
| punctuation, meta.brace, punctuation.separator, punctuation.terminator | #1c3850 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #307888 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #b89058 | italic |
| entity.name.namespace, entity.name.module, entity.name.package | #5878a8 | — |
| entity.name.tag, meta.tag.sgml | #b87890 | — |
| punctuation.definition.tag, meta.tag punctuation | #4858a0 | — |
| entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name | #9880c0 | — |
| meta.tag.attributes string | #80c0c8 | — |
| 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 | #9880c0 | — |
| support.type.property-name.css, meta.property-name.css | #7090b8 | — |
| meta.property-value.css, support.constant.property-value.css | #80c0c8 | — |
| constant.other.color.rgb-value.css, keyword.other.unit.css | #b89058 | — |
| keyword.control.at-rule.css | #b87890 | italic |
| markup.heading, entity.name.section.markdown | #80c0c8 | bold |
| markup.bold | #b87890 | bold |
| markup.italic | #9880c0 | italic |
| markup.inline.raw | #78b090 | — |
| markup.fenced_code.block | #78b090 | — |
| markup.underline.link | #5890a8 | underline |
| markup.quote | #1c3850 | italic |
| punctuation.definition.list.begin.markdown | #b87890 | — |
| support.type.property-name.json | #7090b8 | — |
| entity.name.tag.yaml | #7090b8 | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml | #b89058 | — |
| support.function.builtin.shell | #78b090 | — |
| variable.other.normal.shell, variable.other.special.shell | #b89058 | — |
| invalid | #c05068 | strikethrough |
| invalid.deprecated | #a88050 | strikethrough |
| meta.diff, meta.diff.header | #182838 | — |
| markup.inserted | #80c0c8 | — |
| markup.deleted | #c05068 | — |
| markup.changed | #b89058 | — |