Sage of Light Theme
Publisher: Sage FennelThemes in package: 1
A light theme
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#00000000
- activityBar.activeBorder#8300ea
- activityBar.background#e6f1f0
- activityBar.border#bdd3d1
- activityBar.foreground#8300ea
- activityBar.inactiveForeground#003836
- activityBarBadge.background#8300ea
- activityBarBadge.foreground#fff
- activityBarTop.activeBorder#8300ea
- activityBarTop.dropBorder#8300ea
- activityBarTop.foreground#8300ea
- activityBarTop.inactiveForeground#003836
- badge.background#8300ea
- badge.foreground#fff
- breadcrumb.background#fff
- button.background#007671
- button.border#007671
- button.foreground#fff
- button.hoverBackground#007671e6
- button.secondaryBackground#e6f1f0
- button.secondaryForeground#007671
- button.secondaryHoverBackground#ffffffe6
- button.separator#ffffff4d
- commandCenter.activeBackground#e6f1f0
- commandCenter.activeBorder#bdd3d1
- commandCenter.background#e6f1f0
- commandCenter.border#bdd3d1
- commandCenter.foreground#003836
- commandCenter.inactiveBorder#bdd3d1
- commandCenter.inactiveForeground#bdd3d1
- debugToolBar.background#e6f1f0
- diffEditor.border#bdd3d1
- diffEditor.diagonalFill#001d1b1a
- diffEditor.insertedLineBackground#a9cfff40
- diffEditor.insertedTextBackground#a9cfff40
- diffEditor.removedLineBackground#ff769440
- diffEditor.removedTextBackground#ff769440
- diffEditorGutter.insertedLineBackground#a9cfff40
- diffEditorGutter.removedLineBackground#ff769440
- diffEditorOverview.insertedForeground#006fd6
- diffEditorOverview.removedForeground#d2004f
- disabledForeground#708583
- dropdown.background#fff
- dropdown.border#708583
- dropdown.foreground#003836
- dropdown.listBackground#fff
- editor.background#fff
- editor.findMatchBackground#ff9e5d80
- editor.findMatchHighlightBackground#ff9e5d80
- editor.findRangeHighlightBackground#dabe0080
- editor.foldBackground#00000000
- editor.foreground#003836
- editor.inactiveSelectionBackground#6fdb554d
- editor.lineHighlightBackground#0038360d
- editor.rangeHighlightBackground#dabe0040
- editor.selectionBackground#6fdb554d
- editor.wordHighlightBackground#7bc3ff80
- editor.wordHighlightStrongBackground#de9dff80
- editorBracketHighlight.foreground1#8156c0
- editorBracketHighlight.foreground2#bb4717
- editorBracketHighlight.foreground3#448502
- editorBracketHighlight.foreground4#8156c0
- editorBracketHighlight.foreground5#bb4717
- editorBracketHighlight.foreground6#448502
- editorBracketHighlight.unexpectedBracket.foreground#bb005e
- editorBracketMatch.background#de9dff80
- editorBracketMatch.border#00000000
- editorCursor.foreground#bb005e
- editorGroup.border#bdd3d1
- editorGroup.dropBackground#6fdb554d
- editorGroupHeader.border#bdd3d1
- editorGroupHeader.noTabsBackground#f9fdfc
- editorGroupHeader.tabsBackground#e6f1f0
- editorGroupHeader.tabsBorder#bdd3d1
- editorGutter.addedBackground#006fd6
- editorGutter.deletedBackground#d2004f
- editorGutter.modifiedBackground#a200e9
- editorHoverWidget.background#fefedf
- editorHoverWidget.border#838267
- editorIndentGuide.activeBackground1#00383680
- editorIndentGuide.background1#0038361a
- editorLightBulb.foreground#ff9e5d
- editorLightBulbAutoFix.foreground#dabe00
- editorLineNumber.activeForeground#003836
- editorLineNumber.foreground#708583
- editorLink.activeForeground#0009fb
- editorOverviewRuler.border#bdd3d140
- editorRuler.foreground#bdd3d180
- editorStickyScroll.border#bdd3d1
- editorSuggestWidget.background#fefedf
- editorSuggestWidget.border#838267
- editorWidget.background#e6f1f0
- editorWidget.border#708583
- editorWidget.foreground#003836
- editorWidget.resizeBorder#e6f1f0
- errorForeground#d2004f
- focusBorder#8300ea
- foreground#003836
- gitDecoration.conflictingResourceForeground#008188
- gitDecoration.deletedResourceForeground#d2004f
- gitDecoration.ignoredResourceForeground#00383666
- gitDecoration.modifiedResourceForeground#006fd6
- gitDecoration.untrackedResourceForeground#a200e9
- icon.foreground#003836
- input.background#fff
- input.border#708583
- input.placeholderForeground#708583
- inputOption.activeBorder#003836
- keybindingLabel.background#00000000
- keybindingLabel.border#bdd3d1
- keybindingLabel.bottomBorder#bdd3d1
- keybindingLabel.foreground#003836
- list.activeSelectionBackground#8300ea
- list.activeSelectionForeground#fff
- list.activeSelectionIconForeground#fff
- list.dropBackground#6fdb554d
- list.errorForeground#d2004f
- list.focusForeground#003836
- list.focusHighlightForeground#fff
- list.highlightForeground#8300ea
- list.hoverBackground#7085831a
- list.inactiveSelectionBackground#70858326
- list.inactiveSelectionForeground#003836
- list.inactiveSelectionIconForeground#003836
- list.warningForeground#b74700
- menu.background#e6f1f0
- menu.border#bdd3d1
- menu.foreground#003836
- menu.separatorBackground#bdd3d1
- merge.currentContentBackground#a9cfff40
- merge.currentHeaderBackground#a9cfffa6
- merge.incomingContentBackground#ff769440
- merge.incomingHeaderBackground#ff7694a6
- notificationCenterHeader.background#e6f1f0
- notificationCenterHeader.foreground#003836
- notificationLink.foreground#0009fb
- notifications.background#e6f1f0
- notifications.foreground#003836
- notificationToast.border#708583
- panel.background#f9fdfc
- panel.border#bdd3d1
- panelSection.border#bdd3d1
- panelSectionHeader.border#bdd3d1
- panelTitle.activeBorder#8300ea
- panelTitle.activeForeground#8300ea
- panelTitle.inactiveForeground#003836
- peekView.border#838267
- peekViewEditor.background#fefedf
- peekViewResult.background#fefedf
- peekViewResult.fileForeground#003836
- peekViewResult.lineForeground#003836
- peekViewTitle.background#fefedf
- peekViewTitleDescription.foreground#003836
- peekViewTitleLabel.foreground#003836
- pickerGroup.border#bdd3d1
- progressBar.background#003836
- quickInput.background#e6f1f0
- quickInputList.focusBackground#8300ea
- quickInputList.focusForeground#fff
- quickInputList.focusIconForeground#fff
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#00383699
- scrollbarSlider.background#00383633
- scrollbarSlider.hoverBackground#00383680
- settings.checkboxBackground#fff
- settings.dropdownBackground#fff
- settings.headerForeground#003836
- settings.modifiedItemIndicator#8300ea
- settings.numberInputBackground#fff
- settings.rowHoverBackground#e6f1f040
- settings.textInputBackground#fff
- sideBar.background#e6f1f0
- sideBar.border#bdd3d1
- sideBar.dropBackground#6fdb554d
- sideBarSectionHeader.background#e6f1f0
- sideBarSectionHeader.border#bdd3d1
- statusBar.background#e6f1f0
- statusBar.border#bdd3d1
- statusBar.debuggingBackground#e6f1f0
- statusBar.foreground#003836
- statusBar.noFolderBackground#e6f1f0
- statusBarItem.errorBackground#bb005e
- statusBarItem.errorForeground#fff
- statusBarItem.errorHoverBackground#bb005e
- statusBarItem.errorHoverForeground#fff
- statusBarItem.remoteBackground#e6f1f0
- statusBarItem.remoteForeground#003836
- tab.activeBackground#fff
- tab.activeBorder#bdd3d1
- tab.activeBorderTop#8300ea
- tab.activeForeground#001d1b
- tab.border#bdd3d1
- tab.inactiveBackground#e6f1f0
- tab.inactiveForeground#003836
- tab.unfocusedActiveBorder#bdd3d1
- tab.unfocusedActiveBorderTop#8300ea
- terminal.ansiBlack#484848
- terminal.ansiBlue#006fd6
- terminal.ansiBrightBlack#484848
- terminal.ansiBrightBlue#006fd6
- terminal.ansiBrightCyan#008188
- terminal.ansiBrightGreen#080
- terminal.ansiBrightMagenta#a200e9
- terminal.ansiBrightRed#d2004f
- terminal.ansiBrightWhite#fff
- terminal.ansiBrightYellow#b74700
- terminal.ansiCyan#008188
- terminal.ansiGreen#080
- terminal.ansiMagenta#a200e9
- terminal.ansiRed#d2004f
- terminal.ansiWhite#fff
- terminal.ansiYellow#b74700
- terminal.background#f9fdfc
- terminal.foreground#001d1b
- terminal.tab.activeBorder#8300ea
- textBlockQuote.background#00000000
- textBlockQuote.border#001d1b
- textLink.activeForeground#0009fb
- textLink.foreground#0009fb
- textPreformat.foreground#337d00
- titleBar.activeBackground#e6f1f0
- titleBar.activeForeground#003836
- titleBar.border#bdd3d1
- titleBar.inactiveBackground#e6f1f0
- titleBar.inactiveForeground#708583
- toolbar.activeBackground#70858366
- toolbar.hoverBackground#70858333
- tree.indentGuidesStroke#00383640
- widget.border#bdd3d1
- widget.shadow#00000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| meta.embedded, source.groovy.embedded, string meta.image.inline.markdown | #001d1b | |
| emphasis | — | italic |
| strong | — | bold |
| header | #7900d8 | bold |
| comment, punctuation.definition.comment | #717171 | italic |
| constant.language | #337d00 | bold |
| constant.regexp | #337d00 | |
| support.class.component, entity.name.tag | #bd2b00 | |
| entity.name.tag.css | #001d1b | |
| entity.other.attribute-name | #56009f | |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss | #56009f | |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #a62300 | bold |
| invalid | #bb005e | — |
| markup.underline | #0009fb | underline |
| markup.bold | #7900d8 | bold |
| markup.heading | #7900d8 | bold |
| markup.italic | #7900d8 | italic |
| markup.strikethrough | — | strikethrough |
| markup.inserted | #006fd6 | — |
| markup.deleted | #d2004f | — |
| markup.changed | #b74700 | — |
| punctuation.definition.quote.begin.markdown | #8156c0 | |
| punctuation.definition.list.begin.markdown | #8156c0 | |
| markup.inline.raw | #337d00 | |
| punctuation.definition.tag | #8156c0 | |
| meta.preprocessor, entity.name.function.preprocessor | #bd2b00 | |
| meta.preprocessor.string | #337d00 | |
| constant.numeric, meta.preprocessor.numeric, entity.other.keyframe-offset.percentage.css | #337d00 | |
| meta.structure.dictionary.key.python | #7900d8 | bold |
| source.diff | #8156c0 | |
| meta.diff.header | #fff | — |
| storage | #001d1b | |
| source.java storage.type, source.go storage.type | #a62300 | bold |
| storage.type | #7900d8 | bold |
| storage.modifier, keyword.operator.noexcept | #7900d8 | bold |
| string, meta.embedded.assembly, constant.other.symbol | #337d00 | |
| string.tag | #7900d8 | bold |
| string.value | #337d00 | |
| string.regexp | #337d00 | |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded | #8156c0 | |
| meta.template.expression, meta.interpolation | #001d1b | |
| support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded | #007c77 | |
| keyword | #7900d8 | bold |
| keyword.control | #7900d8 | bold |
| keyword.operator.type.annotation | #8156c0 | |
| keyword.operator | #8156c0 | |
| keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike | #7900d8 | bold |
| keyword.other.unit | #337d00 | bold |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #8156c0 | |
| storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java | #001d1b | |
| variable.language | #337d00 | bold |
| meta.attribute, variable.other.property, variable.other.object.property | #007c77 | |
| entity.name.function, meta.function-call.generic, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal | #bd2b00 | |
| support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class | #a62300 | bold |
| meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class | #a62300 | bold |
| keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator | #7900d8 | bold |
| variable, meta.definition.variable.name, support.variable, entity.name.variable | #001d1b | |
| variable.parameter | #007c77 | |
| meta.object-literal.key, variable.object.property, source.json support.type.property-name | #56009f | |
| 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 | #337d00 | bold |
| constant.other.placeholder | #7900d8 | bold |
| punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp | #007c77 | |
| constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp | #007c77 | |
| keyword.operator.or.regexp, keyword.control.anchor.regexp | #007c77 | |
| keyword.operator.quantifier.regexp | #007c77 | |
| constant.character, constant.other.option | #007c77 | |
| constant.character.escape | #007c77 | |
| entity.name.label | #001d1b | |
| punctuation, meta.brace | #8156c0 |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...