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=== NIGHT'S WATCH: The Shield That Guards the Realms of Men ===
  • _comment2=== Palette: Pure black, charcoal grey, muted steel, frozen highlights ===
  • activityBar.background#020202
  • activityBar.border#0C0C0C
  • activityBar.foreground#808080
  • activityBar.inactiveForeground#303030
  • activityBarBadge.background#404040
  • activityBarBadge.foreground#C0C0C0
  • badge.background#303030
  • badge.foreground#B0B0B0
  • button.background#303030
  • button.foreground#B0B0B0
  • button.hoverBackground#404040
  • button.secondaryBackground#0C0C0C
  • button.secondaryForeground#707070
  • descriptionForeground#404040
  • editor.background#050505
  • editor.findMatchBackground#60606055
  • editor.findMatchHighlightBackground#40404033
  • editor.foreground#A8A8A8
  • editor.hoverHighlightBackground#20202033
  • editor.lineHighlightBackground#0C0C0C
  • editor.lineHighlightBorder#161616
  • editor.selectionBackground#30303066
  • editor.selectionHighlightBackground#30303033
  • editor.wordHighlightBackground#50505022
  • editor.wordHighlightStrongBackground#50505044
  • editorBracketHighlight.foreground1#A0A0A0
  • editorBracketHighlight.foreground2#7A8A7A
  • editorBracketHighlight.foreground3#808080
  • editorBracketHighlight.foreground4#9A9A6A
  • editorBracketHighlight.foreground5#7A3A7A
  • editorBracketHighlight.foreground6#6A6A6A
  • editorBracketHighlight.unexpectedBracket.foreground#CC2222
  • editorBracketMatch.background#50505033
  • editorBracketMatch.border#707070AA
  • editorCodeLens.foreground#404040
  • editorCursor.background#000000
  • editorCursor.foreground#C0C0C0
  • editorGroupHeader.tabsBackground#020202
  • editorGutter.addedBackground#4A9A4A
  • editorGutter.background#050505
  • editorGutter.deletedBackground#800000
  • editorGutter.modifiedBackground#707070
  • editorIndentGuide.activeBackground#40404055
  • editorIndentGuide.background#161616
  • editorInlayHint.background#0C0C0C
  • editorInlayHint.foreground#404040
  • editorLineNumber.activeForeground#707070
  • editorLineNumber.foreground#222222
  • editorLink.activeForeground#A0A0A0
  • editorRuler.foreground#161616
  • editorSuggestWidget.background#050505
  • editorSuggestWidget.highlightForeground#B0B0B0
  • editorSuggestWidget.selectedBackground#20202088
  • editorWhitespace.foreground#161616
  • editorWidget.background#050505
  • editorWidget.border#222222
  • editorWidget.foreground#A8A8A8
  • errorForeground#CC2222
  • focusBorder#40404088
  • gitDecoration.addedResourceForeground#4A9A4A
  • gitDecoration.deletedResourceForeground#CC2222
  • gitDecoration.ignoredResourceForeground#222222
  • gitDecoration.modifiedResourceForeground#9A9A00
  • gitDecoration.untrackedResourceForeground#4A9A4A
  • icon.foreground#707070
  • input.background#030303
  • input.border#222222
  • input.foreground#A8A8A8
  • input.placeholderForeground#303030
  • list.activeSelectionBackground#20202088
  • list.activeSelectionForeground#B0B0B0
  • list.errorForeground#CC2222
  • list.focusBackground#20202066
  • list.focusForeground#B0B0B0
  • list.highlightForeground#C0C0C0
  • list.hoverBackground#0C0C0C
  • list.hoverForeground#A8A8A8
  • list.inactiveSelectionBackground#0C0C0C
  • list.inactiveSelectionForeground#808080
  • list.warningForeground#9A9A00
  • menu.background#050505
  • menu.foreground#A8A8A8
  • menu.selectionBackground#20202088
  • menu.selectionForeground#B0B0B0
  • menu.separatorBackground#161616
  • minimap.background#020202
  • notificationCenterHeader.background#020202
  • notificationCenterHeader.foreground#707070
  • notifications.background#050505
  • notifications.border#0C0C0C
  • notifications.foreground#A8A8A8
  • panel.background#020202
  • panel.border#0C0C0C
  • panelTitle.activeBorder#505050
  • panelTitle.activeForeground#808080
  • panelTitle.inactiveForeground#303030
  • progressBar.background#505050
  • quickInput.background#050505
  • quickInputList.focusBackground#20202088
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#50505088
  • scrollbarSlider.background#22222255
  • scrollbarSlider.hoverBackground#40404044
  • selection.background#30303055
  • settings.headerForeground#808080
  • sideBar.background#030303
  • sideBar.border#0C0C0C
  • sideBar.foreground#606060
  • sideBarSectionHeader.background#020202
  • sideBarSectionHeader.border#16161633
  • sideBarSectionHeader.foreground#707070
  • sideBarTitle.foreground#808080
  • statusBar.background#020202
  • statusBar.border#16161644
  • statusBar.debuggingBackground#404040
  • statusBar.debuggingForeground#C0C0C0
  • statusBar.foreground#606060
  • statusBarItem.activeBackground#30303066
  • statusBarItem.hoverBackground#20202033
  • statusBarItem.remoteBackground#303030
  • statusBarItem.remoteForeground#808080
  • tab.activeBackground#050505
  • tab.activeBorder#303030
  • tab.activeBorderTop#505050
  • tab.activeForeground#B0B0B0
  • tab.border#0C0C0C
  • tab.hoverBackground#0C0C0C
  • tab.hoverForeground#707070
  • tab.inactiveBackground#020202
  • tab.inactiveForeground#303030
  • terminal.ansiBlack#020202
  • terminal.ansiBlue#1A2A4A
  • terminal.ansiBrightBlack#303030
  • terminal.ansiBrightBlue#3A5A8A
  • terminal.ansiBrightCyan#3A6A7A
  • terminal.ansiBrightGreen#4A9A4A
  • terminal.ansiBrightMagenta#7A3A7A
  • terminal.ansiBrightRed#CC2222
  • terminal.ansiBrightWhite#A8A8A8
  • terminal.ansiBrightYellow#9A9A00
  • terminal.ansiCyan#1A3A4A
  • terminal.ansiGreen#2A5A2A
  • terminal.ansiMagenta#4A1A4A
  • terminal.ansiRed#800000
  • terminal.ansiWhite#606060
  • terminal.ansiYellow#5A5A00
  • terminal.background#020202
  • terminal.border#0C0C0C
  • terminal.foreground#A8A8A8
  • terminal.selectionBackground#30303044
  • terminalCursor.foreground#808080
  • titleBar.activeBackground#020202
  • titleBar.activeForeground#707070
  • titleBar.border#0C0C0C
  • titleBar.inactiveBackground#010101
  • titleBar.inactiveForeground#303030
  • window.activeBorder#161616
  • window.inactiveBorder#0C0C0C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#A8A8A8
comment, punctuation.definition.comment#333333italic
keyword, keyword.control, storage.type, storage.modifier#909090bold
keyword.operator#606060
string, string.quoted, string.template#9A9A6A
constant.character.escape#6A9A6A
constant.numeric#7A7A5A
constant, constant.language#C0C0C0bold
constant.language.boolean, constant.language.null#7A8A7Aitalic
entity.name.function, support.function#A0A0A0
variable.parameter#707070italic
entity.name.class, entity.name.type.class, support.class#C0C0C0bold
entity.name.type, support.type#909090
variable, variable.other#7A8A7A
variable.other.property#686868
support.type.property-name#8A8A8A
variable.language.this, variable.language.self#808080italic
keyword.control.import, keyword.control.export#808080bold
punctuation.separator, punctuation.terminator#404040
punctuation.definition.block, meta.brace#505050
entity.name.tag#808080
entity.other.attribute-name#686868italic
entity.name.tag.css, entity.other.attribute-name.class.css#808080
support.type.property-name.css#707070
support.type.property-name.json#8A8A8A
markup.heading#B0B0B0bold
invalid, invalid.illegal#CC2222bold underline
Game of Thrones - The Seven Kingdoms by Abhiroux - VS Code Theme