Skip to main content
CodingTheme

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.activeBorder#2A7BCF
  • activityBar.background#1C1E26
  • activityBar.foreground#b3bddab3
  • activityBarBadge.background#2A7BCF
  • activityBarBadge.foreground#D5D8DA
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#232530
  • button.background#2A7BCF
  • button.hoverBackground#3697ff
  • 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#2E303EB3
  • editor.selectionHighlightBackground#6C6F934D
  • editor.wordHighlightBackground#6C6F9380
  • editor.wordHighlightStrongBackground#6C6F9380
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#1C1E26
  • editorCursor.foreground#D5D8DA
  • 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#2A7BCF
  • editorWarning.foreground#f8d64c
  • editorWidget.background#232530
  • editorWidget.border#232530
  • errorForeground#fe5e78
  • extensionButton.prominentBackground#2A7BCF
  • extensionButton.prominentHoverBackground#3697FF
  • focusBorder#2A7BCF
  • 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#2A7BCF
  • list.hoverBackground#2E303E80
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E80
  • list.inactiveSelectionBackground#2E303E4D
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#ffe683d8
  • panelTitle.activeBorder#2A7BCF
  • peekView.border#1A1C23
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#6C6F9380
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#6C6F9380
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#232530
  • pickerGroup.foreground#2A7BCF
  • progressBar.background#2A7BCF
  • 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#2A7BCF
  • statusBar.debuggingBackground#FE5E78
  • statusBar.debuggingForeground#191b22
  • statusBar.foreground#D5D8DA
  • statusBar.noFolderBackground#191b22
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • statusBarItem.remoteBackground#00477C
  • statusBarItem.remoteForeground#D5D8DA
  • tab.activeBorder#2A7BCF
  • 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#3697ff
  • textLink.foreground#2A7BCF
  • 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#F09483E6
constant#F09483E6
constant.character.escape#25B0BCE6
entity.name#ffd486e6
entity.name.function#25B0BCE6
entity.name.tag#E95678E6
entity.name.type, storage.type.cs#ffd486e6
entity.other.attribute-name#F09483E6italic
entity.other.inherited-class#ffd486e6
entity.other.attribute-name.id#25B0BCE6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6
entity.name.variable, variable#fe5e78
variable.other.constant#ffd486e6
keyword#B877DBE6italic
keyword.operator#BBBBBB
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#B877DBE6
keyword.other.unit#F09483E6
markup.quote#FAB795B3italic
markup.heading, entity.name.section#E95678E6
markup.bold#B877DBE6bold
markup.italic#25B0BCE6italic
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6
storage#B877DBE6italic
string.quoted, string.template#9ad479e6
string.regexp#F09483E6
string.other.link#F09483E6
support#FAC29AE6
support.function#25B0BCE6
support.variable#FAC29AE6
support.type.property-name, meta.object-literal.key#E95678E6
support.type.property-name.css#BBBBBB
variable.language#FAC29AE6italic
variable.parameteritalic
string.template meta.embedded#BBBBBB
punctuation.definition.tag#E95678B3
punctuation.separator#BBBBBB
punctuation.definition.template-expression#B877DBE6
punctuation.section.embedded#B877DBE6
punctuation.definition.list#F09483E6
meta.function-call.generic.python#25B0BCE6

Shiki preview

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

Loading...

Horizon Extended Blue Theme by Volodymyr Storozhuk - VS Code Theme