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 GREYJOY: What Is Dead May Never Die ===
  • _comment2=== Palette: Deep sea black, kraken grey, ocean blue, salt white ===
  • activityBar.background#040810
  • activityBar.border#0E1418
  • activityBar.foreground#7AAFCF
  • activityBar.inactiveForeground#2A4050
  • activityBarBadge.background#1A5A7A
  • activityBarBadge.foreground#D0E0F0
  • badge.background#1A5A7A
  • badge.foreground#D0E0F0
  • button.background#1A5A7A
  • button.foreground#D0E0F0
  • button.hoverBackground#2A6A8A
  • editor.background#080C10
  • editor.findMatchBackground#3A8AB055
  • editor.findMatchHighlightBackground#3A8AB033
  • editor.foreground#B0C4D8
  • editor.hoverHighlightBackground#1A5A7A22
  • editor.lineHighlightBackground#0E1418
  • editor.lineHighlightBorder#162028
  • editor.selectionBackground#1A5A7A50
  • editor.selectionHighlightBackground#1A5A7A30
  • editor.wordHighlightBackground#3A8AB022
  • editorBracketHighlight.foreground1#7AAFCF
  • editorBracketHighlight.foreground2#5A9AB0
  • editorBracketHighlight.foreground3#90C0D0
  • editorBracketHighlight.foreground4#A0B0B8
  • editorBracketHighlight.foreground5#4A8AA0
  • editorBracketHighlight.foreground6#B0C4D8
  • editorBracketHighlight.unexpectedBracket.foreground#FF4444
  • editorBracketMatch.background#3A8AB033
  • editorBracketMatch.border#7AAFCFAA
  • editorCodeLens.foreground#3A5A6A
  • editorCursor.foreground#7AAFCF
  • editorGroupHeader.tabsBackground#040810
  • editorGutter.addedBackground#3A9A6A
  • editorGutter.background#080C10
  • editorGutter.deletedBackground#8A3030
  • editorGutter.modifiedBackground#7AAFCF
  • editorIndentGuide.activeBackground#3A8AB055
  • editorIndentGuide.background#162028
  • editorLineNumber.activeForeground#7AAFCF
  • editorLineNumber.foreground#1E3040
  • editorLink.activeForeground#7AAFCF
  • editorSuggestWidget.highlightForeground#7AAFCF
  • editorSuggestWidget.selectedBackground#1A5A7A55
  • editorWhitespace.foreground#162028
  • editorWidget.background#080C10
  • editorWidget.border#1E3040
  • focusBorder#7AAFCF88
  • gitDecoration.addedResourceForeground#3A9A6A
  • gitDecoration.deletedResourceForeground#CC5555
  • gitDecoration.ignoredResourceForeground#1E3040
  • gitDecoration.modifiedResourceForeground#7AAFCF
  • icon.foreground#7AAFCF
  • input.background#060A0E
  • input.border#1E3040
  • input.foreground#B0C4D8
  • list.activeSelectionBackground#1A5A7A55
  • list.activeSelectionForeground#7AAFCF
  • list.highlightForeground#7AAFCF
  • list.hoverBackground#0E1418
  • list.hoverForeground#B0C4D8
  • list.inactiveSelectionBackground#0E1418
  • minimap.background#040810
  • notifications.background#080C10
  • panel.background#040810
  • panel.border#0E1418
  • panelTitle.activeForeground#7AAFCF
  • panelTitle.inactiveForeground#2A4050
  • progressBar.background#1A5A7A
  • quickInput.background#080C10
  • quickInputList.focusBackground#1A5A7A55
  • scrollbarSlider.background#1E304055
  • scrollbarSlider.hoverBackground#3A8AB044
  • settings.headerForeground#7AAFCF
  • sideBar.background#060A0E
  • sideBar.border#0E1418
  • sideBar.foreground#6A8A9A
  • sideBarSectionHeader.background#040810
  • sideBarSectionHeader.foreground#7AAFCF
  • sideBarTitle.foreground#7AAFCF
  • statusBar.background#040810
  • statusBar.border#1A5A7A44
  • statusBar.debuggingBackground#1A5A7A
  • statusBar.debuggingForeground#D0E0F0
  • statusBar.foreground#7AAFCF
  • tab.activeBackground#080C10
  • tab.activeBorderTop#7AAFCF
  • tab.activeForeground#7AAFCF
  • tab.border#0E1418
  • tab.hoverBackground#0E1418
  • tab.inactiveBackground#040810
  • tab.inactiveForeground#2A4050
  • terminal.ansiBlack#040810
  • terminal.ansiBlue#2A5A8A
  • terminal.ansiBrightBlack#2A4050
  • terminal.ansiBrightBlue#5A8ABA
  • terminal.ansiBrightCyan#5AAABA
  • terminal.ansiBrightGreen#5ABA7A
  • terminal.ansiBrightMagenta#8A7AAA
  • terminal.ansiBrightRed#CC5555
  • terminal.ansiBrightWhite#B0C4D8
  • terminal.ansiBrightYellow#BABA40
  • terminal.ansiCyan#2A7A8A
  • terminal.ansiGreen#3A8A5A
  • terminal.ansiMagenta#5A4A7A
  • terminal.ansiRed#8A3030
  • terminal.ansiWhite#6A8A9A
  • terminal.ansiYellow#8A8A20
  • terminal.background#040810
  • terminal.foreground#B0C4D8
  • terminalCursor.foreground#7AAFCF
  • titleBar.activeBackground#040810
  • titleBar.activeForeground#7AAFCF
  • titleBar.border#0E1418
  • titleBar.inactiveBackground#030608
  • titleBar.inactiveForeground#2A4050
  • window.activeBorder#1A5A7A
  • window.inactiveBorder#0E1418

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#B0C4D8—
comment, punctuation.definition.comment#2A4A5Aitalic
keyword, keyword.control, storage.type, storage.modifier#90C0D0bold
keyword.operator#5A7A8A—
string, string.quoted#5AAABA—
constant.character.escape#3A9A6A—
constant.numeric#BABA40—
constant, constant.language#D0D8E0bold
constant.language.boolean, constant.language.null#7AAFCFitalic
entity.name.function, support.function#7AAFCF—
variable.parameter#6A8A9Aitalic
entity.name.class, support.class#90C0D0bold
entity.name.type, support.type#5A9AB0—
variable, variable.other#6A9A7A—
variable.other.property#6A8A9A—
support.type.property-name#7AAFCF—
variable.language.this#90C0D0italic
keyword.control.import, keyword.control.export#90C0D0bold
punctuation.separator, punctuation.terminator#3A5A6A—
entity.name.tag#7AAFCF—
entity.other.attribute-name#5AAABAitalic
support.type.property-name.json#7AAFCF—
markup.heading#7AAFCFbold
invalid#FF0000bold underline