Canvas Theme
Publisher: hatreeksbergermonThemes in package: 1
A VS Code theme based on HubSpot's Canvas design system (with Operator Mono support).
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#2d3e50
- activityBar.border#2d3e50
- activityBar.dropBackground#253342
- activityBar.foreground#ffffff
- activityBar.inactiveForeground#99acc2
- activityBarBadge.background#f2547d
- activityBarBadge.foreground#ffffff
- badge.background#cbd6e2
- badge.foreground#33475b
- breadcrumb.activeSelectionForeground#7fd1de
- breadcrumb.focusForeground#ffffff
- button.background#0091ae
- button.foreground#ffffff
- button.hoverBackground#007a8c
- descriptionForeground#cbd6e2
- diffEditor.insertedTextBackground#7fded280
- diffEditor.removedTextBackground#f8a9ad80
- dropdown.background#516f90
- dropdown.border#516f90
- dropdown.foreground#ffffff
- dropdown.listBackground#2d3e50
- editor.background#2d3e50
- editor.findMatchBackground#516f90
- editor.findMatchBorder#ffffff00
- editor.findMatchHighlightBackground#ffffff00
- editor.findMatchHighlightBorder#fae0b5
- editor.findRangeHighlightBackground#253342
- editor.foreground#ffffff
- editor.hoverHighlightBackground#516f90
- editor.lineHighlightBackground#425b76
- editor.lineHighlightBorder#2d3e501a
- editor.rangeHighlightBackground#253342
- editor.rangeHighlightBorder#253342
- editor.selectionBackground#7fd1de4d
- editor.selectionHighlightBackground#ffffff00
- editor.selectionHighlightBorder#ffbcac
- editor.wordHighlightBackground#ffffff00
- editor.wordHighlightBorder#ffffff00
- editor.wordHighlightStrongBackground#7fd1de4d
- editor.wordHighlightStrongBorder#7fd1de4d
- editorBracketMatch.background#2d3e50
- editorBracketMatch.border#fae0b5
- editorCodeLens.foreground#00bda5
- editorCursor.foreground#f5c26b
- editorError.foreground#f2545b
- editorGroup.border#253342
- editorGroup.dropBackground#516f9099
- editorGroup.emptyBackground#2d3e50
- editorGroup.focusedEmptyBorder#7c98b6
- editorGroupHeader.noTabsBackground#33475b
- editorGroupHeader.tabsBackground#253342
- editorGutter.addedBackground#00bda5
- editorGutter.background#2d3e50
- editorGutter.deletedBackground#f2545b
- editorGutter.modifiedBackground#f5c26b
- editorHint.foreground#00bda5
- editorIndentGuide.activeBackground#7c98b6
- editorIndentGuide.background#516f90
- editorInfo.foreground#00a4bd
- editorLineNumber.activeForeground#ffffff
- editorLineNumber.foreground#99acc2
- editorLink.activeForeground#0091ae
- editorMarkerNavigation.background#253342
- editorMarkerNavigationError.background#f2545b
- editorMarkerNavigationInfo.background#00a4bd
- editorMarkerNavigationWarning.background#ff7a59
- editorOverviewRuler.addedForeground#00bda5
- editorOverviewRuler.border#425b76
- editorOverviewRuler.bracketMatchForeground#516f90
- editorOverviewRuler.currentContentForeground#fae0b5
- editorOverviewRuler.deletedForeground#f2545b
- editorOverviewRuler.errorForeground#f2545b
- editorOverviewRuler.findMatchForeground#fae0b5b3
- editorOverviewRuler.incomingContentForeground#7fded2
- editorOverviewRuler.infoForeground#00a4bd
- editorOverviewRuler.modifiedForeground#f5c26b
- editorOverviewRuler.rangeHighlightForeground#253342cc
- editorOverviewRuler.selectionHighlightForeground#7fd1deb3
- editorOverviewRuler.warningForeground#ff7a59
- editorOverviewRuler.wordHighlightForeground#ffbcacb3
- editorOverviewRuler.wordHighlightStrongForeground#7fd1deb3
- editorRuler.foreground#425b76
- editorUnnecessaryCode.border#6a78d1
- editorWarning.foreground#ff7a59
- editorWhitespace.foreground#516f90
- editorWidget.background#253342
- editorWidget.border#7c98b6
- extensionButton.prominentBackground#ff7a59
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#ff8f73
- focusBorder#7c98b6
- foreground#ffffff
- gitDecoration.addedResourceForeground#7fded2
- gitDecoration.conflictingResourceForeground#b4bbe8
- gitDecoration.deletedResourceForeground#f8a9ad
- gitDecoration.ignoredResourceForeground#516f90
- gitDecoration.modifiedResourceForeground#fae0b5
- gitDecoration.untrackedResourceForeground#99acc2
- input.background#516f90
- input.border#33475b
- input.foreground#ffffff
- input.placeholderForeground#99acc2
- inputOption.activeBorder#f5c26b
- inputValidation.errorBackground#f8a9ad
- inputValidation.errorBorder#f2545b
- inputValidation.errorForeground#33475b
- inputValidation.infoBackground#7fd1de
- inputValidation.infoBorder#00a4bd
- inputValidation.infoForeground#33475b
- inputValidation.warningBackground#ffbcac
- inputValidation.warningBorder#ff7a59
- inputValidation.warningForeground#33475b
- list.activeSelectionBackground#33475b
- list.activeSelectionForeground#ffffff
- list.dropBackground#425b76
- list.errorForeground#f2545b
- list.focusBackground#425b76
- list.focusForeground#cbd6e2
- list.highlightForeground#00bda5
- list.hoverBackground#33475b
- list.inactiveFocusBackground#516f90
- list.inactiveSelectionBackground#33475b
- list.inactiveSelectionForeground#99acc2
- list.invalidItemForeground#f2547d
- list.warningForeground#ff7a59
- menu.background#2d3e50
- menu.foreground#cbd6e2
- menu.selectionBackground#425b76
- menu.selectionForeground#ffffff
- menu.separatorBackground#99acc2
- merge.border#253342
- merge.currentContentBackground#fae0b533
- merge.currentHeaderBackground#f5c26bb3
- merge.incomingContentBackground#7fded233
- merge.incomingHeaderBackground#00bda5b3
- notificationCenterHeader.background#2d3e50
- notificationCenterHeader.foreground#ffffff
- notificationLink.foreground#0091ae
- notifications.background#253342
- notifications.border#516f90
- notifications.foreground#cbd6e2
- notificationToast.border#2d3e50
- panel.background#2d3e50
- panel.border#516f9080
- panel.dropBackground#253342
- panelTitle.activeBorder#cbd6e2
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#99acc2
- peekView.border#7c98b6
- peekViewEditor.background#2d3e50
- peekViewEditor.matchHighlightBackground#7fd1de4d
- peekViewEditor.matchHighlightBorder#7fd1de4d
- peekViewEditorGutter.background#253342
- peekViewResult.background#253342
- peekViewResult.fileForeground#99acc2
- peekViewResult.lineForeground#cbd6e2
- peekViewResult.matchHighlightBackground#ffbcac4d
- peekViewResult.selectionBackground#425b76
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#253342
- peekViewTitleDescription.foreground#99acc2
- peekViewTitleLabel.foreground#ffffff
- pickerGroup.border#516f90
- pickerGroup.foreground#00bda5
- progressBar.background#00bda5
- scrollbarSlider.activeBackground#cbd6e2cc
- scrollbarSlider.background#cbd6e299
- scrollbarSlider.hoverBackground#cbd6e266
- selection.background#00a4bd4d
- settings.checkboxBackground#253342
- settings.checkboxBorder#253342
- settings.checkboxForeground#00bda5
- settings.dropdownBackground#253342
- settings.dropdownBorder#253342
- settings.dropdownListBorder#7c98b6
- settings.modifiedItemIndicator#00bda5
- settings.numberInputBackground#253342
- settings.numberInputForeground#ff7a59
- settings.textInputBackground#253342
- sideBar.background#253342
- sideBar.border#2d3e50
- sideBar.dropBackground#33475b
- sideBar.foreground#eaf0f6
- sideBarSectionHeader.background#2d3e50
- sideBarSectionHeader.border#2d3e50
- sideBarSectionHeader.foreground#ffffff
- sideBarTitle.foreground#ffffff
- statusBar.background#253342
- statusBar.debuggingBackground#f2545b
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#6a78d1
- statusBarItem.prominentBackground#0091ae
- statusBarItem.prominentHoverBackground#007a8c
- tab.activeBackground#33475b
- tab.activeBorder#33475b
- tab.activeForeground#ffffff
- tab.activeModifiedBorder#f5c26b
- tab.border#33475b
- tab.hoverBackground#2d3e50
- tab.hoverBorder#2d3e50
- tab.inactiveBackground#253342
- tab.inactiveForeground#99acc2
- tab.inactiveModifiedBorder#fae0b5
- tab.unfocusedActiveForeground#99acc2
- tab.unfocusedActiveModifiedBorder#99acc2
- tab.unfocusedInactiveForeground#516f90
- tab.unfocusedInactiveModifiedBorder#516f90
- terminal.ansiBlack#7c98b6
- terminal.ansiBlue#00a4bd
- terminal.ansiBrightBlack#7c98b6
- terminal.ansiBrightBlue#00a4bd
- terminal.ansiBrightCyan#ff8f59
- terminal.ansiBrightGreen#04c87a
- terminal.ansiBrightMagenta#6a78d1
- terminal.ansiBrightRed#f2545b
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#f5c26b
- terminal.ansiCyan#ff8f59
- terminal.ansiGreen#04c87a
- terminal.ansiMagenta#6a78d1
- terminal.ansiRed#f2545b
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#f5c26b
- terminal.background#253342
- terminal.foreground#eaf0f6
- terminal.selectionBackground#516f9099
- terminalCursor.background#253342
- terminalCursor.foreground#99acc2
- textBlockQuote.background#33475b
- textBlockQuote.border#0091ae
- textCodeBlock.background#33475b
- textLink.activeForeground#007a8c
- textLink.foreground#0091ae
- textPreformat.foreground#f5c26b
- textSeparator.foreground#7c98b6
- titleBar.activeBackground#2d3e50
- titleBar.activeForeground#ffffff
- titleBar.inactiveBackground#425b76
- titleBar.inactiveForeground#99acc2
- widget.shadow#253342
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| source | #ffffff | — |
| comment, punctuation.definition.comment | #99acc2 | italic |
| entity.name, entity.name.function, entity.name.type.module, entity.name.type.instance, support.function.name | #00bda5 | — |
| entity.name.tag, support.class.component | #ff7a59 | — |
| entity.other.attribute-name, entity.other.attribute-name.class | #f5c26b | — |
| support.function.interpolation | #7fded2 | — |
| entity.other.attribute-name.pseudo-class | #dbae60 | — |
| entity.name.type | #f2547d | — |
| variable | #7fd1de | — |
| variable.other.constant, variable.other.readwrite.alias | #f5c26b | — |
| entity.name.type.class | #f5c26b | bold |
| variable.language, entity.other.inherited-class | #00a4bd | italic |
| variable.object.property | #ffffff | — |
| variable.parameter | #ffffff | italic |
| constant | #f2545b | — |
| constant.language | #ff8f59 | — |
| constant.character.escape | #f2545b | — |
| constant.numeric, keyword.other.unit | #ff8f59 | — |
| constant.other.color | #ffc7ac | — |
| storage.type, storage.modifier | #ff7a59 | italic |
| storage.type.function | #7fded2 | italic |
| support.function | #7fded2 | — |
| support.class | #f5c26b | — |
| support.variable, support.constant | #ffffff | — |
| support.type.property-name.json | #7fd1de | — |
| support.type.property-name | #ffffff | — |
| support.constant.property-value | #cbd6e2 | — |
| keyword.control.at-rule | — | |
| keyword, keyword.control | #f2545b | italic |
| keyword.operator | #7fded2 | |
| string, punctuation.definition.string | #ffc7ac | — |
| punctuation.definition.template-expression | #ffc7ac | — |
| invalid | #f9aabe | underline italic |
| punctuation.definition.parameters, punctuation.definition.tag, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace.round, meta.property-list | #99acc2 | — |
| punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.heading.markdown | #99acc2 | — |
| markup.bold | #f2545b | bold |
| markup.italic | #f8a9ad | italic |
| markup.heading, entity.name.section | #ff7a59 | bold |
| markup.inline.raw | #f5c26b | — |
| punctuation.definition.raw | #f5c26b | — |
| markup.fenced_code.block | #fae0b5 | — |
| fenced_code.block.language | #f5c26b | — |
| punctuation.definition.markdown | #f5c26b | — |
| markup.list | #7fd1de | — |
| punctuation.definition.list | #00a4bd | — |
| meta.separator | #7c98b6 | — |
| variable.other.jinja | #7fd1de | — |
| entity.other.jinja.delimiter | #ffffff | — |
| meta.scope.jinja | #cbd6e2 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...