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#071118
  • activityBar.foreground#88c0d0
  • activityBar.inactiveForeground#637577
  • activityBarBadge.background#88c0d0
  • activityBarBadge.foreground#1a1a1a
  • badge.background#88c0d0
  • badge.foreground#1a1a1a
  • button.background#88c0d0
  • button.foreground#1a1a1a
  • button.hoverBackground#96c8d6
  • dropdown.background#071118
  • editor.background#0a1722
  • editor.findMatchBackground#88c0d066
  • editor.findMatchHighlightBackground#88c0d038
  • editor.foreground#cfe8e0
  • editor.lineHighlightBackground#19252f
  • editor.selectionBackground#88c0d042
  • editorBracketMatch.border#88c0d0
  • editorCursor.foreground#88c0d0
  • editorGroupHeader.tabsBackground#09151f
  • editorIndentGuide.activeBackground1#cfe8e038
  • editorIndentGuide.background1#cfe8e014
  • editorLineNumber.activeForeground#88c0d0
  • editorLineNumber.foreground#637577
  • editorSuggestWidget.selectedBackground#88c0d042
  • editorWhitespace.foreground#cfe8e01a
  • editorWidget.background#071118
  • focusBorder#88c0d0
  • input.background#071118
  • input.foreground#cfe8e0
  • input.placeholderForeground#637577
  • list.activeSelectionBackground#88c0d042
  • list.activeSelectionForeground#cfe8e0
  • list.hoverBackground#19252f
  • list.inactiveSelectionBackground#88c0d024
  • panel.background#09141d
  • panelTitle.activeForeground#88c0d0
  • scrollbarSlider.activeBackground#cfe8e05c
  • scrollbarSlider.background#cfe8e029
  • scrollbarSlider.hoverBackground#cfe8e042
  • selection.background#88c0d04d
  • sideBar.background#09141d
  • sideBar.foreground#cfe8e0
  • sideBarSectionHeader.background#0a1722
  • sideBarTitle.foreground#88c0d0
  • statusBar.background#071118
  • statusBar.foreground#cfe8e0
  • statusBar.noFolderBackground#071118
  • tab.activeBackground#0a1722
  • tab.activeBorderTop#88c0d0
  • tab.activeForeground#88c0d0
  • tab.border#09151f
  • tab.inactiveBackground#09151f
  • tab.inactiveForeground#637577
  • terminal.background#0a1722
  • terminal.foreground#cfe8e0
  • titleBar.activeBackground#071118
  • titleBar.activeForeground#cfe8e0
  • titleBar.inactiveBackground#071118
  • titleBar.inactiveForeground#637577

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4c6a72italic
string, string.quoted, string.template#a3be8c
constant.numeric, constant.language, constant.character#d08770
keyword, keyword.control, storage, storage.type, storage.modifier#b48ead
entity.name.function, support.function, meta.function-call.generic#88c0d0
variable, meta.definition.variable.name, variable.other.readwrite#cfe8e0
variable.parameter, parameter#acc2be
entity.name.type, support.type, support.class, entity.name.namespace#ebcb8b
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#bf616a
keyword.operator#81a1c1
entity.name.tag, punctuation.definition.tag#b48ead
entity.other.attribute-name#88c0d0
constant.other.color, support.constant#d08770
entity.name.type.class#ebcb8bbold
markup.boldbold
markup.italicitalic
markup.heading#88c0d0bold
invalid#0a1722