Zafiro
Publisher: zynqThemes in package: 3
A versatile collection of carefully crafted color themes for Visual Studio Code, designed for a clean, comfortable, and customizable coding experience.
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.background#1a0e10
- activityBar.border#150a0c
- activityBar.foreground#f2e5e7
- activityBar.inactiveForeground#6b3f47
- activityBarBadge.background#ff4d6d
- activityBarBadge.foreground#1a0e10
- badge.background#ff4d6d
- badge.foreground#1a0e10
- breadcrumb.activeSelectionForeground#ff4d6d
- breadcrumb.focusForeground#f2e5e7
- breadcrumb.foreground#8a636f
- breadcrumbPicker.background#220f13
- button.background#ff4d6d
- button.foreground#1a0e10
- button.hoverBackground#ff6b84
- button.secondaryBackground#3d1f24
- button.secondaryForeground#f2e5e7
- button.secondaryHoverBackground#57272e
- debugIcon.breakpointForeground#ff2e4d
- debugToolBar.background#220f13
- descriptionForeground#f2e5e7b3
- diffEditor.diagonalFill#3d1f24
- diffEditor.insertedTextBackground#7ee08730
- diffEditor.removedTextBackground#ff2e4d30
- dropdown.background#220f13
- dropdown.border#8a3646
- dropdown.foreground#f2e5e7
- editor.background#1a0e10
- editor.findMatchBackground#ffb45460
- editor.findMatchHighlightBackground#ffb45430
- editor.foreground#f2e5e7
- editor.hoverHighlightBackground#ff4d6d20
- editor.inactiveSelectionBackground#ff4d6d25
- editor.lineHighlightBackground#2a1418
- editor.lineHighlightBorder#2a1418
- editor.selectionBackground#ff4d6d40
- editor.selectionHighlightBackground#ff8fa330
- editor.wordHighlightBackground#ffb45430
- editor.wordHighlightStrongBackground#ffb45450
- editorBracketHighlight.foreground1#ff4d6d
- editorBracketHighlight.foreground2#ffb454
- editorBracketHighlight.foreground3#4ea8de
- editorBracketHighlight.foreground4#ffd166
- editorBracketHighlight.foreground5#7ee087
- editorBracketHighlight.foreground6#c77dff
- editorBracketHighlight.unexpectedBracket.foreground#ff2e4d
- editorBracketMatch.background#ff4d6d30
- editorBracketMatch.border#ff4d6d
- editorCodeLens.foreground#a8636f
- editorCursor.foreground#ff4d6d
- editorError.foreground#ff2e4d
- editorGroup.border#150a0c
- editorGroupHeader.tabsBackground#150a0c
- editorGroupHeader.tabsBorder#150a0c
- editorGutter.addedBackground#7ee08788
- editorGutter.deletedBackground#ff2e4d88
- editorGutter.modifiedBackground#ffb45488
- editorHint.foreground#7ee087
- editorHoverWidget.background#220f13
- editorHoverWidget.border#150a0c
- editorIndentGuide.activeBackground#ff4d6d70
- editorIndentGuide.background#3d1f24
- editorInfo.foreground#4ea8de
- editorLineNumber.activeForeground#ff8fa3
- editorLineNumber.foreground#6b3f47
- editorMarkerNavigation.background#220f13
- editorOverviewRuler.border#1a0e1000
- editorRuler.foreground#3d1f24
- editorSuggestWidget.background#220f13
- editorSuggestWidget.border#150a0c
- editorSuggestWidget.foreground#f2e5e7
- editorSuggestWidget.highlightForeground#ff4d6d
- editorSuggestWidget.selectedBackground#3d1f24
- editorWarning.foreground#ffb454
- editorWhitespace.foreground#3d1f24
- editorWidget.background#220f13
- errorForeground#ff2e4d
- extensionButton.prominentBackground#ff4d6d
- extensionButton.prominentForeground#1a0e10
- extensionButton.prominentHoverBackground#ff6b84
- focusBorder#ff4d6d
- foreground#f2e5e7
- gitDecoration.addedResourceForeground#7ee087
- gitDecoration.conflictingResourceForeground#c77dff
- gitDecoration.deletedResourceForeground#ff2e4d
- gitDecoration.ignoredResourceForeground#6b3f47
- gitDecoration.modifiedResourceForeground#ffd166
- gitDecoration.untrackedResourceForeground#7ee087
- input.background#150a0c
- input.border#8a3646
- input.foreground#f2e5e7
- input.placeholderForeground#8a636f
- inputOption.activeBorder#ff4d6d
- inputValidation.errorBackground#ff2e4d30
- inputValidation.errorBorder#ff2e4d
- inputValidation.infoBackground#4ea8de30
- inputValidation.infoBorder#4ea8de
- inputValidation.warningBackground#ffd16630
- inputValidation.warningBorder#ffd166
- list.activeSelectionBackground#3d1f24
- list.activeSelectionForeground#ffffff
- list.dropBackground#3d1f24
- list.focusBackground#3d1f24
- list.highlightForeground#ff4d6d
- list.hoverBackground#3d1f2460
- list.inactiveSelectionBackground#3d1f2480
- listFilterWidget.background#3d1f24
- listFilterWidget.noMatchesOutline#ff2e4d
- listFilterWidget.outline#ff4d6d
- menu.background#220f13
- menu.foreground#f2e5e7
- menu.selectionBackground#3d1f24
- menu.selectionForeground#ffffff
- menu.separatorBackground#3d1f24
- menubar.selectionBackground#3d1f24
- menubar.selectionForeground#ffffff
- notificationCenterHeader.background#220f13
- notifications.background#220f13
- notifications.border#8a3646
- notifications.foreground#f2e5e7
- notificationsErrorIcon.foreground#ff2e4d
- notificationsInfoIcon.foreground#4ea8de
- notificationsWarningIcon.foreground#ffd166
- panel.background#150a0c
- panel.border#ff4d6d
- panelTitle.activeBorder#ff4d6d
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#8a636f
- peekView.border#ff4d6d
- peekViewEditor.background#150a0c
- peekViewEditor.matchHighlightBackground#ffb45440
- peekViewResult.background#220f13
- peekViewResult.matchHighlightBackground#ffb45440
- peekViewTitle.background#220f13
- peekViewTitleDescription.foreground#f2e5e799
- peekViewTitleLabel.foreground#f2e5e7
- progressBar.background#ff4d6d
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#ff4d6d80
- scrollbarSlider.background#ff4d6d30
- scrollbarSlider.hoverBackground#ff4d6d50
- selection.background#ff4d6d55
- sideBar.background#150a0c
- sideBar.border#150a0c
- sideBar.foreground#e0c7cb
- sideBarSectionHeader.background#1a0e10
- sideBarSectionHeader.border#150a0c
- sideBarTitle.foreground#f2e5e7
- statusBar.background#ff4d6d
- statusBar.border#150a0c
- statusBar.debuggingBackground#c77dff
- statusBar.debuggingForeground#1a0e10
- statusBar.foreground#1a0e10
- statusBar.noFolderBackground#8a3646
- statusBarItem.hoverBackground#ff8fa3
- statusBarItem.remoteBackground#4ea8de
- statusBarItem.remoteForeground#1a0e10
- tab.activeBackground#1a0e10
- tab.activeBorder#ff4d6d
- tab.activeForeground#ffffff
- tab.border#150a0c
- tab.inactiveBackground#150a0c
- tab.inactiveForeground#8a636f
- tab.unfocusedActiveBorder#8a3646
- terminal.ansiBlack#2a1418
- terminal.ansiBlue#4ea8de
- terminal.ansiBrightBlack#6b3f47
- terminal.ansiBrightBlue#64c9ff
- terminal.ansiBrightCyan#8ff0d6
- terminal.ansiBrightGreen#a8e6a3
- terminal.ansiBrightMagenta#e0aaff
- terminal.ansiBrightRed#ff4d6d
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffe29a
- terminal.ansiCyan#56e0c4
- terminal.ansiGreen#7ee087
- terminal.ansiMagenta#c77dff
- terminal.ansiRed#ff2e4d
- terminal.ansiWhite#f2e5e7
- terminal.ansiYellow#ffd166
- terminal.background#1a0e10
- terminal.foreground#f2e5e7
- titleBar.activeBackground#1a0e10
- titleBar.activeForeground#f2e5e7
- titleBar.border#150a0c
- titleBar.inactiveBackground#1a0e10
- titleBar.inactiveForeground#6b3f47
- tree.indentGuidesStroke#3d1f24
- welcomePage.buttonBackground#3d1f24
- welcomePage.buttonHoverBackground#57272e
- widget.shadow#00000066
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #8a636f | italic |
| variable, string constant.other.placeholder, support.variable | #f2e5e7 | — |
| variable.other.constant, variable.other.readwrite.alias, meta.definition.variable variable.other.constant | #ffb454 | bold |
| variable.parameter, meta.parameter, variable.parameter.function | #e0aaff | italic |
| variable.other.property, variable.other.object.property, meta.object-literal.key | #ff8fa3 | — |
| constant.other.color | #56e0c4 | — |
| invalid, invalid.illegal | #1a0e10 | — |
| keyword, keyword.other | #ff4d6d | bold |
| keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.switch, keyword.control.return, keyword.control.new, keyword.control.flow.jump | #ff2e4d | bold |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.module, keyword.other.import, keyword.package.go, keyword.import.go, keyword.other.using | #ff4d6d | — |
| storage.type, storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.struct, storage.type.namespace | #ff4d6d | bold |
| storage.modifier, storage.modifier.async, storage.modifier.static, storage.modifier.access-control, keyword.modifier | #ff8fa3 | italic |
| storage.type.const, storage.type.let, storage.type.var | #ff4d6d | — |
| storage.type.primitive, storage.type.primitive.c, storage.type.primitive.cpp, storage.type.built-in, storage.type.built-in.primitive, storage.type.built-in.primitive.c, storage.type.built-in.primitive.cpp, support.type.primitive, support.type.built-in, keyword.type.go, storage.type.numeric.go, storage.type.built-in.rust, storage.type.primitive.java, storage.type.built-in.cs, storage.type.built-in.primitive.cs | #56e0c4 | — |
| constant.language, variable.language, constant.language.boolean, support.constant.property-value | #ffb454 | italic bold |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution | #c77dff | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #ff4d6d | bold |
| entity.name.function, meta.function.method, meta.definition.function entity.name.function | #4ea8de | bold |
| meta.function-call, meta.function-call entity.name.function, variable.function, support.function, keyword.other.special-method, entity.name.function.member, meta.method-call meta.method | #64c9ff | — |
| support.function.builtin, support.function.magic, support.function.construct | #56e0c4 | — |
| entity.name.function.macro, support.function.macro | #56e0c4 | italic |
| entity.name.function.constructor, variable.function.constructor | #ffd166 | bold |
| meta.block variable.other | #f2e5e7 | — |
| support.other.variable, string.other.link | #f2e5e7 | — |
| constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, entity.other.attribute-name | #ffb454 | — |
| string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js | #a8e6a3 | — |
| entity.name.class, entity.name.type.class, entity.name.type.interface, entity.name.type.struct, entity.name.type.enum, entity.name.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types | #ffd166 | bold |
| support.type | #56e0c4 | — |
| entity.name.namespace, entity.name.type.namespace | #ffd166 | italic |
| source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name | #56e0c4 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #f2e5e7 | — |
| variable.language.this, variable.language.self, variable.parameter.function.language.special.self.python | #ff4d6d | italic bold |
| meta.object-literal.key, support.variable.property, support.variable.property.dom | #ff8fa3 | — |
| support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color | #ffb454 | — |
| string.regexp | #56e0c4 | — |
| constant.character.escape | #56e0c4 | — |
| *url*, *link*, *uri* | — | underline |
| meta.decorator, punctuation.decorator, entity.name.function.decorator, storage.type.annotation.java, meta.attribute.rust, meta.attribute.cs, punctuation.definition.attribute.cs, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #ffd166 | italic |
| source.json meta.structure.dictionary.json support.type.property-name.json | #ff8fa3 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #ffb454 | — |
| meta.function.python entity.name.function.python, entity.name.class.python | #4ea8de | bold |
| entity.name.function.decorator.python, meta.function.decorator.python punctuation.definition.decorator.python | #ffd166 | italic |
| entity.name.package.go | #ffd166 | — |
| meta.preprocessor, punctuation.definition.directive.c, keyword.control.directive | #ff4d6d | — |
| variable.other.php, punctuation.definition.variable.php | #f2e5e7 | — |
| constant.other.symbol.ruby | #56e0c4 | — |
| markup.heading.markdown, entity.name.section.markdown | #ff4d6d | bold |
| markup.bold.markdown | #ffb454 | bold |
| markup.italic.markdown | #c77dff | italic |
| markup.underline.link.markdown, string.other.link.title.markdown | #4ea8de | — |
| markup.inline.raw.markdown, markup.fenced_code.block.markdown | #a8e6a3 | — |
| entity.name.tag.yaml | #ff8fa3 | — |
| entity.other.attribute-name.html, entity.other.attribute-name.xml | #ffb454 | — |
| keyword.other.DML, keyword.other.DDL | #ff2e4d | bold |
| variable.other.normal.shell, punctuation.definition.variable.shell | #f2e5e7 | — |