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=== BEYOND THE WALL: White Walkers & Frozen Wastes ===
  • _comment2=== Palette: True black, electric ice blue, neon cyan, aurora glow ===
  • activityBar.background#000204
  • activityBar.border#041020
  • activityBar.foreground#00BFFF
  • activityBar.inactiveForeground#1A3A5A
  • activityBarBadge.background#0055AA
  • activityBarBadge.foreground#E0F0FF
  • badge.background#0055AA
  • badge.foreground#E0F0FF
  • button.background#0055AA
  • button.foreground#E0F0FF
  • button.hoverBackground#0077CC
  • button.secondaryBackground#041020
  • button.secondaryForeground#5A9AC0
  • contrastBorder#00BFFF44
  • descriptionForeground#2A5A8A
  • editor.background#000408
  • editor.findMatchBackground#00BFFF55
  • editor.findMatchHighlightBackground#00BFFF33
  • editor.foreground#E0F0FF
  • editor.hoverHighlightBackground#00BFFF22
  • editor.lineHighlightBackground#041020
  • editor.lineHighlightBorder#081830
  • editor.selectionBackground#0055FF44
  • editor.selectionHighlightBackground#0055FF22
  • editor.wordHighlightBackground#00BFFF22
  • editor.wordHighlightStrongBackground#00BFFF44
  • editorBracketHighlight.foreground1#00FFFF
  • editorBracketHighlight.foreground2#00FF7F
  • editorBracketHighlight.foreground3#FFD700
  • editorBracketHighlight.foreground4#AA44FF
  • editorBracketHighlight.foreground5#00BFFF
  • editorBracketHighlight.foreground6#CC88FF
  • editorBracketHighlight.unexpectedBracket.foreground#FF0000
  • editorBracketMatch.background#00BFFF33
  • editorBracketMatch.border#00FFFFAA
  • editorCodeLens.foreground#2A5A8A
  • editorCursor.background#000000
  • editorCursor.foreground#00FFFF
  • editorGroupHeader.tabsBackground#000204
  • editorGutter.addedBackground#00FF7F
  • editorGutter.background#000408
  • editorGutter.deletedBackground#FF4444
  • editorGutter.modifiedBackground#FFD700
  • editorIndentGuide.activeBackground#00BFFF55
  • editorIndentGuide.background#081830
  • editorInlayHint.background#041020
  • editorInlayHint.foreground#2A5A8A
  • editorLineNumber.activeForeground#00BFFF
  • editorLineNumber.foreground#1A3A5A
  • editorLink.activeForeground#00BFFF
  • editorRuler.foreground#081830
  • editorSuggestWidget.background#000408
  • editorSuggestWidget.highlightForeground#00BFFF
  • editorSuggestWidget.selectedBackground#0055AA66
  • editorWhitespace.foreground#081830
  • editorWidget.background#000408
  • editorWidget.border#1A3A5A
  • editorWidget.foreground#E0F0FF
  • errorForeground#FF4444
  • focusBorder#00BFFF88
  • gitDecoration.addedResourceForeground#00FF7F
  • gitDecoration.deletedResourceForeground#FF4444
  • gitDecoration.ignoredResourceForeground#1A3A5A
  • gitDecoration.modifiedResourceForeground#FFD700
  • gitDecoration.untrackedResourceForeground#00FF7F
  • icon.foreground#00BFFF
  • input.background#000306
  • input.border#1A3A5A
  • input.foreground#E0F0FF
  • input.placeholderForeground#1A3A5A
  • inputOption.activeBackground#0055AA55
  • inputOption.activeBorder#00BFFF
  • list.activeSelectionBackground#0055AA55
  • list.activeSelectionForeground#00BFFF
  • list.errorForeground#FF4444
  • list.focusBackground#0055AA44
  • list.focusForeground#00BFFF
  • list.highlightForeground#00FFFF
  • list.hoverBackground#041020
  • list.hoverForeground#E0F0FF
  • list.inactiveSelectionBackground#041020
  • list.inactiveSelectionForeground#5A9AC0
  • list.warningForeground#FFD700
  • menu.background#000408
  • menu.foreground#E0F0FF
  • menu.selectionBackground#0055AA66
  • menu.selectionForeground#00BFFF
  • menu.separatorBackground#081830
  • minimap.background#000204
  • notificationCenterHeader.background#000204
  • notificationCenterHeader.foreground#00BFFF
  • notifications.background#000408
  • notifications.border#041020
  • notifications.foreground#E0F0FF
  • panel.background#000204
  • panel.border#041020
  • panelTitle.activeBorder#00BFFF
  • panelTitle.activeForeground#00BFFF
  • panelTitle.inactiveForeground#1A3A5A
  • progressBar.background#00BFFF
  • quickInput.background#000408
  • quickInputList.focusBackground#0055AA66
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#0055AA88
  • scrollbarSlider.background#1A3A5A55
  • scrollbarSlider.hoverBackground#00BFFF44
  • selection.background#0055FF55
  • settings.headerForeground#00BFFF
  • sideBar.background#000306
  • sideBar.border#041020
  • sideBar.foreground#5A9AC0
  • sideBarSectionHeader.background#000204
  • sideBarSectionHeader.border#0055AA33
  • sideBarSectionHeader.foreground#00BFFF
  • sideBarTitle.foreground#00BFFF
  • statusBar.background#000810
  • statusBar.border#00BFFF44
  • statusBar.debuggingBackground#0055AA
  • statusBar.debuggingForeground#E0F0FF
  • statusBar.foreground#00BFFF
  • statusBarItem.activeBackground#0055AA66
  • statusBarItem.hoverBackground#0055AA33
  • statusBarItem.remoteBackground#0055AA
  • statusBarItem.remoteForeground#00BFFF
  • tab.activeBackground#000408
  • tab.activeBorder#0055AA
  • tab.activeBorderTop#00BFFF
  • tab.activeForeground#00BFFF
  • tab.border#041020
  • tab.hoverBackground#041020
  • tab.hoverForeground#5A9AC0
  • tab.inactiveBackground#000204
  • tab.inactiveForeground#1A3A5A
  • terminal.ansiBlack#000204
  • terminal.ansiBlue#007FFF
  • terminal.ansiBrightBlack#1A3A5A
  • terminal.ansiBrightBlue#00BFFF
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#7FFFAA
  • terminal.ansiBrightMagenta#CC88FF
  • terminal.ansiBrightRed#FF8888
  • terminal.ansiBrightWhite#E0F0FF
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#00CED1
  • terminal.ansiGreen#00FF7F
  • terminal.ansiMagenta#AA44FF
  • terminal.ansiRed#FF4444
  • terminal.ansiWhite#5A9AC0
  • terminal.ansiYellow#FFD700
  • terminal.background#000204
  • terminal.border#041020
  • terminal.foreground#E0F0FF
  • terminal.selectionBackground#0055AA44
  • terminalCursor.foreground#00FFFF
  • titleBar.activeBackground#000204
  • titleBar.activeForeground#00BFFF
  • titleBar.border#041020
  • titleBar.inactiveBackground#000102
  • titleBar.inactiveForeground#1A3A5A
  • window.activeBorder#0055AA
  • window.inactiveBorder#041020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#E0F0FF—
comment, punctuation.definition.comment#1A4A6Aitalic
keyword, keyword.control, storage.type, storage.modifier#E0F0FFbold
keyword.operator#5A9AC0—
string, string.quoted, string.template#FFD700—
constant.character.escape#00FF7F—
punctuation.definition.template-expression#FFFF00—
constant.numeric#00CED1—
constant, constant.language#FFFFFFbold
constant.language.boolean, constant.language.null#00CED1italic
entity.name.function, support.function#00BFFF—
variable.parameter#5A9AC0italic
storage.type.function.arrow#E0F0FF—
entity.name.class, entity.name.type.class, support.class#FFFFFFbold
entity.name.type, support.type#AA44FF—
entity.name.type.interface, entity.name.type.enum#CC88FFitalic
variable, variable.other#00FF7F—
variable.other.property#7FB8D8—
support.type.property-name#00BFFF—
variable.language.this, variable.language.self#E0F0FFitalic
keyword.control.import, keyword.control.export#E0F0FFbold
punctuation.separator, punctuation.terminator#2A5A8A—
punctuation.definition.block, meta.brace#3A6A9A—
meta.decorator, entity.name.function.decorator#CC88FFitalic
entity.name.tag#00BFFF—
entity.other.attribute-name#FFD700italic
support.class.component, entity.name.tag.tsx#FFFFFFbold
entity.name.tag.css, entity.other.attribute-name.class.css#00BFFF—
support.type.property-name.css#7FB8D8—
meta.property-value.css#FFD700—
support.type.property-name.json#00BFFF—
markup.heading#00BFFFbold
markup.bold#FFFFFFbold
markup.raw.inline, markup.fenced_code#00CED1—
markup.underline.link#00CED1—
invalid, invalid.illegal#FF0000bold underline
Game of Thrones - The Seven Kingdoms by Abhiroux - VS Code Theme