Cita Theme
Publisher: Silvestar BistrovićThemes in package: 2
Light and dark themes in mint, pink, and navy, based on the colors of silvestar.codes.
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#FFFFFF14
- activityBar.activeBorder#63F2C5
- activityBar.background#011830
- activityBar.border#0A3A6B
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#FFFFFF80
- activityBarBadge.background#63F2C5
- activityBarBadge.foreground#043A73
- activityBarTop.activeBorder#63F2C5
- activityBarTop.foreground#E6F0FA
- activityBarTop.inactiveForeground#5F7FA8
- badge.background#FF5C85
- badge.foreground#011830
- breadcrumb.activeSelectionForeground#E6F0FA
- breadcrumb.background#02264D
- breadcrumb.focusForeground#E6F0FA
- breadcrumb.foreground#5F7FA8
- breadcrumbPicker.background#011D3B
- button.background#63F2C5
- button.foreground#043A73
- button.hoverBackground#9BF7DA
- button.secondaryBackground#043A73
- button.secondaryForeground#E6F0FA
- button.secondaryHoverBackground#06447F
- button.separator#043A7366
- charts.blue#8FD3FF
- charts.foreground#E6F0FA
- charts.green#63F2C5
- charts.lines#5F7FA8
- charts.orange#FFD27A
- charts.purple#FF9EB5
- charts.red#FF5C85
- charts.yellow#FFD27A
- checkbox.background#011830
- checkbox.border#0A3A6B
- checkbox.foreground#E6F0FA
- commandCenter.activeBackground#FFFFFF1A
- commandCenter.activeForeground#E6F0FA
- commandCenter.background#FFFFFF0D
- commandCenter.border#0A3A6B
- commandCenter.foreground#9DB4D3
- debugIcon.breakpointForeground#FF3366
- debugToolBar.background#011D3B
- debugToolBar.border#0A3A6B
- descriptionForeground#9DB4D3
- diffEditor.border#0A3A6B
- diffEditor.diagonalFill#0A3A6B99
- diffEditor.insertedLineBackground#63F2C514
- diffEditor.insertedTextBackground#63F2C526
- diffEditor.removedLineBackground#FF33661A
- diffEditor.removedTextBackground#FF336633
- diffEditorGutter.insertedLineBackground#63F2C533
- diffEditorGutter.removedLineBackground#FF336633
- disabledForeground#5F7FA8
- dropdown.background#011830
- dropdown.border#0A3A6B
- dropdown.foreground#E6F0FA
- dropdown.listBackground#011D3B
- editor.background#02264D
- editor.findMatchBackground#FF336666
- editor.findMatchBorder#FF5C85
- editor.findMatchHighlightBackground#FF33663D
- editor.findRangeHighlightBackground#FFFFFF0D
- editor.focusedStackFrameHighlightBackground#63F2C533
- editor.foldBackground#FFFFFF0A
- editor.foreground#E6F0FA
- editor.hoverHighlightBackground#63F2C51F
- editor.inactiveSelectionBackground#63F2C51F
- editor.lineHighlightBackground#043A73
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#FFFFFF0D
- editor.selectionBackground#63F2C540
- editor.selectionHighlightBackground#8FD3FF26
- editor.stackFrameHighlightBackground#FFD27A33
- editor.wordHighlightBackground#8FD3FF26
- editor.wordHighlightStrongBackground#63F2C52E
- editorBracketHighlight.foreground1#63F2C5
- editorBracketHighlight.foreground2#FF5C85
- editorBracketHighlight.foreground3#8FD3FF
- editorBracketHighlight.foreground4#FFD27A
- editorBracketHighlight.foreground5#FF9EB5
- editorBracketHighlight.foreground6#B8E6FF
- editorBracketHighlight.unexpectedBracket.foreground#FF5C85
- editorBracketMatch.background#63F2C526
- editorBracketMatch.border#63F2C599
- editorCodeLens.foreground#5F7FA8
- editorCursor.foreground#63F2C5
- editorError.foreground#FF5C85
- editorGhostText.foreground#5F7FA8
- editorGroup.border#0A3A6B
- editorGroup.dropBackground#63F2C51F
- editorGroupHeader.noTabsBackground#02264D
- editorGroupHeader.tabsBackground#011D3B
- editorGroupHeader.tabsBorder#0A3A6B
- editorGutter.addedBackground#63F2C5
- editorGutter.background#02264D
- editorGutter.deletedBackground#FF5C85
- editorGutter.foldingControlForeground#5F7FA8
- editorGutter.modifiedBackground#8FD3FF
- editorHint.foreground#63F2C5
- editorHoverWidget.background#011D3B
- editorHoverWidget.border#0A3A6B
- editorIndentGuide.activeBackground1#5F7FA8
- editorIndentGuide.background1#0A3A6BFF
- editorInfo.foreground#8FD3FF
- editorInlayHint.background#FFFFFF0D
- editorInlayHint.foreground#9DB4D3
- editorLineNumber.activeForeground#63F2C5
- editorLineNumber.foreground#5F7FA8
- editorLink.activeForeground#63F2C5
- editorMarkerNavigation.background#011D3B
- editorMarkerNavigationError.background#FF5C85
- editorMarkerNavigationInfo.background#8FD3FF
- editorMarkerNavigationWarning.background#FFD27A
- editorOverviewRuler.addedForeground#63F2C5
- editorOverviewRuler.border#00000000
- editorOverviewRuler.deletedForeground#FF5C85
- editorOverviewRuler.errorForeground#FF5C85
- editorOverviewRuler.findMatchForeground#FF5C85B3
- editorOverviewRuler.infoForeground#8FD3FF
- editorOverviewRuler.modifiedForeground#8FD3FF
- editorOverviewRuler.selectionHighlightForeground#63F2C599
- editorOverviewRuler.warningForeground#FFD27A
- editorRuler.foreground#0A3A6B
- editorStickyScroll.background#02264D
- editorStickyScroll.shadow#0000004D
- editorStickyScrollHover.background#06447F
- editorSuggestWidget.background#011D3B
- editorSuggestWidget.border#0A3A6B
- editorSuggestWidget.focusHighlightForeground#63F2C5
- editorSuggestWidget.foreground#E6F0FA
- editorSuggestWidget.highlightForeground#63F2C5
- editorSuggestWidget.selectedBackground#043A73
- editorSuggestWidget.selectedForeground#E6F0FA
- editorUnnecessaryCode.opacity#000000A0
- editorWarning.foreground#FFD27A
- editorWhitespace.foreground#5F7FA866
- editorWidget.background#011D3B
- editorWidget.border#0A3A6B
- editorWidget.foreground#E6F0FA
- errorForeground#FF5C85
- extensionBadge.remoteBackground#63F2C5
- extensionBadge.remoteForeground#043A73
- extensionButton.prominentBackground#63F2C5
- extensionButton.prominentForeground#043A73
- extensionButton.prominentHoverBackground#9BF7DA
- focusBorder#63F2C599
- foreground#E6F0FA
- gitDecoration.addedResourceForeground#63F2C5
- gitDecoration.conflictingResourceForeground#FF5C85
- gitDecoration.deletedResourceForeground#FF5C85
- gitDecoration.ignoredResourceForeground#5F7FA8
- gitDecoration.modifiedResourceForeground#8FD3FF
- gitDecoration.renamedResourceForeground#FFD27A
- gitDecoration.stageDeletedResourceForeground#FF5C85
- gitDecoration.stageModifiedResourceForeground#8FD3FF
- gitDecoration.submoduleResourceForeground#FF9EB5
- gitDecoration.untrackedResourceForeground#63F2C5
- icon.foreground#9DB4D3
- input.background#011830
- input.border#0A3A6B
- input.foreground#E6F0FA
- input.placeholderForeground#5F7FA8
- inputOption.activeBackground#63F2C533
- inputOption.activeBorder#63F2C5
- inputOption.activeForeground#E6F0FA
- inputValidation.errorBackground#011D3B
- inputValidation.errorBorder#FF5C85
- inputValidation.infoBackground#011D3B
- inputValidation.infoBorder#8FD3FF
- inputValidation.warningBackground#011D3B
- inputValidation.warningBorder#FFD27A
- keybindingLabel.background#FFFFFF0F
- keybindingLabel.border#0A3A6B
- keybindingLabel.bottomBorder#0A3A6B
- keybindingLabel.foreground#E6F0FA
- list.activeSelectionBackground#043A73
- list.activeSelectionForeground#E6F0FA
- list.dropBackground#63F2C526
- list.errorForeground#FF5C85
- list.focusBackground#043A73
- list.focusHighlightForeground#63F2C5
- list.focusOutline#63F2C599
- list.highlightForeground#63F2C5
- list.hoverBackground#043A7380
- list.hoverForeground#E6F0FA
- list.inactiveSelectionBackground#043A73B3
- list.inactiveSelectionForeground#E6F0FA
- list.warningForeground#FFD27A
- menu.background#011D3B
- menu.border#0A3A6B
- menu.foreground#E6F0FA
- menu.selectionBackground#043A73
- menu.selectionForeground#E6F0FA
- menu.separatorBackground#0A3A6B
- merge.commonContentBackground#5F7FA826
- merge.commonHeaderBackground#5F7FA866
- merge.currentContentBackground#63F2C526
- merge.currentHeaderBackground#63F2C566
- merge.incomingContentBackground#8FD3FF26
- merge.incomingHeaderBackground#8FD3FF66
- minimap.background#02264D
- minimap.errorHighlight#FF5C85
- minimap.findMatchHighlight#FF336699
- minimap.selectionHighlight#63F2C580
- minimap.warningHighlight#FFD27A
- minimapGutter.addedBackground#63F2C5
- minimapGutter.deletedBackground#FF5C85
- minimapGutter.modifiedBackground#8FD3FF
- notificationCenterHeader.background#011830
- notificationCenterHeader.foreground#E6F0FA
- notificationLink.foreground#63F2C5
- notifications.background#011D3B
- notifications.border#0A3A6B
- notifications.foreground#E6F0FA
- notificationsErrorIcon.foreground#FF5C85
- notificationsInfoIcon.foreground#8FD3FF
- notificationsWarningIcon.foreground#FFD27A
- panel.background#011D3B
- panel.border#0A3A6B
- panelInput.border#0A3A6B
- panelSection.border#0A3A6B
- panelTitle.activeBorder#63F2C5
- panelTitle.activeForeground#E6F0FA
- panelTitle.inactiveForeground#5F7FA8
- peekView.border#63F2C5
- peekViewEditor.background#011D3B
- peekViewEditor.matchHighlightBackground#FF33663D
- peekViewResult.background#011D3B
- peekViewResult.fileForeground#E6F0FA
- peekViewResult.lineForeground#9DB4D3
- peekViewResult.matchHighlightBackground#FF33663D
- peekViewResult.selectionBackground#043A73
- peekViewResult.selectionForeground#E6F0FA
- peekViewTitle.background#011830
- peekViewTitleDescription.foreground#9DB4D3
- peekViewTitleLabel.foreground#E6F0FA
- pickerGroup.border#0A3A6B
- pickerGroup.foreground#63F2C5
- progressBar.background#63F2C5
- quickInput.background#011D3B
- quickInput.foreground#E6F0FA
- quickInputList.focusBackground#043A73
- quickInputList.focusForeground#E6F0FA
- sash.hoverBorder#63F2C5
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#63F2C580
- scrollbarSlider.background#63F2C533
- scrollbarSlider.hoverBackground#63F2C559
- selection.background#63F2C540
- settings.focusedRowBackground#FFFFFF0A
- settings.headerForeground#E6F0FA
- settings.modifiedItemIndicator#63F2C5
- settings.rowHoverBackground#FFFFFF0A
- sideBar.background#011D3B
- sideBar.border#0A3A6B
- sideBar.foreground#9DB4D3
- sideBarSectionHeader.background#011D3B
- sideBarSectionHeader.border#0A3A6B
- sideBarSectionHeader.foreground#E6F0FA
- sideBarTitle.foreground#E6F0FA
- statusBar.background#011830
- statusBar.border#0A3A6B
- statusBar.debuggingBackground#FF5C85
- statusBar.debuggingBorder#FF5C85
- statusBar.debuggingForeground#011830
- statusBar.foreground#9DB4D3
- statusBar.noFolderBackground#043A73
- statusBar.noFolderForeground#E6F0FA
- statusBarItem.activeBackground#FFFFFF2E
- statusBarItem.errorBackground#FF5C85
- statusBarItem.errorForeground#011830
- statusBarItem.hoverBackground#FFFFFF1F
- statusBarItem.prominentBackground#63F2C533
- statusBarItem.prominentHoverBackground#63F2C54D
- statusBarItem.remoteBackground#63F2C5
- statusBarItem.remoteForeground#043A73
- statusBarItem.warningBackground#FFD27A
- statusBarItem.warningForeground#043A73
- tab.activeBackground#02264D
- tab.activeBorder#02264D
- tab.activeBorderTop#63F2C5
- tab.activeForeground#E6F0FA
- tab.activeModifiedBorder#FF5C85
- tab.border#0A3A6B
- tab.hoverBackground#02264D
- tab.hoverForeground#E6F0FA
- tab.inactiveBackground#011D3B
- tab.inactiveForeground#5F7FA8
- tab.inactiveModifiedBorder#FF5C8580
- tab.lastPinnedBorder#0A3A6B
- tab.unfocusedActiveBorderTop#63F2C566
- tab.unfocusedActiveForeground#9DB4D3
- terminal.ansiBlack#011830
- terminal.ansiBlue#8FD3FF
- terminal.ansiBrightBlack#5F7FA8
- terminal.ansiBrightBlue#B8E6FF
- terminal.ansiBrightCyan#AFEFF7
- terminal.ansiBrightGreen#9BF7DA
- terminal.ansiBrightMagenta#FFC2D1
- terminal.ansiBrightRed#FF8AA8
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFE2A8
- terminal.ansiCyan#7FE3F0
- terminal.ansiGreen#63F2C5
- terminal.ansiMagenta#FF9EB5
- terminal.ansiRed#FF5C85
- terminal.ansiWhite#E6F0FA
- terminal.ansiYellow#FFD27A
- terminal.background#011D3B
- terminal.border#0A3A6B
- terminal.foreground#E6F0FA
- terminal.selectionBackground#63F2C540
- terminalCommandDecoration.defaultBackground#5F7FA8
- terminalCommandDecoration.errorBackground#FF5C85
- terminalCommandDecoration.successBackground#63F2C5
- terminalCursor.foreground#63F2C5
- testing.iconFailed#FF5C85
- testing.iconPassed#63F2C5
- testing.iconQueued#FFD27A
- textBlockQuote.background#011D3B
- textBlockQuote.border#63F2C5
- textCodeBlock.background#011D3B
- textLink.activeForeground#8FD3FF
- textLink.foreground#63F2C5
- textPreformat.background#FFFFFF14
- textPreformat.foreground#63F2C5
- textSeparator.foreground#0A3A6B
- titleBar.activeBackground#011830
- titleBar.activeForeground#E6F0FA
- titleBar.border#0A3A6B
- titleBar.inactiveBackground#011830
- titleBar.inactiveForeground#5F7FA8
- toolbar.hoverBackground#FFFFFF14
- tree.inactiveIndentGuidesStroke#0A3A6B80
- tree.indentGuidesStroke#0A3A6B
- walkThrough.embeddedEditorBackground#011D3B
- welcomePage.tileBackground#011D3B
- welcomePage.tileBorder#0A3A6B
- welcomePage.tileHoverBackground#06447F
- widget.border#0A3A6B
- widget.shadow#0000004D
- window.activeBorder#0A3A6B
- window.inactiveBorder#0A3A6B
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| Default | #E6F0FA | — |
| comment, punctuation.definition.comment, string.comment | #7F9CC2 | italic |
| storage.type.class.jsdoc, keyword.other.phpdoc, comment.block.documentation storage.type | #7F9CC2 | bold italic |
| keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.logical.python, keyword.operator.wordlike, variable.language.this, variable.language.self, variable.language.super | #FF5C85 | — |
| keyword.operator, punctuation.accessor, punctuation.separator.key-value | #B3C7E0 | — |
| punctuation, meta.brace, punctuation.definition.tag, punctuation.separator, punctuation.terminator | #B3C7E0 | — |
| string, punctuation.definition.string, string.template, markup.inline.raw.string | #63F2C5 | — |
| punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression | #FF5C85 | — |
| string.regexp, constant.character.escape, constant.other.character-class | #FFD27A | — |
| constant.numeric, constant.language, constant.character, constant.other, variable.other.constant, support.constant, keyword.other.unit | #FF9EB5 | — |
| entity.name.function, meta.function-call entity.name.function, support.function, variable.function, meta.function-call.generic, entity.name.method | #8FD3FF | — |
| entity.name.type, entity.name.class, entity.name.namespace, entity.other.inherited-class, support.type, support.class, storage.type.primitive, storage.type.built-in, entity.name.type.module | #FFD27A | — |
| variable, variable.other.readwrite, meta.definition.variable | #E6F0FA | — |
| variable.parameter, meta.parameter | #E6F0FA | italic |
| variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property, entity.name.tag.yaml | #B8E6FF | — |
| meta.decorator, punctuation.decorator, entity.name.function.decorator | #FFD27A | italic |
| entity.name.tag | #FF5C85 | — |
| support.class.component, entity.name.tag.component | #FFD27A | — |
| entity.other.attribute-name | #FFD27A | italic |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #8FD3FF | |
| support.type.property-name, support.type.vendored.property-name, meta.property-name | #B8E6FF | — |
| support.constant.property-value, support.constant.font-name, support.constant.color, constant.other.color | #63F2C5 | — |
| variable.css, variable.argument.css, variable.scss, variable.other.less | #FF9EB5 | — |
| keyword.control.at-rule, punctuation.definition.keyword.css | #FF5C85 | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #B8E6FF | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #8FD3FF | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #FFD27A | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #FF5C85 | bold |
| markup.bold, punctuation.definition.bold | #FFD27A | bold |
| markup.italic, punctuation.definition.italic | #FF9EB5 | italic |
| markup.strikethrough | — | strikethrough |
| markup.underline.link, string.other.link, constant.other.reference.link.markdown | #63F2C5 | — |
| meta.link.inline.markdown string.other.link.title.markdown, string.other.link.description | #8FD3FF | — |
| markup.inline.raw, markup.fenced_code.block.markdown, markup.raw | #B8E6FF | — |
| markup.quote, punctuation.definition.quote.begin.markdown | #7F9CC2 | italic |
| punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown | #FF5C85 | — |
| markup.inserted | #63F2C5 | — |
| markup.deleted | #FF5C85 | — |
| markup.changed | #8FD3FF | — |
| variable.other.normal.shell, variable.other.special.shell, punctuation.definition.variable.shell | #FF9EB5 | — |
| support.function.magic.python, support.variable.magic.python | #8FD3FF | italic |
| invalid, invalid.illegal | #FF5C85 | — |
| invalid.deprecated | #FFD27A | strikethrough |