Skip to main content
Coding Theme

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.

  • _comment=== HOUSE STARK: Winter Is Coming ===
  • _comment2=== Palette: Deep blue-grey, ice blue accents, frost white, steel grey ===
  • activityBar.background#080C12
  • activityBar.border#151D28
  • activityBar.foreground#79B8FF
  • activityBar.inactiveForeground#3A4F62
  • activityBarBadge.background#2E5C80
  • activityBarBadge.foreground#E8F0FE
  • badge.background#2E5C80
  • badge.foreground#E8F0FE
  • breadcrumb.activeSelectionForeground#CBD5E1
  • breadcrumb.focusForeground#79B8FF
  • breadcrumb.foreground#5A6F82
  • button.background#2E5C80
  • button.foreground#E8F0FE
  • button.hoverBackground#3D7BAA
  • button.secondaryBackground#151D28
  • button.secondaryForeground#8096AB
  • debugToolBar.background#080C12
  • descriptionForeground#5A6F82
  • diffEditor.insertedTextBackground#3FB95022
  • diffEditor.removedTextBackground#FF7B7233
  • editor.background#0E1319
  • editor.findMatchBackground#79B8FF55
  • editor.findMatchHighlightBackground#79B8FF33
  • editor.findRangeHighlightBackground#79B8FF11
  • editor.foreground#CBD5E1
  • editor.hoverHighlightBackground#2E5C8033
  • editor.lineHighlightBackground#151D28
  • editor.lineHighlightBorder#1E2A38
  • editor.rangeHighlightBackground#2E5C8022
  • editor.selectionBackground#2E5C8050
  • editor.selectionHighlightBackground#2E5C8030
  • editor.wordHighlightBackground#79B8FF22
  • editor.wordHighlightStrongBackground#79B8FF44
  • editorBracketHighlight.foreground1#79B8FF
  • editorBracketHighlight.foreground2#56D364
  • editorBracketHighlight.foreground3#FF7B72
  • editorBracketHighlight.foreground4#D2A8FF
  • editorBracketHighlight.foreground5#E3B341
  • editorBracketHighlight.foreground6#39C5CF
  • editorBracketHighlight.unexpectedBracket.foreground#FF0000
  • editorBracketMatch.background#79B8FF33
  • editorBracketMatch.border#79B8FFAA
  • editorCodeLens.foreground#5A6F82
  • editorCursor.background#000000
  • editorCursor.foreground#79B8FF
  • editorGroupHeader.tabsBackground#080C12
  • editorGutter.addedBackground#3FB950
  • editorGutter.background#0E1319
  • editorGutter.deletedBackground#FF7B72
  • editorGutter.modifiedBackground#D29922
  • editorIndentGuide.activeBackground#79B8FF55
  • editorIndentGuide.background#1E2A38
  • editorInlayHint.background#151D28
  • editorInlayHint.foreground#5A6F82
  • editorLineNumber.activeForeground#79B8FF
  • editorLineNumber.foreground#2E3D4F
  • editorLink.activeForeground#79B8FF
  • editorRuler.foreground#1E2A38
  • editorSuggestWidget.background#0E1319
  • editorSuggestWidget.border#1E2A38
  • editorSuggestWidget.highlightForeground#79B8FF
  • editorSuggestWidget.selectedBackground#2E5C8066
  • editorWhitespace.foreground#1E2A38
  • editorWidget.background#0E1319
  • editorWidget.border#2E3D4F
  • editorWidget.foreground#CBD5E1
  • errorForeground#FF7B72
  • focusBorder#79B8FF88
  • gitDecoration.addedResourceForeground#3FB950
  • gitDecoration.conflictingResourceForeground#E3B341
  • gitDecoration.deletedResourceForeground#FF7B72
  • gitDecoration.ignoredResourceForeground#2E3D4F
  • gitDecoration.modifiedResourceForeground#D29922
  • gitDecoration.untrackedResourceForeground#3FB950
  • icon.foreground#79B8FF
  • input.background#0B0F15
  • input.border#2E3D4F
  • input.foreground#CBD5E1
  • input.placeholderForeground#3A4F62
  • inputOption.activeBackground#2E5C8066
  • inputOption.activeBorder#79B8FF
  • list.activeSelectionBackground#2E5C8055
  • list.activeSelectionForeground#79B8FF
  • list.errorForeground#FF7B72
  • list.focusBackground#2E5C8044
  • list.focusForeground#79B8FF
  • list.highlightForeground#79B8FF
  • list.hoverBackground#151D28
  • list.hoverForeground#CBD5E1
  • list.inactiveSelectionBackground#151D28
  • list.inactiveSelectionForeground#8096AB
  • list.warningForeground#E3B341
  • menu.background#0E1319
  • menu.foreground#CBD5E1
  • menu.selectionBackground#2E5C8066
  • menu.selectionForeground#79B8FF
  • menu.separatorBackground#1E2A38
  • minimap.background#080C12
  • minimap.findMatchHighlight#79B8FFAA
  • notificationCenterHeader.background#080C12
  • notificationCenterHeader.foreground#79B8FF
  • notifications.background#0E1319
  • notifications.border#151D28
  • notifications.foreground#CBD5E1
  • panel.background#080C12
  • panel.border#151D28
  • panelTitle.activeBorder#79B8FF
  • panelTitle.activeForeground#79B8FF
  • panelTitle.inactiveForeground#3A4F62
  • peekView.border#2E5C80
  • peekViewEditor.background#0B0F15
  • peekViewResult.background#080C12
  • peekViewTitle.background#0E1319
  • progressBar.background#2E5C80
  • quickInput.background#0E1319
  • quickInput.foreground#CBD5E1
  • quickInputList.focusBackground#2E5C8066
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#2E5C8088
  • scrollbarSlider.background#2E3D4F55
  • scrollbarSlider.hoverBackground#79B8FF44
  • selection.background#2E5C8055
  • settings.headerForeground#79B8FF
  • settings.modifiedItemIndicator#D29922
  • sideBar.background#0B0F15
  • sideBar.border#151D28
  • sideBar.foreground#8096AB
  • sideBarSectionHeader.background#080C12
  • sideBarSectionHeader.border#2E5C8033
  • sideBarSectionHeader.foreground#79B8FF
  • sideBarTitle.foreground#79B8FF
  • statusBar.background#060A10
  • statusBar.border#2E5C8044
  • statusBar.debuggingBackground#2E5C80
  • statusBar.debuggingForeground#E8F0FE
  • statusBar.foreground#79B8FF
  • statusBarItem.activeBackground#2E5C8066
  • statusBarItem.hoverBackground#2E5C8033
  • statusBarItem.remoteBackground#2E5C80
  • statusBarItem.remoteForeground#79B8FF
  • tab.activeBackground#0E1319
  • tab.activeBorder#2E5C80
  • tab.activeBorderTop#79B8FF
  • tab.activeForeground#79B8FF
  • tab.border#151D28
  • tab.hoverBackground#151D28
  • tab.hoverForeground#8096AB
  • tab.inactiveBackground#080C12
  • tab.inactiveForeground#3A4F62
  • terminal.ansiBlack#080C12
  • terminal.ansiBlue#388BFD
  • terminal.ansiBrightBlack#3A4F62
  • terminal.ansiBrightBlue#79B8FF
  • terminal.ansiBrightCyan#56D4DD
  • terminal.ansiBrightGreen#56D364
  • terminal.ansiBrightMagenta#D2A8FF
  • terminal.ansiBrightRed#FFA198
  • terminal.ansiBrightWhite#CBD5E1
  • terminal.ansiBrightYellow#E3B341
  • terminal.ansiCyan#39C5CF
  • terminal.ansiGreen#3FB950
  • terminal.ansiMagenta#BC8CFF
  • terminal.ansiRed#FF7B72
  • terminal.ansiWhite#8096AB
  • terminal.ansiYellow#D29922
  • terminal.background#080C12
  • terminal.border#151D28
  • terminal.foreground#CBD5E1
  • terminal.selectionBackground#2E5C8044
  • terminalCursor.foreground#79B8FF
  • testing.iconErrored#E3B341
  • testing.iconFailed#FF7B72
  • testing.iconPassed#3FB950
  • titleBar.activeBackground#080C12
  • titleBar.activeForeground#79B8FF
  • titleBar.border#151D28
  • titleBar.inactiveBackground#060A10
  • titleBar.inactiveForeground#3A4F62
  • welcomePage.background#080C12
  • welcomePage.tileBackground#0E1319
  • welcomePage.tileHoverBackground#151D28
  • window.activeBorder#2E5C80
  • window.inactiveBorder#151D28

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#CBD5E1
comment, punctuation.definition.comment#3F5468italic
keyword, keyword.control, storage.type, storage.modifier#FF7B72bold
keyword.operator, keyword.operator.logical#8096AB
string, string.quoted, string.template#A5D6FF
constant.character.escape#56D364
punctuation.definition.template-expression#E3B341
constant.numeric#79C0FF
constant, constant.language#E8F0FEbold
constant.language.boolean, constant.language.null#79C0FFitalic
entity.name.function, support.function, meta.function-call entity.name.function#79B8FF
variable.parameter#E3B341italic
storage.type.function.arrow#FF7B72
entity.name.class, entity.name.type.class, support.class#E8F0FEbold
entity.name.type, support.type, storage.type.primitive#D2A8FF
entity.name.type.interface, entity.name.type.enum#BC8CFFitalic
variable, variable.other, variable.other.readwrite#56D364
variable.other.property, support.variable.property#8096AB
meta.objectliteral string.key, support.type.property-name#A5D6FF
variable.language.this, variable.language.self#FF7B72italic
keyword.control.import, keyword.control.export, keyword.control.from#FF7B72bold
punctuation.separator, punctuation.terminator, punctuation.accessor#5A6F82
punctuation.definition.block, meta.brace, punctuation.bracket#6B8098
meta.decorator, entity.name.function.decorator#BC8CFFitalic
entity.name.tag#79B8FF
entity.other.attribute-name#E3B341italic
support.class.component, entity.name.tag.tsx#E8F0FEbold
entity.name.tag.css, entity.other.attribute-name.class.css#79B8FF
support.type.property-name.css#8096AB
meta.property-value.css, support.constant.property-value.css#A5D6FF
entity.other.attribute-name.id.css#E3B341
support.type.property-name.json#79B8FF
markup.heading, entity.name.section.markdown#79B8FFbold
markup.bold#E8F0FEbold
markup.italic#CBD5E1italic
markup.raw.inline, markup.fenced_code#A5D6FF
markup.underline.link#39C5CF
invalid, invalid.illegal#FF0000bold underline
invalid.deprecated#E3B341underline