Skip to main content
Coding Theme

Hew

Publisher: MattThemes in package: 1

A relaxing 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.activeBorder#309060
  • activityBar.background#faf8f8
  • activityBar.border#cfcccc
  • activityBar.dropBorder#309060
  • activityBar.foreground#212121
  • activityBar.inactiveForeground#727272
  • activityBarBadge.background#309060
  • activityBarBadge.foreground#ffffff
  • badge.background#309060
  • badge.foreground#ffffff
  • banner.background#309060
  • banner.foreground#ffffff
  • banner.iconForeground#ffffff
  • breadcrumb.activeSelectionForeground#309060
  • breadcrumb.background#faf8f8
  • breadcrumb.focusForeground#212121
  • breadcrumb.foreground#727272
  • breadcrumbPicker.background#eae8e8
  • button.background#309060
  • button.foreground#ffffff
  • button.secondaryBackground#cfcccc
  • button.secondaryForeground#212121
  • checkbox.background#ffffff
  • checkbox.border#cfcccc
  • checkbox.foreground#309060
  • descriptionForeground#212121
  • dropdown.background#ffffff
  • dropdown.border#cfcccc
  • dropdown.foreground#212121
  • dropdown.listBackground#ffffff
  • editor.background#f4f0e8
  • editor.foreground#212121
  • editor.selectionBackground#badaca
  • editor.snippetFinalTabstopHighlightBackground#30906040
  • editor.snippetFinalTabstopHighlightBorder#309060
  • editor.snippetTabstopHighlightBackground#30906040
  • editor.snippetTabstopHighlightBorder#309060
  • editorGroup.border#cfcccc
  • editorGroup.dropBackground#30906040
  • editorGroup.emptyBackground#eae8e8
  • editorGroup.focusedEmptyBorder#309060
  • editorGroupHeader.border#cfcccc
  • editorGroupHeader.noTabsBackground#eae8e8
  • editorGroupHeader.tabsBackground#eae8e8
  • editorGroupHeader.tabsBorder#cfcccc
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#727272
  • editorLink.activeForeground#309060
  • editorPane.background#eae8e8
  • editorWidget.background#eae8e8
  • editorWidget.border#cfcccc
  • editorWidget.foreground#212121
  • editorWidget.resizeBorder#cfcccc
  • errorForeground#e42142
  • focusBorder#309060
  • foreground#212121
  • icon.foreground#212121
  • input.background#ffffff
  • input.border#cfcccc
  • input.foreground#212121
  • input.placeholderForeground#727272
  • inputOption.activeBackground#badaca
  • inputOption.activeBorder#309060
  • inputOption.activeForeground#212121
  • keybindingLabel.background#faf8f8
  • keybindingLabel.border#cfcccc
  • keybindingLabel.bottomBorder#cfcccc
  • keybindingLabel.foreground#212121
  • list.activeSelectionBackground#309060
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.deemphasizedForeground#727272
  • list.dropBackground#30906040
  • list.errorForeground#e42142
  • list.filterMatchBackground#badaca
  • list.filterMatchBorder#309060
  • list.focusHighlightForeground#90f0c0
  • list.highlightForeground#309060
  • list.hoverBackground#badaca
  • list.hoverForeground#212121
  • list.inactiveSelectionBackground#badaca
  • list.inactiveSelectionForeground#212121
  • list.inactiveSelectionIconForeground#212121
  • list.invalidItemForeground#e42142
  • list.warningForeground#d08020
  • listFilterWidget.background#badaca
  • listFilterWidget.noMatchesOutline#e42142
  • listFilterWidget.outline#309060
  • panel.background#eae8e8
  • panel.border#cfcccc
  • panelSection.border#cfcccc
  • panelSection.dropBackground#30906040
  • panelSectionHeader.background#cfcccc
  • panelSectionHeader.foreground#212121
  • panelTitle.activeBorder#309060
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#727272
  • peekView.border#309060
  • peekViewEditor.background#f4f0e8
  • peekViewEditor.matchHighlightBackground#30906040
  • peekViewEditor.matchHighlightBorder#309060
  • peekViewResult.background#eae8e8
  • peekViewResult.fileForeground#212121
  • peekViewResult.lineForeground#212121
  • peekViewResult.matchHighlightBackground#30906040
  • peekViewResult.selectionBackground#badaca
  • peekViewResult.selectionForeground#212121
  • peekViewTitle.background#faf8f8
  • peekViewTitleDescription.foreground#727272
  • peekViewTitleLabel.foreground#212121
  • pickerGroup.border#cfcccc
  • pickerGroup.foreground#309060
  • progressBar.background#309060
  • quickInput.background#eae8e8
  • quickInput.foreground#212121
  • quickInputList.focusBackground#309060
  • quickInputList.focusForeground#ffffff
  • quickInputList.focusIconForeground#ffffff
  • sash.hoverBorder#309060
  • selection.background#badaca
  • sideBar.background#eae8e8
  • sideBar.border#cfcccc
  • sideBar.dropBackground#30906040
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#cfcccc
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#309060
  • statusBar.debuggingBackground#309060
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#309060
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#faf8f8
  • tab.activeBorderTop#309060
  • tab.activeForeground#212121
  • tab.border#cfcccc
  • tab.hoverBackground#faf8f8
  • tab.inactiveBackground#eae8e8
  • tab.inactiveForeground#727272
  • textBlockQuote.background#21212121
  • textBlockQuote.border#309060
  • textCodeBlock.background#21212121
  • textLink.activeForeground#309060
  • textLink.foreground#309060
  • textPreformat.foreground#212121
  • textSeparator.foreground#212121
  • titleBar.activeBackground#dad8d8
  • titleBar.activeForeground#212121
  • titleBar.border#cfcccc
  • titleBar.inactiveBackground#eae8e8
  • titleBar.inactiveForeground#727272
  • toolbar.hoverBackground#21212121
  • tree.indentGuidesStroke#727272
  • tree.tableColumnsBorder#727272
  • widget.shadow#21212121

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#428421italic
invalid#e42142bold
constant.language, keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.noexcept, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.wordlike, keyword, punctuation.definition.interpolation, punctuation.definition.template-expression, punctuation.section.embedded, storage, variable.languagebold
constant.other.caps, entity.name.tag.yaml, keyword.operator, meta.embedded, meta.interpolation, meta.preprocessor, meta.template.expression, storage.modifier.import.java, storage.modifier.package.java, support.type.property-name
constant, keyword.operator.plus.exponent, keyword.operator.minus.exponent, meta.embedded.assembly, meta.preprocessor.numeric, meta.preprocessor.string, keyword.other.unit, stringbold italic
constant.character, punctuation.definition.entitybold
entity.name.tag, meta.selectorbold
markup.headingbold
markup.quoteitalic
markup.inline.rawbold italic
markup.boldbold
markup.italicitalic
markup.underlineunderline

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Hew - Coding Theme