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#ccbaa0
- activityBar.activeBorder#c84a30
- activityBar.background#d8c8b0
- activityBar.border#c8b898
- activityBar.foreground#c84a30
- activityBar.inactiveForeground#a08060
- activityBarBadge.background#c84a30
- activityBarBadge.foreground#faf0e8
- badge.background#c84a30
- badge.foreground#faf0e8
- breadcrumb.activeSelectionForeground#c84a30
- breadcrumb.background#ede0d0
- breadcrumb.focusForeground#5a3820
- breadcrumb.foreground#b09878
- breadcrumbPicker.background#ede0d0
- button.background#c84a30
- button.foreground#faf0e8
- button.hoverBackground#e05a40
- button.secondaryBackground#e0d0b8
- button.secondaryForeground#c84a30
- button.secondaryHoverBackground#d4c4ac
- charts.blue#5a6898
- charts.foreground#3a2820
- charts.green#6a8840
- charts.lines#d8c8b0
- charts.orange#c84a30
- charts.purple#907050
- charts.red#b83838
- charts.yellow#a87030
- commandCenter.activeBackground#d8c4ac
- commandCenter.activeBorder#c84a30
- commandCenter.activeForeground#c84a30
- commandCenter.background#ede0d0
- commandCenter.border#c84a3040
- commandCenter.foreground#7a5840
- debugConsole.errorForeground#b83838
- debugConsole.infoForeground#5a6898
- debugConsole.sourceForeground#3a2820
- debugConsole.warningForeground#a87030
- debugConsoleInputIcon.foreground#6a8840
- debugIcon.breakpointDisabledForeground#c0a888
- debugIcon.breakpointForeground#c84a30
- debugIcon.breakpointUnverifiedForeground#a87030
- debugIcon.continueForeground#6a8840
- debugIcon.disconnectForeground#b83838
- debugIcon.pauseForeground#a87030
- debugIcon.restartForeground#5a6898
- debugIcon.stepBackForeground#907050
- debugIcon.stepIntoForeground#c84a30
- debugIcon.stepOutForeground#c84a30
- debugIcon.stepOverForeground#c84a30
- debugIcon.stopForeground#b83838
- debugToolBar.background#e0d0b8
- debugToolBar.border#c84a3030
- descriptionForeground#9a7858
- diffEditor.insertedLineBackground#6a88400a
- diffEditor.insertedTextBackground#6a88400e
- diffEditor.insertedTextBorder#00000000
- diffEditor.removedLineBackground#b838380a
- diffEditor.removedTextBackground#b838380e
- diffEditor.removedTextBorder#00000000
- diffEditorGutter.insertedLineBackground#6a884014
- diffEditorGutter.removedLineBackground#b8383814
- diffEditorOverview.insertedForeground#6a8840
- diffEditorOverview.removedForeground#b83838
- disabledForeground#c0a888
- dropdown.background#ede0d0
- dropdown.border#c84a3030
- dropdown.foreground#3a2820
- dropdown.listBackground#ede0d0
- editor.background#f5ede0
- editor.findMatchBackground#c84a3030
- editor.findMatchBorder#c84a30
- editor.findMatchHighlightBackground#c84a3020
- editor.findMatchHighlightBorder#c84a3040
- editor.focusedStackFrameHighlightBackground#c84a3014
- editor.foreground#3a2820
- editor.hoverHighlightBackground#c84a3018
- editor.inactiveSelectionBackground#c84a3014
- editor.lineHighlightBackground#ede0d000
- editor.lineHighlightBorder#e8d8c060
- editor.rangeHighlightBackground#c84a3010
- editor.selectionBackground#c84a3028
- editor.selectionHighlightBackground#c84a3018
- editor.selectionHighlightBorder#c84a3038
- editor.stackFrameHighlightBackground#a8703014
- editor.wordHighlightBackground#b8703018
- editor.wordHighlightBorder#b8703038
- editor.wordHighlightStrongBackground#c84a3018
- editor.wordHighlightStrongBorder#c84a3038
- editorBracketHighlight.foreground1#c84a30
- editorBracketHighlight.foreground2#b87030
- editorBracketHighlight.foreground3#5a6898
- editorBracketHighlight.foreground4#6a8840
- editorBracketHighlight.foreground5#a84030
- editorBracketHighlight.foreground6#907050
- editorBracketHighlight.unexpectedBracket.foreground#b83838
- editorBracketMatch.background#c84a3018
- editorBracketMatch.border#c84a3060
- editorCursor.background#f5ede0
- editorCursor.foreground#c84a30
- editorError.border#b8383840
- editorError.foreground#b83838
- editorGroupHeader.border#c8b898
- editorGroupHeader.noTabsBackground#dfd0ba
- editorGroupHeader.tabsBackground#dfd0ba
- editorGutter.addedBackground#6a884060
- editorGutter.background#f5ede0
- editorGutter.commentRangeForeground#d0c0a8
- editorGutter.deletedBackground#b8383860
- editorGutter.modifiedBackground#b8703060
- editorHint.foreground#c84a3070
- editorHoverWidget.background#ede0d0
- editorHoverWidget.border#c84a3038
- editorHoverWidget.foreground#3a2820
- editorIndentGuide.activeBackground#d4c0a8
- editorIndentGuide.background#e8d8c8
- editorInfo.border#5a689840
- editorInfo.foreground#5a6898
- editorInlayHint.background#ede0d0
- editorInlayHint.foreground#b09878
- editorInlayHint.parameterForeground#9a7858
- editorInlayHint.typeForeground#8a6848
- editorLineNumber.activeForeground#c84a3090
- editorLineNumber.foreground#c0a888
- editorOverviewRuler.addedForeground#6a884070
- editorOverviewRuler.border#e8d8c8
- editorOverviewRuler.deletedForeground#b8383870
- editorOverviewRuler.errorForeground#b83838
- editorOverviewRuler.findMatchForeground#c84a3070
- editorOverviewRuler.infoForeground#5a6898
- editorOverviewRuler.modifiedForeground#b8703070
- editorOverviewRuler.rangeHighlightForeground#c84a3040
- editorOverviewRuler.selectionHighlightForeground#c84a3028
- editorOverviewRuler.warningForeground#a87030
- editorOverviewRuler.wordHighlightForeground#b8703070
- editorOverviewRuler.wordHighlightStrongForeground#c84a3070
- editorRuler.foreground#e8d8c8
- editorSuggestWidget.background#ede0d0
- editorSuggestWidget.border#c84a3030
- editorSuggestWidget.foreground#3a2820
- editorSuggestWidget.highlightForeground#c84a30
- editorSuggestWidget.selectedBackground#d8c4ac
- editorSuggestWidget.selectedForeground#c84a30
- editorWarning.border#a8703040
- editorWarning.foreground#a87030
- editorWhitespace.foreground#d8c8b0
- editorWidget.background#ede0d0
- editorWidget.border#c84a3040
- editorWidget.foreground#3a2820
- editorWidget.resizeBorder#c84a30
- errorForeground#b83838
- extensionButton.prominentBackground#c84a30
- extensionButton.prominentForeground#faf0e8
- extensionButton.prominentHoverBackground#e05a40
- extensionIcon.preReleaseForeground#c84a30
- extensionIcon.starForeground#a87030
- extensionIcon.verifiedForeground#6a8840
- focusBorder#c84a3060
- foreground#3a2820
- gitDecoration.addedResourceForeground#6a8840
- gitDecoration.conflictingResourceForeground#c84a30
- gitDecoration.deletedResourceForeground#b83838
- gitDecoration.ignoredResourceForeground#c0a888
- gitDecoration.modifiedResourceForeground#a87030
- gitDecoration.stageDeletedResourceForeground#d05050
- gitDecoration.stageModifiedResourceForeground#c89048
- gitDecoration.submoduleResourceForeground#907050
- gitDecoration.untrackedResourceForeground#5a6898
- icon.foreground#7a5840
- input.background#ede0d0
- input.border#c84a3030
- input.foreground#3a2820
- input.placeholderForeground#b09878
- inputOption.activeBackground#c84a3018
- inputOption.activeBorder#c84a30
- inputOption.activeForeground#c84a30
- inputValidation.errorBackground#f8e8e8
- inputValidation.errorBorder#b83838
- inputValidation.errorForeground#b83838
- inputValidation.infoBackground#e8ecf8
- inputValidation.infoBorder#5a6898
- inputValidation.warningBackground#f8f0e4
- inputValidation.warningBorder#a87030
- keybindingLabel.background#e8d8c4
- keybindingLabel.border#c84a3040
- keybindingLabel.bottomBorder#a83820
- keybindingLabel.foreground#c84a30
- list.activeSelectionBackground#ccb898
- list.activeSelectionForeground#c84a30
- list.errorForeground#b83838
- list.focusBackground#ccb898
- list.focusForeground#c84a30
- list.highlightForeground#c84a30
- list.hoverBackground#d8c8b0
- list.hoverForeground#3a2820
- list.inactiveSelectionBackground#d4c4ac
- list.inactiveSelectionForeground#7a5038
- list.warningForeground#a87030
- listFilterWidget.background#e0d0b8
- listFilterWidget.noMatchesOutline#b8383860
- listFilterWidget.outline#c84a3050
- menu.background#ede0d0
- menu.border#c84a3030
- menu.foreground#3a2820
- menu.selectionBackground#d8c4ac
- menu.selectionBorder#c84a3040
- menu.selectionForeground#c84a30
- menu.separatorBackground#d8c8b0
- menubar.selectionBackground#d8c4ac
- menubar.selectionBorder#c84a3030
- menubar.selectionForeground#c84a30
- minimap.background#ede4d4
- minimap.errorHighlight#b83838
- minimap.findMatchHighlight#c84a3070
- minimap.selectionHighlight#c84a3038
- minimap.warningHighlight#a87030
- minimapGutter.addedBackground#6a8840
- minimapGutter.deletedBackground#b83838
- minimapGutter.modifiedBackground#b87030
- minimapSlider.activeBackground#c84a3030
- minimapSlider.background#c84a3010
- minimapSlider.hoverBackground#c84a3020
- notificationCenter.border#c84a3040
- notificationCenterHeader.background#dfd0ba
- notificationCenterHeader.foreground#c84a30
- notifications.background#ede0d0
- notifications.border#c84a3030
- notifications.foreground#3a2820
- notificationsErrorIcon.foreground#b83838
- notificationsInfoIcon.foreground#5a6898
- notificationsWarningIcon.foreground#a87030
- notificationToast.border#c84a3040
- panel.background#e0d0b8
- panel.border#c8b898
- panel.dropBorder#c84a30
- panelInput.border#c84a3030
- panelSection.border#c8b898
- panelTitle.activeBorder#c84a30
- panelTitle.activeForeground#c84a30
- panelTitle.inactiveForeground#a08060
- peekView.border#c84a3040
- peekViewEditor.background#f0e6d8
- peekViewEditor.matchHighlightBackground#c84a3028
- peekViewEditor.matchHighlightBorder#c84a30
- peekViewEditorGutter.background#f0e6d8
- peekViewResult.background#e8d8c4
- peekViewResult.fileForeground#7a5840
- peekViewResult.lineForeground#a08060
- peekViewResult.matchHighlightBackground#c84a3020
- peekViewResult.selectionBackground#d8c4ac
- peekViewResult.selectionForeground#c84a30
- peekViewTitle.background#e8d4bc
- peekViewTitleDescription.foreground#9a7858
- peekViewTitleLabel.foreground#c84a30
- pickerGroup.border#c84a3030
- pickerGroup.foreground#c84a3060
- problemsErrorIcon.foreground#b83838
- problemsInfoIcon.foreground#5a6898
- problemsWarningIcon.foreground#a87030
- progressBar.background#c84a30
- quickInput.background#ede0d0
- quickInput.foreground#3a2820
- quickInputList.focusBackground#d8c4ac
- quickInputList.focusForeground#c84a30
- quickInputList.focusIconForeground#c84a30
- quickInputTitle.background#dfd0ba
- scrollbar.shadow#00000018
- scrollbarSlider.activeBackground#c84a3040
- scrollbarSlider.background#c84a3018
- scrollbarSlider.hoverBackground#c84a3028
- selection.background#c84a3020
- settings.checkboxBackground#ede0d0
- settings.checkboxBorder#c84a3030
- settings.checkboxForeground#c84a30
- settings.dropdownBackground#ede0d0
- settings.dropdownBorder#c84a3030
- settings.dropdownForeground#3a2820
- settings.headerForeground#c84a30
- settings.modifiedItemIndicator#a87030
- settings.numberInputBackground#ede0d0
- settings.numberInputBorder#c84a3030
- settings.numberInputForeground#3a2820
- settings.textInputBackground#ede0d0
- settings.textInputBorder#c84a3030
- settings.textInputForeground#3a2820
- sideBar.background#e0d0b8
- sideBar.border#c8b898
- sideBar.foreground#6a4830
- sideBarSectionHeader.background#d4c4ac
- sideBarSectionHeader.border#c8b898
- sideBarSectionHeader.foreground#8a5838
- sideBarTitle.foreground#c84a30
- statusBar.background#ccbaa0
- statusBar.border#b8a888
- statusBar.debuggingBackground#5a6898
- statusBar.debuggingForeground#f0f2f8
- statusBar.foreground#6a4830
- statusBar.noFolderBackground#ccbaa0
- statusBar.noFolderForeground#6a4830
- statusBarItem.activeBackground#c84a3020
- statusBarItem.errorBackground#b8383870
- statusBarItem.errorForeground#f8e8e8
- statusBarItem.hoverBackground#c84a3018
- statusBarItem.prominentBackground#c84a3020
- statusBarItem.prominentHoverBackground#c84a3030
- statusBarItem.remoteBackground#c84a30
- statusBarItem.remoteForeground#faf0e8
- statusBarItem.warningBackground#a8703070
- statusBarItem.warningForeground#f8f0e4
- tab.activeBackground#f5ede0
- tab.activeBorder#f5ede0
- tab.activeBorderTop#c84a30
- tab.activeForeground#c84a30
- tab.border#c8b898
- tab.hoverBackground#e8dac8
- tab.hoverForeground#3a2820
- tab.inactiveBackground#dfd0ba
- tab.inactiveForeground#9a7858
- tab.lastPinnedBorder#c84a3040
- tab.unfocusedActiveBackground#f5ede0
- tab.unfocusedActiveForeground#7a5840
- tab.unfocusedInactiveBackground#dfd0ba
- tab.unfocusedInactiveForeground#b09878
- terminal.ansiBlack#3a2820
- terminal.ansiBlue#5a6898
- terminal.ansiBrightBlack#7a5840
- terminal.ansiBrightBlue#7888b8
- terminal.ansiBrightCyan#78a898
- terminal.ansiBrightGreen#88a858
- terminal.ansiBrightMagenta#c86050
- terminal.ansiBrightRed#d05050
- terminal.ansiBrightWhite#f5ede0
- terminal.ansiBrightYellow#c89048
- terminal.ansiCyan#5a8878
- terminal.ansiGreen#6a8840
- terminal.ansiMagenta#a84030
- terminal.ansiRed#b83838
- terminal.ansiWhite#c4a882
- terminal.ansiYellow#a87030
- terminal.background#e0d0b8
- terminal.border#c8b898
- terminal.foreground#3a2820
- terminal.selectionBackground#c84a3020
- terminalCursor.background#f5ede0
- terminalCursor.foreground#c84a30
- testing.iconErrored#b83838
- testing.iconFailed#b83838
- testing.iconPassed#6a8840
- testing.iconSkipped#c0a888
- testing.runAction#c84a30
- titleBar.activeBackground#d0c0a8
- titleBar.activeForeground#5a3820
- titleBar.border#c8b898
- titleBar.inactiveBackground#d0c0a8
- titleBar.inactiveForeground#a08060
- tree.indentGuidesStroke#c0a888
- walkThrough.embeddedEditorBackground#ede0d0
- welcomePage.background#f5ede0
- welcomePage.progress.background#dfd0ba
- welcomePage.progress.foreground#c84a30
- welcomePage.tileBackground#ede0d0
- welcomePage.tileBorder#c8b898
- welcomePage.tileHoverBackground#e0d0bc
- widget.shadow#00000018
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #c0a888 | italic |
| comment.block.documentation, comment.line.documentation | #a08868 | italic |
| string, string.quoted, string.template | #6a8840 | — |
| constant.character.escape, constant.other.placeholder | #c84a30 | — |
| string.regexp, punctuation.definition.string.regexp, string.regexp.character-class | #a07040 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #c84a30 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #a87030 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #a07040 | — |
| constant.other, constant.character | #907050 | — |
| variable.other.constant | #a07040 | — |
| keyword, keyword.control, keyword.control.flow | #c84a30 | italic |
| keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic | #a84030 | — |
| keyword.operator.logical.python, keyword.operator.wordlike | #c84a30 | italic |
| keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof | #5a6898 | italic |
| storage, storage.type, storage.modifier | #5a6898 | italic |
| entity.name.function, meta.function entity.name.function | #5a8878 | — |
| meta.function-call entity.name.function, meta.function-call.generic, support.function | #3a6858 | — |
| variable.parameter, meta.function.parameters variable.other | #7a6050 | italic |
| storage.type.function.arrow | #a84030 | — |
| entity.name.class, entity.name.type.class, entity.name.type | #5a6898 | — |
| entity.other.inherited-class | #4a5888 | italic |
| entity.name.type.interface, support.type.interface | #5a6898 | italic |
| entity.name.type.parameter, variable.type.parameter | #a87030 | — |
| support.type, support.type.primitive, keyword.type | #5a6898 | — |
| variable, variable.other, variable.other.readwrite | #3a2820 | — |
| variable.language.self, variable.language.this, variable.language.super | #a07040 | italic |
| variable.other.property, variable.other.object.property, meta.property-name, support.variable.property | #6a5040 | — |
| meta.object-literal.key, meta.object.member, support.type.property-name | #7a5838 | — |
| punctuation, meta.brace, punctuation.separator, punctuation.terminator | #a08868 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #507060 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #a87030 | italic |
| entity.name.namespace, entity.name.module, entity.name.package | #5a6898 | — |
| entity.name.tag, meta.tag.sgml | #c84a30 | — |
| punctuation.definition.tag, meta.tag punctuation | #507060 | — |
| entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name | #5a6898 | — |
| 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 | #5a6898 | — |
| support.type.property-name.css, meta.property-name.css | #5a6898 | — |
| meta.property-value.css, support.constant.property-value.css | #6a8840 | — |
| constant.other.color.rgb-value.css, keyword.other.unit.css | #a87030 | — |
| markup.heading, entity.name.section.markdown | #c84a30 | bold |
| markup.bold | #a84030 | bold |
| markup.italic | #5a6898 | italic |
| markup.inline.raw | #5a8878 | — |
| markup.underline.link | #5a6898 | underline |
| markup.quote | #a08868 | italic |
| punctuation.definition.list.begin.markdown | #c84a30 | — |
| support.type.property-name.json | #5a6898 | — |
| entity.name.tag.yaml | #5a6898 | — |
| support.function.builtin.shell | #5a8878 | — |
| variable.other.normal.shell, variable.other.special.shell | #a87030 | — |
| invalid | #b83838 | strikethrough |
| invalid.deprecated | #a07040 | strikethrough |
| markup.inserted | #6a8840 | — |
| markup.deleted | #b83838 | — |
| markup.changed | #a87030 | — |