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#080b11
  • activityBar.foreground#00f0ff
  • activityBar.inactiveForeground#6e747f
  • activityBarBadge.background#00f0ff
  • activityBarBadge.foreground#1a1a1a
  • badge.background#00f0ff
  • badge.foreground#1a1a1a
  • button.background#00f0ff
  • button.foreground#1a1a1a
  • button.hoverBackground#1ff2ff
  • dropdown.background#080b11
  • editor.background#0b0f17
  • editor.findMatchBackground#00f0ff66
  • editor.findMatchHighlightBackground#00f0ff38
  • editor.foreground#e6f0ff
  • editor.lineHighlightBackground#1a1d25
  • editor.selectionBackground#00f0ff42
  • editorBracketMatch.border#00f0ff
  • editorCursor.foreground#00f0ff
  • editorGroupHeader.tabsBackground#0a0e15
  • editorIndentGuide.activeBackground1#e6f0ff38
  • editorIndentGuide.background1#e6f0ff14
  • editorLineNumber.activeForeground#00f0ff
  • editorLineNumber.foreground#6e747f
  • editorSuggestWidget.selectedBackground#00f0ff42
  • editorWhitespace.foreground#e6f0ff1a
  • editorWidget.background#080b11
  • focusBorder#00f0ff
  • input.background#080b11
  • input.foreground#e6f0ff
  • input.placeholderForeground#6e747f
  • list.activeSelectionBackground#00f0ff42
  • list.activeSelectionForeground#e6f0ff
  • list.hoverBackground#1a1d25
  • list.inactiveSelectionBackground#00f0ff24
  • panel.background#090d14
  • panelTitle.activeForeground#00f0ff
  • scrollbarSlider.activeBackground#e6f0ff5c
  • scrollbarSlider.background#e6f0ff29
  • scrollbarSlider.hoverBackground#e6f0ff42
  • selection.background#00f0ff4d
  • sideBar.background#090d14
  • sideBar.foreground#e6f0ff
  • sideBarSectionHeader.background#0b0f17
  • sideBarTitle.foreground#00f0ff
  • statusBar.background#080b11
  • statusBar.foreground#e6f0ff
  • statusBar.noFolderBackground#080b11
  • tab.activeBackground#0b0f17
  • tab.activeBorderTop#00f0ff
  • tab.activeForeground#00f0ff
  • tab.border#0a0e15
  • tab.inactiveBackground#0a0e15
  • tab.inactiveForeground#6e747f
  • terminal.background#0b0f17
  • terminal.foreground#e6f0ff
  • titleBar.activeBackground#080b11
  • titleBar.activeForeground#e6f0ff
  • titleBar.inactiveBackground#080b11
  • titleBar.inactiveForeground#6e747f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4d5a6bitalic
string, string.quoted, string.template#3ddc97
constant.numeric, constant.language, constant.character#ffd23f
keyword, keyword.control, storage, storage.type, storage.modifier#ff476f
entity.name.function, support.function, meta.function-call.generic#36c5f0
variable, meta.definition.variable.name, variable.other.readwrite#e6f0ff
variable.parameter, parameter#bfc8d5
entity.name.type, support.type, support.class, entity.name.namespace#9d7cff
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ff6b9d
keyword.operator#00f0ff
entity.name.tag, punctuation.definition.tag#ff476f
entity.other.attribute-name#36c5f0
constant.other.color, support.constant#ffd23f
entity.name.type.class#9d7cffbold
markup.boldbold
markup.italicitalic
markup.heading#00f0ffbold
invalid#0b0f17