Naviary Sanctuary Theme
Publisher: naviary-sanctuaryThemes in package: 6
Comfortable light and dark themes with balanced contrast, vivid syntax colors, and Naviary orange accents.
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#2B323E
- activityBar.border#364052
- activityBar.foreground#E5E9F0
- activityBar.inactiveForeground#A0ABBC
- activityBarBadge.background#FF781D
- activityBarBadge.foreground#11131A
- badge.background#465267
- badge.foreground#F8FAFC
- button.background#FF781D
- button.foreground#11131A
- button.hoverBackground#FF9A4A
- button.secondaryBackground#353D4C
- button.secondaryForeground#E5E9F0
- button.secondaryHoverBackground#3D485A
- commandCenter.border#465267
- descriptionForeground#B0BAC8
- diffEditor.insertedLineBackground#A3BE8C18
- diffEditor.insertedTextBackground#A3BE8C22
- diffEditor.removedLineBackground#FF4D4D18
- diffEditor.removedTextBackground#FF4D4D2E
- disabledForeground#8995A6
- dropdown.background#353D4C
- dropdown.border#465267
- dropdown.foreground#D8DEE9
- editor.background#2E3440
- editor.findMatchBackground#FF781D55
- editor.findMatchHighlightBackground#88C0D033
- editor.findRangeHighlightBackground#36405288
- editor.foreground#D8DEE9
- editor.hoverHighlightBackground#37455766
- editor.inactiveSelectionBackground#37455766
- editor.lineHighlightBackground#333B48
- editor.lineHighlightBorder#00000000
- editor.selectionBackground#40556A
- editor.selectionHighlightBackground#4B5D7260
- editor.wordHighlightBackground#46526755
- editor.wordHighlightStrongBackground#FF781D20
- editorActionList.background#353D4C
- editorActionList.focusForeground#F8FAFC
- editorActionList.foreground#E5E9F0
- editorBracketHighlight.foreground1#D8DEE9
- editorBracketHighlight.foreground2#98C8D6
- editorBracketHighlight.foreground3#B7A6E0
- editorBracketHighlight.foreground4#D7B978
- editorBracketHighlight.foreground5#A3BE8C
- editorBracketHighlight.foreground6#E08A70
- editorBracketHighlight.unexpectedBracket.foreground#FF6B6B
- editorBracketMatch.background#46526744
- editorBracketMatch.border#88C0D0
- editorCursor.background#2E3440
- editorCursor.foreground#FF9A4A
- editorError.foreground#FF6B6B
- editorGroup.border#364052
- editorGroupHeader.tabsBackground#2B323E
- editorGroupHeader.tabsBorder#364052
- editorGutter.addedBackground#B3C996
- editorGutter.background#2E3440
- editorGutter.deletedBackground#FF6B6B
- editorGutter.modifiedBackground#E6A03D
- editorHint.foreground#A3BE8C
- editorHoverWidget.background#353D4C
- editorHoverWidget.border#465267
- editorHoverWidget.foreground#E5E9F0
- editorIndentGuide.activeBackground1#556276
- editorIndentGuide.background1#364052
- editorInfo.foreground#88C0D0
- editorLineNumber.activeForeground#C7D0DC
- editorLineNumber.foreground#94A0B2
- editorOverviewRuler.border#00000000
- editorOverviewRuler.errorForeground#FF4D4DCC
- editorOverviewRuler.findMatchForeground#FF781D99
- editorOverviewRuler.infoForeground#88C0D099
- editorOverviewRuler.warningForeground#EBCB8BCC
- editorWarning.foreground#EBCB8B
- editorWhitespace.foreground#465267
- editorWidget.background#353D4C
- editorWidget.border#465267
- editorWidget.foreground#E5E9F0
- errorForeground#FF6B6B
- focusBorder#FF781D99
- foreground#D8DEE9
- gitDecoration.addedResourceForeground#B3C996
- gitDecoration.deletedResourceForeground#FF6B6B
- gitDecoration.ignoredResourceForeground#94A0B2
- gitDecoration.modifiedResourceForeground#EBCB8B
- gitDecoration.untrackedResourceForeground#B4CC9A
- input.background#353D4C
- input.border#465267
- input.foreground#E5E9F0
- input.placeholderForeground#A1ACBC
- inputOption.activeBorder#FF781D88
- inputValidation.errorBackground#432327
- inputValidation.errorBorder#FF4D4D
- inputValidation.infoBackground#29384A
- inputValidation.infoBorder#88C0D0
- inputValidation.warningBackground#3E3426
- inputValidation.warningBorder#EBCB8B
- list.activeSelectionBackground#40556A
- list.activeSelectionForeground#F8FAFC
- list.activeSelectionIconForeground#FF9A4A
- list.errorForeground#FF6B6B
- list.focusBackground#40556A
- list.focusForeground#F8FAFC
- list.focusOutline#00000000
- list.highlightForeground#FF781D
- list.hoverBackground#384454
- list.hoverForeground#F8FAFC
- list.inactiveSelectionBackground#343E4D
- list.inactiveSelectionForeground#D8DEE9
- list.warningForeground#EBCB8B
- menu.background#353D4C
- menu.foreground#E5E9F0
- menu.selectionBackground#384454
- menu.selectionForeground#F5F7FA
- menu.separatorBackground#465267
- notifications.background#353D4C
- notifications.border#465267
- notifications.foreground#E5E9F0
- panel.background#2B323E
- panel.border#364052
- panelTitle.activeBorder#FF781D
- panelTitle.activeForeground#F5F7FA
- panelTitle.inactiveForeground#A0ABBC
- peekView.border#465267
- peekViewEditor.background#2E3440
- peekViewEditor.matchHighlightBackground#FF781D33
- peekViewResult.background#333A48
- peekViewResult.selectionBackground#40556A
- peekViewTitle.background#2E3440
- peekViewTitleLabel.foreground#F5F7FA
- progressBar.background#FF781D
- quickInput.background#353D4C
- quickInput.foreground#E5E9F0
- quickInputList.focusBackground#40556A
- quickInputList.focusForeground#F8FAFC
- quickInputList.focusIconForeground#FF9A4A
- quickInputTitle.background#333B48
- scrollbar.shadow#1B202B
- scrollbarSlider.activeBackground#FF781D88
- scrollbarSlider.background#46526788
- scrollbarSlider.hoverBackground#59687DAA
- sideBar.background#2B323E
- sideBar.border#364052
- sideBar.foreground#C7D0DC
- sideBarSectionHeader.background#333B48
- sideBarSectionHeader.border#465267
- sideBarSectionHeader.foreground#D8DEE9
- sideBarTitle.foreground#F5F7FA
- statusBar.background#2B323E
- statusBar.border#364052
- statusBar.debuggingBackground#7A3A12
- statusBar.debuggingForeground#FFF8F3
- statusBar.foreground#D8DEE9
- statusBar.noFolderBackground#2B323E
- statusBarItem.hoverBackground#384454
- statusBarItem.prominentBackground#353D4C
- statusBarItem.remoteBackground#FF781D
- statusBarItem.remoteForeground#11131A
- tab.activeBackground#333B48
- tab.activeBorderTop#FF781D
- tab.activeForeground#F5F7FA
- tab.border#364052
- tab.hoverBackground#384454
- tab.hoverForeground#E5E9F0
- tab.inactiveBackground#2B323E
- tab.inactiveForeground#A0ABBC
- tab.unfocusedActiveBorderTop#465267
- terminal.ansiBlack#94A0B2
- terminal.ansiBlue#8FB9D8
- terminal.ansiBrightBlack#A0ABBC
- terminal.ansiBrightBlue#A5B4E8
- terminal.ansiBrightCyan#8FBCBB
- terminal.ansiBrightGreen#B3C996
- terminal.ansiBrightMagenta#D0B0D6
- terminal.ansiBrightRed#FF7A7A
- terminal.ansiBrightWhite#F8FAFC
- terminal.ansiBrightYellow#FFD76A
- terminal.ansiCyan#98C8D6
- terminal.ansiGreen#A3BE8C
- terminal.ansiMagenta#C9A4C1
- terminal.ansiRed#FF6B6B
- terminal.ansiWhite#E5E9F0
- terminal.ansiYellow#EBCB8B
- terminal.background#2E3440
- terminal.foreground#D8DEE9
- terminalCursor.foreground#FF9A4A
- textBlockQuote.background#333B48
- textBlockQuote.border#465267
- textCodeBlock.background#333B48
- textLink.activeForeground#FF9A4A
- textLink.foreground#88C0D0
- textPreformat.foreground#D7B978
- textSeparator.foreground#465267
- titleBar.activeBackground#2B323E
- titleBar.activeForeground#D8DEE9
- titleBar.border#364052
- titleBar.inactiveBackground#2B323ECC
- titleBar.inactiveForeground#A0ABBC
- tree.indentGuidesStroke#465267
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #96A3B4 | italic |
| meta.jsx.children, meta.jsx.children.tsx, meta.jsx.children.js, text.html.basic, text.html.derivative, text.html.markdown | #D8DEE9 | — |
| string, markup.inline.raw, string.template | #B3C996 | — |
| constant.numeric, constant.language, constant.character.escape | #C9A4C1 | — |
| keyword, storage, storage.type, storage.modifier | #E08A70 | — |
| variable.language.this, variable.language.this.ts, variable.language.this.js | #E08A70 | — |
| keyword.operator.new, keyword.operator.new.js, keyword.operator.new.ts, keyword.operator.expression.new, keyword.operator.expression.new.js, keyword.operator.expression.new.ts, keyword.control.new | #FF781D | — |
| keyword.operator.typeof, keyword.operator.typeof.js, keyword.operator.typeof.jsx, keyword.operator.typeof.ts, keyword.operator.typeof.tsx, keyword.operator.expression.typeof, keyword.operator.expression.typeof.js, keyword.operator.expression.typeof.jsx, keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx | #C9A4C1 | — |
| keyword.operator, storage.type.function.arrow | #AAB5C4 | — |
| entity.name.function, support.function, meta.function-call, variable.function | #98C8D6 | — |
| variable, variable.other, variable.other.readwrite, meta.definition.variable.name, support.variable | #D8DEE9 | — |
| variable.other.property, meta.object-literal.key, support.variable.property | #D8DEE9 | — |
| entity.name.function.method, meta.method-call, meta.method-call entity.name.function, meta.method-call variable.function, meta.member.access entity.name.function, meta.member.access variable.function, meta.property.access entity.name.function, meta.property.object entity.name.function, support.function.method | #98C8D6 | — |
| variable.parameter, meta.parameters | #E5E9F0 | — |
| entity.name.type, entity.name.class, entity.name.interface, entity.other.inherited-class, support.type, support.class | #B7A6E0 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator, meta.decorator entity.name.function, meta.decorator support.function, meta.decorator support.type, meta.decorator variable.other | #D0B0D6 | — |
| attribute.name, entity.other.attribute-name | #88C0D0 | — |
| punctuation, meta.brace, meta.delimiter | #AAB5C4 | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.vue, entity.name.tag.svelte, entity.name.tag.localname, support.class.component | #D8A080 | — |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.html, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx, punctuation.definition.tag.vue, punctuation.definition.tag.svelte | #96A3B4 | — |
| invalid, invalid.illegal | #FF6B6B | bold |