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.

  • activityBar.background#0f1318
  • activityBar.foreground#dbe0e8
  • activityBar.inactiveForeground#8f98a3
  • activityBarBadge.background#66b6f4
  • activityBarBadge.foreground#0f1318
  • badge.background#66b6f4
  • badge.foreground#0f1318
  • button.background#66b6f4
  • button.foreground#0f1318
  • dropdown.background#181c21
  • dropdown.foreground#dbe0e8
  • editor.background#0f1318
  • editor.foreground#dbe0e8
  • editor.lineHighlightBackground#181c21
  • editor.selectionBackground#2b2f35
  • editorBracketMatch.background#2b2f35
  • editorBracketMatch.border#66b6f4
  • editorCursor.foreground#db78b1
  • editorError.foreground#ef844a
  • editorGroupHeader.tabsBackground#181c21
  • editorHoverWidget.background#181c21
  • editorIndentGuide.activeBackground1#2b2f35
  • editorIndentGuide.background1#181c21
  • editorInfo.foreground#66b6f4
  • editorLineNumber.activeForeground#8f98a3
  • editorLineNumber.foreground#2b2f35
  • editorSuggestWidget.background#181c21
  • editorSuggestWidget.selectedBackground#2b2f35
  • editorWarning.foreground#e6ac4c
  • editorWhitespace.foreground#2b2f35
  • editorWidget.background#181c21
  • editorWidget.border#2b2f35
  • focusBorder#66b6f4
  • foreground#dbe0e8
  • gitDecoration.deletedResourceForeground#ef844a
  • gitDecoration.ignoredResourceForeground#8f98a3
  • gitDecoration.modifiedResourceForeground#d8cf58
  • gitDecoration.untrackedResourceForeground#51daa7
  • input.background#181c21
  • input.border#2b2f35
  • input.foreground#dbe0e8
  • list.activeSelectionBackground#2b2f35
  • list.activeSelectionForeground#dbe0e8
  • list.highlightForeground#66b6f4
  • list.hoverBackground#181c21
  • list.inactiveSelectionBackground#181c21
  • minimap.selectionHighlight#66b6f4
  • panel.background#0f1318
  • panel.border#2b2f35
  • panelTitle.activeForeground#dbe0e8
  • panelTitle.inactiveForeground#8f98a3
  • scrollbarSlider.background#2b2f3580
  • scrollbarSlider.hoverBackground#2b2f35b0
  • sideBar.background#181c21
  • sideBar.foreground#dbe0e8
  • sideBarSectionHeader.background#181c21
  • sideBarTitle.foreground#8f98a3
  • statusBar.background#181c21
  • statusBar.foreground#8f98a3
  • statusBar.noFolderBackground#181c21
  • statusBarItem.remoteBackground#66b6f4
  • statusBarItem.remoteForeground#0f1318
  • tab.activeBackground#0f1318
  • tab.activeBorderTop#66b6f4
  • tab.activeForeground#dbe0e8
  • tab.border#181c21
  • tab.inactiveBackground#181c21
  • tab.inactiveForeground#8f98a3
  • terminal.ansiBlack#2b2f35
  • terminal.ansiBlue#66b6f4
  • terminal.ansiBrightBlack#8f98a3
  • terminal.ansiBrightBlue#b2dafb
  • terminal.ansiBrightCyan#a5f5f9
  • terminal.ansiBrightGreen#51daa7
  • terminal.ansiBrightMagenta#f5b9d9
  • terminal.ansiBrightRed#e6ac4c
  • terminal.ansiBrightWhite#eef2f7
  • terminal.ansiBrightYellow#fcdcad
  • terminal.ansiCyan#5ddae0
  • terminal.ansiGreen#51daa7
  • terminal.ansiMagenta#db78b1
  • terminal.ansiRed#ef844a
  • terminal.ansiWhite#dbe0e8
  • terminal.ansiYellow#d8cf58
  • terminal.background#0f1318
  • terminal.foreground#dbe0e8
  • terminalCursor.foreground#db78b1
  • titleBar.activeBackground#0f1318
  • titleBar.activeForeground#dbe0e8
  • titleBar.inactiveBackground#0f1318
  • titleBar.inactiveForeground#8f98a3
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8f98a3italic
string, string.quoted, constant.other.symbol#51daa7
constant.numeric, constant.numeric.integer, constant.numeric.float#e6ac4c
constant.language, constant.character, support.constant#d8cf58
variable.other.constant, entity.name.constant#d8cf58
keyword, keyword.control, storage, storage.type, storage.modifier#66b6f4
keyword.operator#b2dafb
entity.name.function, meta.function-call, support.function#db78b1
entity.name.type, entity.name.class, support.type, support.class#5ddae0
variable, meta.definition.variable#fcdcad
variable.parameter#a5f5f9
variable.other.property, meta.object-literal.key#fcdcad
punctuation, meta.brace, punctuation.separator, punctuation.terminator#8f98a3
entity.name.tag#db78b1
entity.other.attribute-name#e6ac4c
markup.heading, entity.name.section#66b6f4bold
markup.bold#dbe0e8bold
markup.italic#dbe0e8italic
markup.inserted, markup.inline.raw#51daa7
markup.deleted#ef844a
invalid, invalid.illegal#ef844a