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#000000
  • activityBar.foreground#00ff41
  • activityBar.inactiveForeground#00731d
  • activityBarBadge.background#00ff41
  • activityBarBadge.foreground#1a1a1a
  • badge.background#00ff41
  • badge.foreground#1a1a1a
  • button.background#00ff41
  • button.foreground#1a1a1a
  • button.hoverBackground#1fff58
  • dropdown.background#000000
  • editor.background#000000
  • editor.findMatchBackground#00ff4166
  • editor.findMatchHighlightBackground#00ff4138
  • editor.foreground#00ff41
  • editor.lineHighlightBackground#0f0f0f
  • editor.selectionBackground#00ff4142
  • editorBracketMatch.border#00ff41
  • editorCursor.foreground#00ff41
  • editorGroupHeader.tabsBackground#000000
  • editorIndentGuide.activeBackground1#00ff4138
  • editorIndentGuide.background1#00ff4114
  • editorLineNumber.activeForeground#00ff41
  • editorLineNumber.foreground#00731d
  • editorSuggestWidget.selectedBackground#00ff4142
  • editorWhitespace.foreground#00ff411a
  • editorWidget.background#000000
  • focusBorder#00ff41
  • input.background#000000
  • input.foreground#00ff41
  • input.placeholderForeground#00731d
  • list.activeSelectionBackground#00ff4142
  • list.activeSelectionForeground#00ff41
  • list.hoverBackground#0f0f0f
  • list.inactiveSelectionBackground#00ff4124
  • panel.background#000000
  • panelTitle.activeForeground#00ff41
  • scrollbarSlider.activeBackground#00ff415c
  • scrollbarSlider.background#00ff4129
  • scrollbarSlider.hoverBackground#00ff4142
  • selection.background#00ff414d
  • sideBar.background#000000
  • sideBar.foreground#00ff41
  • sideBarSectionHeader.background#000000
  • sideBarTitle.foreground#00ff41
  • statusBar.background#000000
  • statusBar.foreground#00ff41
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#00ff41
  • tab.activeForeground#00ff41
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#00731d
  • terminal.background#000000
  • terminal.foreground#00ff41
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#00ff41
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#00731d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#0a6b2aitalic
string, string.quoted, string.template#7cfc00
constant.numeric, constant.language, constant.character#76ff03
keyword, keyword.control, storage, storage.type, storage.modifier#39ff14
entity.name.function, support.function, meta.function-call.generic#00e676
variable, meta.definition.variable.name, variable.other.readwrite#00ff41
variable.parameter, parameter#00d135
entity.name.type, support.type, support.class, entity.name.namespace#b9f6ca
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#00c853
keyword.operator#69f0ae
entity.name.tag, punctuation.definition.tag#39ff14
entity.other.attribute-name#00e676
constant.other.color, support.constant#76ff03
entity.name.type.class#b9f6cabold
markup.boldbold
markup.italicitalic
markup.heading#00ff41bold
invalid#000000