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#F0F3F6
- activityBar.border#D8DEE4
- activityBar.foreground#24292F
- activityBar.inactiveForeground#5F6B7A
- activityBarBadge.background#FF781D
- activityBarBadge.foreground#24292F
- badge.background#FF781D
- badge.foreground#24292F
- button.background#FF781D
- button.foreground#24292F
- button.hoverBackground#FF8A2A
- button.secondaryBackground#F0F3F6
- button.secondaryForeground#24292F
- button.secondaryHoverBackground#E8ECF0
- commandCenter.border#D8DEE4
- descriptionForeground#57606A
- diffEditor.insertedLineBackground#3D8D6A16
- diffEditor.insertedTextBackground#3D8D6A22
- diffEditor.removedLineBackground#D93A3A16
- diffEditor.removedTextBackground#D93A3A24
- disabledForeground#8C959F
- dropdown.background#FFFFFF
- dropdown.border#D8DEE4
- dropdown.foreground#24292F
- editor.background#FFFFFF
- editor.findMatchBackground#FF781D55
- editor.findMatchHighlightBackground#D9920038
- editor.findRangeHighlightBackground#F0F3F688
- editor.foreground#24292F
- editor.hoverHighlightBackground#F3D7C466
- editor.inactiveSelectionBackground#C7D4CF55
- editor.lineHighlightBackground#F6F8FA
- editor.lineHighlightBorder#00000000
- editor.selectionBackground#F4CFB4
- editor.selectionHighlightBackground#FF781D22
- editor.wordHighlightBackground#D8E4DF66
- editor.wordHighlightStrongBackground#FF781D24
- editorBracketMatch.background#FF781D1F
- editorBracketMatch.border#B95512
- editorCursor.background#FFFFFF
- editorCursor.foreground#247B80
- editorError.foreground#D93A3A
- editorGroup.border#D8DEE4
- editorGroupHeader.tabsBackground#F6F8FA
- editorGroupHeader.tabsBorder#D8DEE4
- editorGutter.addedBackground#337B5D
- editorGutter.background#FFFFFF
- editorGutter.deletedBackground#D93A3A
- editorGutter.modifiedBackground#FF781D
- editorHint.foreground#337B5D
- editorIndentGuide.activeBackground1#8C959F
- editorIndentGuide.background1#D8DEE4
- editorInfo.foreground#247B80
- editorLineNumber.activeForeground#57606A
- editorLineNumber.foreground#6E7781
- editorOverviewRuler.border#00000000
- editorOverviewRuler.errorForeground#D93A3ACC
- editorOverviewRuler.findMatchForeground#FF781D99
- editorOverviewRuler.infoForeground#2B8BA899
- editorOverviewRuler.warningForeground#D99200CC
- editorWarning.foreground#D99200
- editorWhitespace.foreground#D8DEE4
- errorForeground#C83232
- focusBorder#FF781D88
- foreground#24292F
- gitDecoration.addedResourceForeground#337B5D
- gitDecoration.deletedResourceForeground#C83232
- gitDecoration.ignoredResourceForeground#667085
- gitDecoration.modifiedResourceForeground#B95512
- gitDecoration.untrackedResourceForeground#4FA77D
- input.background#FFFFFF
- input.border#D8DEE4
- input.foreground#24292F
- input.placeholderForeground#6E7781
- inputOption.activeBorder#FF781D
- inputValidation.errorBackground#FFF0F0
- inputValidation.errorBorder#D93A3A
- inputValidation.infoBackground#EEF7FB
- inputValidation.infoBorder#2B8BA8
- inputValidation.warningBackground#FFF7E8
- inputValidation.warningBorder#D99200
- list.activeSelectionBackground#F3D7C4
- list.activeSelectionForeground#1E2726
- list.activeSelectionIconForeground#1E2726
- list.errorForeground#C83232
- list.focusOutline#00000000
- list.highlightForeground#B95512
- list.hoverBackground#F5EEE7
- list.hoverForeground#1E2726
- list.inactiveSelectionBackground#F7E8DC
- list.inactiveSelectionForeground#24292F
- list.warningForeground#B87800
- menu.background#FFFFFF
- menu.foreground#24292F
- menu.selectionBackground#F3D7C4
- menu.selectionForeground#1E2726
- menu.separatorBackground#D8DEE4
- notifications.background#FFFFFF
- notifications.border#D8DEE4
- notifications.foreground#24292F
- panel.background#FFFFFF
- panel.border#D8DEE4
- panelTitle.activeBorder#FF781D
- panelTitle.activeForeground#1E2726
- panelTitle.inactiveForeground#6E7781
- peekView.border#C9DED5
- peekViewEditor.background#FFFFFF
- peekViewEditor.matchHighlightBackground#FF781D30
- peekViewResult.background#F6F8FA
- peekViewResult.selectionBackground#F3D7C4
- peekViewTitle.background#F6F8FA
- peekViewTitleLabel.foreground#1E2726
- progressBar.background#FF781D
- scrollbar.shadow#D8DEE4
- scrollbarSlider.activeBackground#FF781D88
- scrollbarSlider.background#B7C0C866
- scrollbarSlider.hoverBackground#8C959FA6
- sideBar.background#F6F8FA
- sideBar.border#D8DEE4
- sideBar.foreground#24292F
- sideBarSectionHeader.background#F0F3F6
- sideBarSectionHeader.border#D8DEE4
- sideBarSectionHeader.foreground#24292F
- sideBarTitle.foreground#24292F
- statusBar.background#F0F3F6
- statusBar.border#D8DEE4
- statusBar.debuggingBackground#B65316
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#24292F
- statusBar.noFolderBackground#F0F3F6
- statusBarItem.hoverBackground#E8ECF0
- statusBarItem.prominentBackground#F0F3F6
- statusBarItem.remoteBackground#FF781D
- statusBarItem.remoteForeground#24292F
- tab.activeBackground#FFFFFF
- tab.activeBorderTop#FF781D
- tab.activeForeground#1E2726
- tab.border#D8DEE4
- tab.hoverBackground#F5EEE7
- tab.hoverForeground#24292F
- tab.inactiveBackground#F0F3F6
- tab.inactiveForeground#5F6B7A
- tab.unfocusedActiveBorderTop#8C959F
- terminal.ansiBlack#24292F
- terminal.ansiBlue#2F6FAD
- terminal.ansiBrightBlack#6E7781
- terminal.ansiBrightBlue#2F6FD4
- terminal.ansiBrightCyan#23737A
- terminal.ansiBrightGreen#2F7658
- terminal.ansiBrightMagenta#7D4FA3
- terminal.ansiBrightRed#C83737
- terminal.ansiBrightWhite#24292F
- terminal.ansiBrightYellow#9A6400
- terminal.ansiCyan#247B80
- terminal.ansiGreen#337B5D
- terminal.ansiMagenta#8B5AA5
- terminal.ansiRed#C83232
- terminal.ansiWhite#57606A
- terminal.ansiYellow#806600
- terminal.background#FFFFFF
- terminal.foreground#24292F
- terminalCursor.foreground#247B80
- textBlockQuote.background#F6F8FA
- textBlockQuote.border#D8DEE4
- textCodeBlock.background#F6F8FA
- textLink.activeForeground#B95512
- textLink.foreground#B95512
- textPreformat.foreground#7A4E00
- textSeparator.foreground#D8DEE4
- titleBar.activeBackground#F6F8FA
- titleBar.activeForeground#24292F
- titleBar.border#D8DEE4
- titleBar.inactiveBackground#F6F8FACC
- titleBar.inactiveForeground#5F6B7A
- tree.indentGuidesStroke#D8DEE4
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #667085 | italic |
| meta.jsx.children, meta.jsx.children.tsx, meta.jsx.children.js, text.html.basic, text.html.derivative, text.html.markdown | #24292F | — |
| string, markup.inline.raw, string.template | #337B5D | — |
| constant.numeric, constant.language, constant.character.escape | #8B5AA5 | — |
| keyword, storage, storage.type, storage.modifier | #B95512 | — |
| variable.language.this, variable.language.this.ts, variable.language.this.js | #A9480E | — |
| 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 | #A9480E | — |
| 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 | #8B5AA5 | — |
| entity.name.function, support.function, meta.function-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 | #7A642B | — |
| variable, variable.other, variable.other.readwrite, meta.definition.variable.name, support.variable | #24292F | — |
| variable.other.property, meta.object-literal.key, support.variable.property | #006D9C | — |
| variable.parameter, meta.parameters | #56635F | — |
| entity.name.type, entity.name.class, entity.name.interface, entity.other.inherited-class, support.type, support.class | #2F6FAD | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #8B5AA5 | — |
| attribute.name, entity.other.attribute-name | #247B80 | — |
| punctuation, meta.brace, meta.delimiter | #56635F | — |
| 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 | #006D9C | — |
| 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 | #6E7781 | — |
| invalid, invalid.illegal | #D93A3A | bold |