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