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#cc1111
- activityBar.background#0a0a12
- activityBar.border#00000000
- activityBar.foreground#d0d0e0
- activityBar.inactiveForeground#2c2c44
- activityBarBadge.background#cc1111
- activityBarBadge.foreground#f0f0fc
- badge.background#cc1111
- badge.foreground#f0f0fc
- breadcrumb.activeSelectionForeground#9090a8
- breadcrumb.background#08080f
- breadcrumb.focusForeground#686880
- breadcrumb.foreground#242438
- breadcrumbPicker.background#0c0c14
- button.background#550a0a
- button.foreground#f0f0fc
- button.hoverBackground#771212
- button.secondaryBackground#0c0c14
- button.secondaryForeground#9090a8
- button.secondaryHoverBackground#181828
- charts.blue#5588cc
- charts.foreground#9090a8
- charts.green#3d6688
- charts.lines#1e1e30
- charts.orange#cc7720
- charts.purple#6644aa
- charts.red#cc1111
- charts.yellow#cc9940
- commandCenter.activeBackground#0e0e18
- commandCenter.activeBorder#cc1111
- commandCenter.activeForeground#d0d0e0
- commandCenter.background#0a0a12
- commandCenter.border#1e1e30
- commandCenter.foreground#3c3c58
- debugConsole.errorForeground#ff2424
- debugConsole.infoForeground#5588cc
- debugConsole.sourceForeground#9090a8
- debugConsole.warningForeground#cc9940
- debugConsoleInputIcon.foreground#cc1111
- debugIcon.breakpointDisabledForeground#242438
- debugIcon.breakpointForeground#cc1111
- debugIcon.breakpointUnverifiedForeground#cc9940
- debugIcon.continueForeground#5588cc
- debugIcon.disconnectForeground#cc1111
- debugIcon.pauseForeground#cc9940
- debugIcon.restartForeground#5588cc
- debugIcon.stepBackForeground#505068
- debugIcon.stepIntoForeground#9090a8
- debugIcon.stepOutForeground#9090a8
- debugIcon.stepOverForeground#9090a8
- debugIcon.stopForeground#cc1111
- debugToolBar.background#0a0a12
- debugToolBar.border#1e1e30
- descriptionForeground#484860
- diffEditor.insertedLineBackground#5588cc06
- diffEditor.insertedTextBackground#5588cc0a
- diffEditor.insertedTextBorder#00000000
- diffEditor.removedLineBackground#cc111106
- diffEditor.removedTextBackground#cc11110a
- diffEditor.removedTextBorder#00000000
- diffEditorGutter.insertedLineBackground#5588cc0c
- diffEditorGutter.removedLineBackground#cc11110c
- diffEditorOverview.insertedForeground#5588cc
- diffEditorOverview.removedForeground#cc1111
- disabledForeground#252538
- dropdown.background#0c0c14
- dropdown.border#1e1e30
- dropdown.foreground#9090a8
- dropdown.listBackground#0c0c14
- editor.background#08080f
- editor.findMatchBackground#cc111140
- editor.findMatchBorder#cc1111
- editor.findMatchHighlightBackground#cc111120
- editor.findMatchHighlightBorder#cc111140
- editor.focusedStackFrameHighlightBackground#5588cc0a
- editor.foreground#b8b8cc
- editor.hoverHighlightBackground#5588cc0c
- editor.inactiveSelectionBackground#cc111114
- editor.lineHighlightBackground#0e0e1c40
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#cc111108
- editor.selectionBackground#cc111128
- editor.selectionHighlightBackground#cc111118
- editor.selectionHighlightBorder#cc111130
- editor.stackFrameHighlightBackground#cc111110
- editor.wordHighlightBackground#5588cc10
- editor.wordHighlightBorder#5588cc28
- editor.wordHighlightStrongBackground#5588cc18
- editor.wordHighlightStrongBorder#5588cc38
- editorBracketHighlight.foreground1#cc1111
- editorBracketHighlight.foreground2#5588cc
- editorBracketHighlight.foreground3#8888aa
- editorBracketHighlight.foreground4#dd4444
- editorBracketHighlight.foreground5#3377aa
- editorBracketHighlight.foreground6#707090
- editorBracketHighlight.unexpectedBracket.foreground#ff2424
- editorBracketMatch.background#cc111118
- editorBracketMatch.border#cc111150
- editorCursor.background#08080f
- editorCursor.foreground#cc1111
- editorError.border#ff242430
- editorError.foreground#ff2424
- editorGroupHeader.border#00000000
- editorGroupHeader.noTabsBackground#08080f
- editorGroupHeader.tabsBackground#0a0a12
- editorGutter.addedBackground#5588cc50
- editorGutter.background#08080f
- editorGutter.commentRangeForeground#1c1c2e
- editorGutter.deletedBackground#cc111150
- editorGutter.modifiedBackground#cc994040
- editorHint.foreground#363655
- editorHoverWidget.background#0c0c14
- editorHoverWidget.border#1e1e30
- editorHoverWidget.foreground#9090a8
- editorIndentGuide.activeBackground#1c1c2e
- editorIndentGuide.background#00000000
- editorInfo.border#5588cc30
- editorInfo.foreground#5588cc
- editorInlayHint.background#00000000
- editorInlayHint.foreground#242438
- editorInlayHint.parameterForeground#282840
- editorInlayHint.typeForeground#2e2e48
- editorLineNumber.activeForeground#484860
- editorLineNumber.foreground#242438
- editorOverviewRuler.addedForeground#5588cc50
- editorOverviewRuler.border#00000000
- editorOverviewRuler.deletedForeground#cc111160
- editorOverviewRuler.errorForeground#ff2424
- editorOverviewRuler.findMatchForeground#cc111160
- editorOverviewRuler.infoForeground#5588cc
- editorOverviewRuler.modifiedForeground#cc9940
- editorOverviewRuler.rangeHighlightForeground#cc111130
- editorOverviewRuler.selectionHighlightForeground#cc111120
- editorOverviewRuler.warningForeground#cc9940
- editorOverviewRuler.wordHighlightForeground#5588cc40
- editorOverviewRuler.wordHighlightStrongForeground#5588cc50
- editorRuler.foreground#161624
- editorSuggestWidget.background#0c0c14
- editorSuggestWidget.border#1e1e30
- editorSuggestWidget.foreground#9090a8
- editorSuggestWidget.highlightForeground#cc1111
- editorSuggestWidget.selectedBackground#181828
- editorSuggestWidget.selectedForeground#e0e0ec
- editorWarning.border#cc994030
- editorWarning.foreground#cc9940
- editorWhitespace.foreground#00000000
- editorWidget.background#0c0c14
- editorWidget.border#1e1e30
- editorWidget.foreground#9090a8
- editorWidget.resizeBorder#cc1111
- errorForeground#ff2424
- extensionButton.prominentBackground#550a0a
- extensionButton.prominentForeground#f0f0fc
- extensionButton.prominentHoverBackground#771212
- extensionIcon.preReleaseForeground#cc1111
- extensionIcon.starForeground#cc9940
- extensionIcon.verifiedForeground#5588cc
- focusBorder#cc111180
- foreground#b8b8cc
- gitDecoration.addedResourceForeground#5588cc
- gitDecoration.conflictingResourceForeground#cc1111
- gitDecoration.deletedResourceForeground#cc1111
- gitDecoration.ignoredResourceForeground#202035
- gitDecoration.modifiedResourceForeground#9090a8
- gitDecoration.stageDeletedResourceForeground#ff2424
- gitDecoration.stageModifiedResourceForeground#b0b0c8
- gitDecoration.submoduleResourceForeground#343450
- gitDecoration.untrackedResourceForeground#3d6688
- icon.foreground#585870
- input.background#0a0a12
- input.border#1e1e30
- input.foreground#b8b8cc
- input.placeholderForeground#242438
- inputOption.activeBackground#cc111118
- inputOption.activeBorder#cc1111
- inputOption.activeForeground#f0f0fc
- inputValidation.errorBackground#140404
- inputValidation.errorBorder#cc1111
- inputValidation.errorForeground#ff2424
- inputValidation.infoBackground#0c0c14
- inputValidation.infoBorder#5588cc
- inputValidation.warningBackground#0c0c14
- inputValidation.warningBorder#cc9940
- keybindingLabel.background#0c0c14
- keybindingLabel.border#1e1e30
- keybindingLabel.bottomBorder#252538
- keybindingLabel.foreground#9090a8
- list.activeSelectionBackground#181828
- list.activeSelectionForeground#e0e0ec
- list.errorForeground#ff2424
- list.focusBackground#1c1c2e
- list.focusForeground#e0e0ec
- list.highlightForeground#cc1111
- list.hoverBackground#131320
- list.hoverForeground#c0c0d4
- list.inactiveSelectionBackground#0c0c14
- list.inactiveSelectionForeground#9090a8
- list.warningForeground#cc9940
- listFilterWidget.background#0c0c14
- listFilterWidget.noMatchesOutline#ff242430
- listFilterWidget.outline#cc111140
- menu.background#0c0c14
- menu.border#1e1e30
- menu.foreground#9090a8
- menu.selectionBackground#181828
- menu.selectionBorder#00000000
- menu.selectionForeground#e0e0ec
- menu.separatorBackground#1e1e30
- menubar.selectionBackground#0c0c14
- menubar.selectionBorder#00000000
- menubar.selectionForeground#d0d0e0
- minimap.background#08080f
- minimap.errorHighlight#ff2424
- minimap.findMatchHighlight#cc111150
- minimap.selectionHighlight#cc111128
- minimap.warningHighlight#cc9940
- minimapGutter.addedBackground#5588cc
- minimapGutter.deletedBackground#cc1111
- minimapGutter.modifiedBackground#cc9940
- minimapSlider.activeBackground#cc111120
- minimapSlider.background#cc111108
- minimapSlider.hoverBackground#cc111114
- notificationCenter.border#1e1e30
- notificationCenterHeader.background#0a0a12
- notificationCenterHeader.foreground#343450
- notifications.background#0c0c14
- notifications.border#1e1e30
- notifications.foreground#9090a8
- notificationsErrorIcon.foreground#ff2424
- notificationsInfoIcon.foreground#5588cc
- notificationsWarningIcon.foreground#cc9940
- notificationToast.border#1e1e30
- panel.background#0a0a12
- panel.border#181828
- panel.dropBorder#cc1111
- panelInput.border#1e1e30
- panelSection.border#181828
- panelTitle.activeBorder#cc1111
- panelTitle.activeForeground#d0d0e0
- panelTitle.inactiveForeground#242438
- peekView.border#cc111140
- peekViewEditor.background#0a0a12
- peekViewEditor.matchHighlightBackground#cc111128
- peekViewEditor.matchHighlightBorder#cc1111
- peekViewEditorGutter.background#0a0a12
- peekViewResult.background#0c0c14
- peekViewResult.fileForeground#5588cc
- peekViewResult.lineForeground#2c2c44
- peekViewResult.matchHighlightBackground#cc111118
- peekViewResult.selectionBackground#181828
- peekViewResult.selectionForeground#d0d0e0
- peekViewTitle.background#0a0a12
- peekViewTitleDescription.foreground#2c2c44
- peekViewTitleLabel.foreground#9090a8
- pickerGroup.border#1e1e30
- pickerGroup.foreground#242438
- problemsErrorIcon.foreground#ff2424
- problemsInfoIcon.foreground#5588cc
- problemsWarningIcon.foreground#cc9940
- progressBar.background#cc1111
- quickInput.background#0c0c14
- quickInput.foreground#9090a8
- quickInputList.focusBackground#181828
- quickInputList.focusForeground#e0e0ec
- quickInputList.focusIconForeground#cc1111
- quickInputTitle.background#0a0a12
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#cc111120
- scrollbarSlider.background#cc111108
- scrollbarSlider.hoverBackground#cc111114
- selection.background#cc111120
- settings.checkboxBackground#0c0c14
- settings.checkboxBorder#1e1e30
- settings.checkboxForeground#9090a8
- settings.dropdownBackground#0c0c14
- settings.dropdownBorder#1e1e30
- settings.dropdownForeground#9090a8
- settings.headerForeground#9090a8
- settings.modifiedItemIndicator#cc1111
- settings.numberInputBackground#0a0a12
- settings.numberInputBorder#1e1e30
- settings.numberInputForeground#b8b8cc
- settings.textInputBackground#0a0a12
- settings.textInputBorder#1e1e30
- settings.textInputForeground#b8b8cc
- sideBar.background#0c0c14
- sideBar.border#00000000
- sideBar.foreground#585870
- sideBarSectionHeader.background#0a0a12
- sideBarSectionHeader.border#00000000
- sideBarSectionHeader.foreground#2c2c44
- sideBarTitle.foreground#343450
- statusBar.background#060610
- statusBar.border#00000000
- statusBar.debuggingBackground#1a0808
- statusBar.debuggingForeground#cc1111
- statusBar.foreground#2c2c44
- statusBar.noFolderBackground#060610
- statusBar.noFolderForeground#242438
- statusBarItem.activeBackground#cc111118
- statusBarItem.errorBackground#cc111130
- statusBarItem.errorForeground#ff2424
- statusBarItem.hoverBackground#cc111110
- statusBarItem.prominentBackground#cc111118
- statusBarItem.prominentHoverBackground#cc111128
- statusBarItem.remoteBackground#1a0808
- statusBarItem.remoteForeground#cc1111
- statusBarItem.warningBackground#cc994030
- statusBarItem.warningForeground#cc9940
- tab.activeBackground#08080f
- tab.activeBorder#08080f
- tab.activeBorderTop#cc1111
- tab.activeForeground#e0e0ec
- tab.border#00000000
- tab.hoverBackground#0e0e18
- tab.hoverForeground#686880
- tab.inactiveBackground#0a0a12
- tab.inactiveForeground#242438
- tab.lastPinnedBorder#1e1e30
- tab.unfocusedActiveBackground#08080f
- tab.unfocusedActiveForeground#505068
- tab.unfocusedInactiveBackground#0a0a12
- tab.unfocusedInactiveForeground#1c1c2e
- terminal.ansiBlack#0a0a12
- terminal.ansiBlue#3366aa
- terminal.ansiBrightBlack#2c2c44
- terminal.ansiBrightBlue#5588cc
- terminal.ansiBrightCyan#55aacc
- terminal.ansiBrightGreen#5588aa
- terminal.ansiBrightMagenta#885577
- terminal.ansiBrightRed#ff2424
- terminal.ansiBrightWhite#d0d0e0
- terminal.ansiBrightYellow#cc9940
- terminal.ansiCyan#3377aa
- terminal.ansiGreen#3d6688
- terminal.ansiMagenta#663355
- terminal.ansiRed#aa1111
- terminal.ansiWhite#9090a8
- terminal.ansiYellow#996620
- terminal.background#08080f
- terminal.border#181828
- terminal.foreground#b0b0c8
- terminal.selectionBackground#cc111120
- terminalCursor.background#08080f
- terminalCursor.foreground#cc1111
- testing.iconErrored#ff2424
- testing.iconFailed#cc1111
- testing.iconPassed#5588cc
- testing.iconSkipped#242438
- testing.runAction#9090a8
- titleBar.activeBackground#060610
- titleBar.activeForeground#2c2c44
- titleBar.border#00000000
- titleBar.inactiveBackground#060610
- titleBar.inactiveForeground#1a1a2e
- tree.indentGuidesStroke#1c1c2e
- walkThrough.embeddedEditorBackground#0a0a12
- welcomePage.background#08080f
- welcomePage.progress.background#0a0a12
- welcomePage.progress.foreground#cc1111
- welcomePage.tileBackground#0c0c14
- welcomePage.tileBorder#1e1e30
- welcomePage.tileHoverBackground#181828
- widget.shadow#00000060
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #303050 | italic |
| comment.block.documentation, comment.line.documentation | #3d3d60 | italic |
| string, string.quoted, string.template | #7aadce | — |
| constant.character.escape, constant.other.placeholder | #aaccee | — |
| string.regexp, punctuation.definition.string.regexp, string.regexp.character-class | #5588aa | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #aaccee | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #cc9940 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #9090a8 | — |
| constant.other, constant.character | #a8a8c0 | — |
| variable.other.constant | #dd4444 | — |
| keyword, keyword.control, keyword.control.flow | #cc1111 | italic |
| keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic | #aa6666 | — |
| keyword.operator.logical.python, keyword.operator.wordlike | #aa6666 | italic |
| keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof | #884444 | italic |
| storage, storage.type, storage.modifier | #884444 | italic |
| entity.name.function, meta.function entity.name.function | #e0e0ec | — |
| meta.function-call entity.name.function, meta.function-call.generic, support.function | #c8c8dc | — |
| variable.parameter, meta.function.parameters variable.other | #9090a8 | italic |
| storage.type.function.arrow | #aa6666 | — |
| entity.name.class, entity.name.type.class, entity.name.type | #5588cc | — |
| entity.other.inherited-class | #4477aa | italic |
| entity.name.type.interface, support.type.interface | #4488bb | italic |
| entity.name.type.parameter, variable.type.parameter | #3377aa | — |
| support.type, support.type.primitive, keyword.type | #446688 | — |
| variable, variable.other, variable.other.readwrite | #b8b8cc | — |
| variable.language.self, variable.language.this, variable.language.super | #7a7a90 | italic |
| variable.other.property, variable.other.object.property, meta.property-name, support.variable.property | #a8a8c0 | — |
| meta.object-literal.key, meta.object.member, support.type.property-name | #9898b4 | — |
| punctuation, meta.brace, punctuation.separator, punctuation.terminator | #343450 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #4a6888 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #884444 | italic |
| entity.name.namespace, entity.name.module, entity.name.package | #446688 | — |
| entity.name.tag, meta.tag.sgml | #cc1111 | — |
| punctuation.definition.tag, meta.tag punctuation | #662222 | — |
| entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name | #9090a8 | — |
| meta.tag.attributes string | #7aadce | — |
| 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 | #9090a8 | — |
| support.type.property-name.css, meta.property-name.css | #7a7a90 | — |
| meta.property-value.css, support.constant.property-value.css | #7aadce | — |
| constant.other.color.rgb-value.css, keyword.other.unit.css | #cc9940 | — |
| keyword.control.at-rule.css | #cc1111 | italic |
| markup.heading, entity.name.section.markdown | #cc1111 | bold |
| markup.bold | #e0e0ec | bold |
| markup.italic | #9090a8 | italic |
| markup.inline.raw | #7aadce | — |
| markup.fenced_code.block | #5588cc | — |
| markup.underline.link | #5588cc | underline |
| markup.quote | #343450 | italic |
| punctuation.definition.list.begin.markdown | #cc1111 | — |
| support.type.property-name.json | #9898b4 | — |
| entity.name.tag.yaml | #9898b4 | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml | #5588cc | — |
| support.function.builtin.shell | #c8c8dc | — |
| variable.other.normal.shell, variable.other.special.shell | #a8a8c0 | — |
| invalid | #ff2424 | strikethrough |
| invalid.deprecated | #663333 | strikethrough |
| meta.diff, meta.diff.header | #2c2c44 | — |
| markup.inserted | #5588cc | — |
| markup.deleted | #cc1111 | — |
| markup.changed | #9090a8 | — |