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#091f1f
  • activityBar.foreground#2ee6c8
  • activityBar.inactiveForeground#597c79
  • activityBarBadge.background#2ee6c8
  • activityBarBadge.foreground#1a1a1a
  • badge.background#2ee6c8
  • badge.foreground#1a1a1a
  • button.background#2ee6c8
  • button.foreground#1a1a1a
  • button.hoverBackground#47e9cf
  • dropdown.background#091f1f
  • editor.background#0d2b2b
  • editor.findMatchBackground#2ee6c866
  • editor.findMatchHighlightBackground#2ee6c838
  • editor.foreground#b6e0d8
  • editor.lineHighlightBackground#1c3838
  • editor.selectionBackground#2ee6c842
  • editorBracketMatch.border#2ee6c8
  • editorCursor.foreground#2ee6c8
  • editorGroupHeader.tabsBackground#0c2727
  • editorIndentGuide.activeBackground1#b6e0d838
  • editorIndentGuide.background1#b6e0d814
  • editorLineNumber.activeForeground#2ee6c8
  • editorLineNumber.foreground#597c79
  • editorSuggestWidget.selectedBackground#2ee6c842
  • editorWhitespace.foreground#b6e0d81a
  • editorWidget.background#091f1f
  • focusBorder#2ee6c8
  • input.background#091f1f
  • input.foreground#b6e0d8
  • input.placeholderForeground#597c79
  • list.activeSelectionBackground#2ee6c842
  • list.activeSelectionForeground#b6e0d8
  • list.hoverBackground#1c3838
  • list.inactiveSelectionBackground#2ee6c824
  • panel.background#0b2525
  • panelTitle.activeForeground#2ee6c8
  • scrollbarSlider.activeBackground#b6e0d85c
  • scrollbarSlider.background#b6e0d829
  • scrollbarSlider.hoverBackground#b6e0d842
  • selection.background#2ee6c84d
  • sideBar.background#0b2525
  • sideBar.foreground#b6e0d8
  • sideBarSectionHeader.background#0d2b2b
  • sideBarTitle.foreground#2ee6c8
  • statusBar.background#091f1f
  • statusBar.foreground#b6e0d8
  • statusBar.noFolderBackground#091f1f
  • tab.activeBackground#0d2b2b
  • tab.activeBorderTop#2ee6c8
  • tab.activeForeground#2ee6c8
  • tab.border#0c2727
  • tab.inactiveBackground#0c2727
  • tab.inactiveForeground#597c79
  • terminal.background#0d2b2b
  • terminal.foreground#b6e0d8
  • titleBar.activeBackground#091f1f
  • titleBar.activeForeground#b6e0d8
  • titleBar.inactiveBackground#091f1f
  • titleBar.inactiveForeground#597c79

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4f7a74italic
string, string.quoted, string.template#7be0a0
constant.numeric, constant.language, constant.character#ffb74d
keyword, keyword.control, storage, storage.type, storage.modifier#4dd0e1
entity.name.function, support.function, meta.function-call.generic#2ee6c8
variable, meta.definition.variable.name, variable.other.readwrite#b6e0d8
variable.parameter, parameter#98bfb9
entity.name.type, support.type, support.class, entity.name.namespace#9ad8ff
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ff8a80
keyword.operator#2ee6c8
entity.name.tag, punctuation.definition.tag#4dd0e1
entity.other.attribute-name#2ee6c8
constant.other.color, support.constant#ffb74d
entity.name.type.class#9ad8ffbold
markup.boldbold
markup.italicitalic
markup.heading#2ee6c8bold
invalid#0d2b2b