Skip to main content
Coding Theme

Horizon Extended Theme

Publisher: Lance WilhelmThemes in package: 5

A dark theme based on the Horizon theme. This provides some much need additions included semantic highlighting.

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#1C1E26
  • activityBar.foreground#b3bddab3
  • activityBarBadge.background#fe5e78
  • activityBarBadge.foreground#1C1E26
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#232530
  • button.background#2E303E
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#2E303E
  • dropdown.listBackground#2E303E
  • editor.background#1C1E26
  • editor.findMatchBackground#6C6F9380
  • editor.findMatchHighlightBackground#6C6F934D
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#2E303E4D
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#7d81a3b3
  • editor.selectionHighlightBackground#8f93bd4d
  • editor.wordHighlightBackground#6C6F9380
  • editor.wordHighlightStrongBackground#6C6F9380
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#1C1E26
  • editorCursor.foreground#fe5e78
  • editorError.foreground#fe5e78
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#1C1E26
  • editorGutter.addedBackground#09F7A0B3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#2E303E80
  • editorLineNumber.activeForeground#D5D8DA80
  • editorLineNumber.foreground#D5D8DA1A
  • editorOverviewRuler.addedForeground#09F7A080
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA80
  • editorOverviewRuler.deletedForeground#F43E5C80
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#21BFC280
  • editorOverviewRuler.warningForeground#27D79780
  • editorRuler.foreground#6C6F934D
  • editorSuggestWidget.highlightForeground#fe5e78
  • editorWarning.foreground#f8d64c
  • editorWidget.background#232530
  • editorWidget.border#232530
  • errorForeground#fe5e78
  • extensionButton.prominentBackground#fe5e78
  • extensionButton.prominentHoverBackground#fe5e78
  • focusBorder#fe5e78
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#27D797B3
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#D5D8DA4D
  • gitDecoration.modifiedResourceForeground#FAB38E
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#2E303E
  • inputOption.activeBorder#E9436D80
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#2E303E80
  • list.activeSelectionForeground#D5D8DA
  • list.dropBackground#6C6F9380
  • list.errorForeground#fe5e78E6
  • list.focusBackground#2E303E80
  • list.focusForeground#D5D8DA
  • list.highlightForeground#fe5e78
  • list.hoverBackground#2E303E80
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E80
  • list.inactiveSelectionBackground#2E303E4D
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#ffe683d8
  • menu.selectionBackground#6C6F9380
  • menu.selectionBorder#6C6F9380
  • panelTitle.activeBorder#fe5e78
  • peekView.border#1A1C23
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#6C6F9380
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#6C6F9380
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#232530
  • pickerGroup.foreground#fe5e78
  • progressBar.background#fe5e78
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9380
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#6C6F9380
  • sideBar.background#1a1c24
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA80
  • sideBarSectionHeader.background#1C1E26
  • sideBarSectionHeader.foreground#D5D8DAB3
  • statusBar.background#191b22
  • statusBar.debuggingBackground#fe5e78
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#D5D8DA80
  • statusBar.noFolderBackground#191b22
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBorder#fe5e78
  • tab.border#1c1e26b7
  • tab.inactiveBackground#1C1E26
  • terminal.ansiBlue#26BBD9
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3FDAA4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#EC6A88
  • terminal.ansiBrightYellow#FBC3A7
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#EE64AC
  • terminal.ansiRed#E95678
  • terminal.ansiYellow#FAB795
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9380
  • textLink.activeForeground#fe5e78
  • textLink.foreground#fe5e78
  • titleBar.activeBackground#16181f
  • titleBar.inactiveBackground#1C1E26
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#BBBBBB4Ditalic
variable#f09383
constant#f09383
constant.character.escape#25afbc
entity.name#ffd586
entity.name.function#25afbc
entity.name.tag#e95678
entity.name.type, storage.type.cs#ffd586
entity.other.attribute-name#f09383italic
entity.other.inherited-class#ffd586
entity.other.attribute-name.id#25afbc
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#fab795
entity.name.variable, variable#fe5e78
variable.other.constant#ffd586
keyword#B877DBE6italic
keyword.operator#BBBBBB
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#b877db
keyword.other.unit#f09383
markup.quote#fab795italic
markup.heading, entity.name.section#e95678
markup.bold#b877dbbold
markup.italic#25afbcitalic
markup.inline.raw, markup.fenced_code.block#f09383
markup.underline.link#fab795
storage#b877dbitalic
string.quoted, string.template, string.unquoted#9ad479
string.regexp#f09383
string.other.link#f09383
support#fac29a
support.function#25afbc
support.variable#fac29a
support.type.property-name, meta.object-literal.key#e95678
support.type.property-name.css#BBBBBB
variable.language#fac29aitalic
variable.parameteritalic
string.template meta.embedded#BBBBBB
punctuation.definition.tag#e95678
punctuation.separator#BBBBBB
punctuation.definition.template-expression#b877db
punctuation.section.embedded#b877db
punctuation.definition.list#f09383
meta.function-call.generic.python#25afbc

Shiki preview

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

Loading...