Skip to main content
Coding Theme

Base16 Helios

Publisher: Alex MeyerThemes in package: 1

Base16 Helios 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.background#1d2021
  • activityBar.dropBackground#e5e5e5
  • activityBar.foreground#d5d5d5
  • activityBarBadge.background#1e8bac
  • activityBarBadge.foreground#e5e5e5
  • badge.background#1d2021
  • badge.foreground#d5d5d5
  • breadcrumb.activeSelectionForeground#e5e5e5
  • breadcrumb.background#383c3e
  • breadcrumb.focusForeground#dddddd
  • breadcrumb.foreground#d5d5d5
  • breadcrumbPicker.background#383c3e
  • button.background#383c3e
  • button.foreground#e5e5e5
  • button.hoverBackground#cdcdcd
  • debugExceptionWidget.background#383c3e
  • debugToolBar.background#383c3e
  • descriptionForeground#6f7579
  • diffEditor.insertedTextBackground#88b92d20
  • diffEditor.removedTextBackground#d7263820
  • dropdown.background#1d2021
  • dropdown.foreground#d5d5d5
  • editor.background#1d2021
  • editor.findMatchBackground#f19d1a6f
  • editor.findMatchHighlightBackground#eb84136f
  • editor.findRangeHighlightBackground#383c3e
  • editor.foreground#d5d5d5
  • editor.hoverHighlightBackground#53585b
  • editor.inactiveSelectionBackground#53585b
  • editor.lineHighlightBackground#383c3e
  • editor.rangeHighlightBackground#383c3e
  • editor.selectionBackground#53585b
  • editor.selectionHighlightBackground#383c3e
  • editor.wordHighlightBackground#53585b
  • editor.wordHighlightStrongBackground#6f7579
  • editorBracketMatch.background#53585b
  • editorCodeLens.foreground#53585b
  • editorCursor.foreground#d5d5d5
  • editorError.foreground#d72638
  • editorGroup.dropBackground#53585b6f
  • editorGroup.emptyBackground#1d2021
  • editorGroupHeader.noTabsBackground#383c3e
  • editorGroupHeader.tabsBackground#383c3e
  • editorGutter.addedBackground#88b92d
  • editorGutter.background#1d2021
  • editorGutter.deletedBackground#d72638
  • editorGutter.modifiedBackground#be4264
  • editorHoverWidget.background#1d2021
  • editorIndentGuide.activeBackground#cdcdcd
  • editorIndentGuide.background#6f7579
  • editorInfo.foreground#1ba595
  • editorLineNumber.foreground#6f7579
  • editorLink.activeForeground#1e8bac
  • editorMarkerNavigation.background#383c3e
  • editorMarkerNavigationError.background#d72638
  • editorMarkerNavigationWarning.background#f19d1a
  • editorOverviewRuler.addedForeground#88b92d
  • editorOverviewRuler.commonContentForeground#c85e0d
  • editorOverviewRuler.currentContentForeground#1e8bac
  • editorOverviewRuler.deletedForeground#d72638
  • editorOverviewRuler.errorForeground#d72638
  • editorOverviewRuler.findMatchForeground#f19d1a
  • editorOverviewRuler.incomingContentForeground#88b92d
  • editorOverviewRuler.infoForeground#1ba595
  • editorOverviewRuler.modifiedForeground#be4264
  • editorOverviewRuler.rangeHighlightForeground#6f7579
  • editorOverviewRuler.selectionHighlightForeground#53585b
  • editorOverviewRuler.warningForeground#f19d1a
  • editorOverviewRuler.wordHighlightForeground#e5e5e5
  • editorOverviewRuler.wordHighlightStrongForeground#1e8bac
  • editorRuler.foreground#6f7579
  • editorSuggestWidget.background#383c3e
  • editorSuggestWidget.foreground#d5d5d5
  • editorSuggestWidget.highlightForeground#1e8bac
  • editorSuggestWidget.selectedBackground#53585b
  • editorWarning.foreground#f19d1a
  • editorWhitespace.foreground#6f7579
  • editorWidget.background#1d2021
  • errorForeground#d72638
  • extensionButton.prominentBackground#88b92d
  • extensionButton.prominentForeground#e5e5e5
  • extensionButton.prominentHoverBackground#53585b
  • foreground#d5d5d5
  • gitDecoration.conflictingResourceForeground#f19d1a
  • gitDecoration.deletedResourceForeground#d72638
  • gitDecoration.ignoredResourceForeground#6f7579
  • gitDecoration.modifiedResourceForeground#be4264
  • gitDecoration.untrackedResourceForeground#88b92d
  • input.background#1d2021
  • input.foreground#d5d5d5
  • input.placeholderForeground#6f7579
  • inputOption.activeBorder#eb8413
  • inputValidation.errorBackground#d72638
  • inputValidation.errorBorder#d72638
  • inputValidation.infoBackground#1e8bac
  • inputValidation.infoBorder#1e8bac
  • inputValidation.warningBackground#f19d1a
  • inputValidation.warningBorder#f19d1a
  • list.activeSelectionBackground#53585b
  • list.activeSelectionForeground#d5d5d5
  • list.dropBackground#e5e5e5
  • list.errorForeground#d72638
  • list.focusBackground#53585b
  • list.focusForeground#d5d5d5
  • list.highlightForeground#e5e5e5
  • list.hoverBackground#6f7579
  • list.hoverForeground#d5d5d5
  • list.inactiveFocusBackground#53585b
  • list.inactiveSelectionBackground#53585b
  • list.inactiveSelectionForeground#d5d5d5
  • list.invalidItemForeground#d72638
  • list.warningForeground#eb8413
  • merge.currentContentBackground#1e8bac40
  • merge.currentHeaderBackground#1e8bac40
  • merge.incomingContentBackground#88b92d60
  • merge.incomingHeaderBackground#88b92d60
  • notificationCenterHeader.background#383c3e
  • notificationCenterHeader.foreground#d5d5d5
  • notificationLink.foreground#1e8bac
  • notifications.background#53585b
  • notifications.foreground#d5d5d5
  • panel.background#1d2021
  • panelTitle.activeForeground#d5d5d5
  • panelTitle.inactiveForeground#6f7579
  • peekViewEditor.background#383c3e
  • peekViewEditor.matchHighlightBackground#eb84136f
  • peekViewEditorGutter.background#383c3e
  • peekViewResult.background#1d2021
  • peekViewResult.fileForeground#d5d5d5
  • peekViewResult.lineForeground#6f7579
  • peekViewResult.matchHighlightBackground#eb84136f
  • peekViewResult.selectionBackground#53585b
  • peekViewResult.selectionForeground#d5d5d5
  • peekViewTitle.background#53585b
  • peekViewTitleDescription.foreground#6f7579
  • peekViewTitleLabel.foreground#d5d5d5
  • pickerGroup.foreground#6f7579
  • progressBar.background#6f7579
  • scrollbar.shadow#383c3e
  • scrollbarSlider.activeBackground#cdcdcd6f
  • scrollbarSlider.background#53585b6f
  • scrollbarSlider.hoverBackground#6f75796f
  • selection.background#1e8bac
  • settings.checkboxBackground#383c3e
  • settings.checkboxForeground#d5d5d5
  • settings.dropdownBackground#383c3e
  • settings.dropdownForeground#d5d5d5
  • settings.headerForeground#d5d5d5
  • settings.modifiedItemIndicator#1e8bac
  • settings.numberInputBackground#383c3e
  • settings.numberInputForeground#d5d5d5
  • settings.textInputBackground#383c3e
  • settings.textInputForeground#d5d5d5
  • sideBar.background#383c3e
  • sideBar.foreground#d5d5d5
  • sideBarSectionHeader.background#6f7579
  • sideBarSectionHeader.foreground#d5d5d5
  • sideBarTitle.foreground#d5d5d5
  • statusBar.background#1e8bac
  • statusBar.debuggingBackground#eb8413
  • statusBar.debuggingForeground#e5e5e5
  • statusBar.foreground#e5e5e5
  • statusBar.noFolderBackground#be4264
  • statusBar.noFolderForeground#e5e5e5
  • statusBarItem.activeBackground#6f7579
  • statusBarItem.hoverBackground#53585b
  • statusBarItem.prominentBackground#be4264
  • statusBarItem.prominentHoverBackground#d72638
  • tab.activeBackground#1d2021
  • tab.activeForeground#d5d5d5
  • tab.hoverBackground#53585b
  • tab.inactiveBackground#383c3e
  • tab.inactiveForeground#6f7579
  • tab.unfocusedActiveForeground#cdcdcd
  • tab.unfocusedHoverBackground#53585b
  • tab.unfocusedInactiveForeground#6f7579
  • terminal.ansiBlack#53585b
  • terminal.ansiBlue#1e8bac
  • terminal.ansiBrightBlack#6f7579
  • terminal.ansiBrightBlue#1e8bac
  • terminal.ansiBrightCyan#1ba595
  • terminal.ansiBrightGreen#88b92d
  • terminal.ansiBrightMagenta#be4264
  • terminal.ansiBrightRed#d72638
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f19d1a
  • terminal.ansiCyan#1ba595
  • terminal.ansiGreen#88b92d
  • terminal.ansiMagenta#be4264
  • terminal.ansiRed#d72638
  • terminal.ansiWhite#dddddd
  • terminal.ansiYellow#eb8413
  • terminal.background#1d2021
  • terminal.foreground#d5d5d5
  • textBlockQuote.background#383c3e
  • textBlockQuote.border#1e8bac
  • textCodeBlock.background#1d2021
  • textLink.activeForeground#1ba595
  • textLink.foreground#1e8bac
  • textPreformat.foreground#1e8bac
  • textSeparator.foreground#be4264
  • titleBar.activeBackground#1d2021
  • titleBar.activeForeground#d5d5d5
  • titleBar.inactiveBackground#383c3e
  • titleBar.inactiveForeground#6f7579
  • walkThrough.embeddedEditorBackground#1d2021
  • welcomePage.buttonBackground#383c3e
  • welcomePage.buttonHoverBackground#53585b
  • widget.shadow#1d2021

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6f7579
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter#d72638
variable.other.object.property#1e8bac
constant.other.color#88b92d
invalid, invalid.illegal#d72638
invalid.deprecated#c85e0d
keyword, storage.modifier#be4264
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as#be4264
keyword.other.using, keyword.other.namespace, keyword.other.class, keyword.other.new, keyword.other.event, keyword.other.this, keyword.other.await, keyword.other.var, keyword.other.package, keyword.other.import, variable.language.this, storage.type.ts#be4264
keyword.type, storage.type.primitive#1ba595
storage.type.function#1e8bac
constant.other.color, punctuation, punctuation.section.class.end, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution#d5d5d5
punctuation.section.embedded, variable.interpolation#c85e0d
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#d72638
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#1e8bac
meta.block variable.other#d72638
support.other.variable, string.other.link#d72638
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#eb8413
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#88b92d
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#f19d1a
storage.type, storage.modifier.package, storage.modifier.import#f19d1a
entity.name.variable.field#1e8bac
support.type#1ba595
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#1ba595
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d72638
variable.language#d72638italic
entity.name.method.js#d72638italic
meta.class-method.js entity.name.function.js, variable.function.constructor#1e8bac
entity.other.attribute-name#1e8bac
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f19d1aitalic
entity.other.attribute-name.class#f19d1a
source.sass keyword.control#1e8bac
markup.inserted#88b92d
markup.deleted#d72638
markup.changed#be4264
string.regexp#1ba595
constant.character.escape#1ba595
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#1e8bacitalic
source.js constant.other.object.key.js string.unquoted.label.js#be4264italic
source.json meta.structure.dictionary.json support.type.property-name.json#1e8bac
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1e8bac
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1e8bac
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1e8bac
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1e8bac
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1e8bac
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1e8bac
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1e8bac
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1e8bac
text.html.markdown, punctuation.definition.list_item.markdown#d5d5d5
text.html.markdown markup.inline.raw.markdown#be4264
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#1ba595
text.html.markdown meta.dummy.line-break#00000000
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#1e8bac
markup.italic#d72638italic
markup.bold, markup.bold string#d72638bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#d72638bold
markup.underline#eb8413underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#1ba595
markup.quoteitalic
string.other.link.title.markdown#1e8bac
string.other.link.description.title.markdown#be4264
constant.other.reference.link.markdown#f19d1a
markup.raw.block#be4264
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown#be4264
variable.language.fenced.markdown#d72638
meta.separator#1ba595bold
markup.table#be4264
token.info-token#1e8bac
token.warn-token#f19d1a
token.error-token#d72638
token.debug-token#be4264

Shiki preview

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

Loading...

Base16 Helios - Coding Theme