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#0e0e0e
  • activityBar.foreground#505050
  • activityBar.inactiveForeground#303030
  • activityBarBadge.background#909090
  • activityBarBadge.foreground#0e0e0e
  • button.background#909090
  • button.foreground#0e0e0e
  • button.hoverBackground#b0b0b0
  • dropdown.background#161616
  • dropdown.border#252525
  • dropdown.foreground#909090
  • editor.background#0e0e0e
  • editor.findMatchBackground#3d3522
  • editor.findMatchHighlightBackground#2d2818
  • editor.foreground#909090
  • editor.lineHighlightBackground#161616
  • editor.selectionBackground#303030
  • editor.selectionHighlightBackground#252525
  • editorBracketMatch.background#2a2a2a
  • editorBracketMatch.border#404040
  • editorCursor.foreground#f0f0f0
  • editorError.foreground#c47070
  • editorGroup.border#1a1a1a
  • editorGroupHeader.tabsBackground#0e0e0e
  • editorIndentGuide.activeBackground1#282828
  • editorIndentGuide.background1#1a1a1a
  • editorInfo.foreground#6090c0
  • editorLineNumber.activeForeground#454545
  • editorLineNumber.foreground#2a2a2a
  • editorWarning.foreground#c4a050
  • editorWhitespace.foreground#1a1a1a
  • focusBorder#303030
  • gitDecoration.deletedResourceForeground#505050
  • gitDecoration.ignoredResourceForeground#303030
  • gitDecoration.modifiedResourceForeground#606060
  • gitDecoration.untrackedResourceForeground#585858
  • input.background#161616
  • input.border#252525
  • input.foreground#909090
  • input.placeholderForeground#404040
  • inputOption.activeBorder#909090
  • list.activeSelectionBackground#1e1e1e
  • list.activeSelectionForeground#a0a0a0
  • list.focusBackground#1e1e1e
  • list.hoverBackground#161616
  • list.inactiveSelectionBackground#181818
  • minimap.background#0e0e0e
  • panel.background#0e0e0e
  • panel.border#1a1a1a
  • panelTitle.activeBorder#505050
  • panelTitle.activeForeground#909090
  • panelTitle.inactiveForeground#404040
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#40404060
  • scrollbarSlider.background#20202040
  • scrollbarSlider.hoverBackground#30303050
  • sideBar.background#0e0e0e
  • sideBar.foreground#505050
  • sideBarSectionHeader.background#0e0e0e
  • sideBarSectionHeader.foreground#606060
  • sideBarTitle.foreground#606060
  • statusBar.background#0e0e0e
  • statusBar.debuggingBackground#909090
  • statusBar.debuggingForeground#0e0e0e
  • statusBar.foreground#404040
  • statusBar.noFolderBackground#0e0e0e
  • tab.activeBackground#0e0e0e
  • tab.activeBorder#505050
  • tab.activeBorderTop#0e0e0e
  • tab.activeForeground#909090
  • tab.border#0e0e0e
  • tab.inactiveBackground#0e0e0e
  • tab.inactiveForeground#404040
  • terminal.background#0e0e0e
  • terminal.foreground#909090
  • terminalCursor.foreground#909090
  • titleBar.activeBackground#0e0e0e
  • titleBar.activeForeground#606060
  • titleBar.inactiveBackground#0e0e0e
  • titleBar.inactiveForeground#404040
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#d4a050italic
string, string.quoted, string.template, string.interpolated, constant.numeric, constant.language#e8e8e8bold
punctuation.definition.string#707070
entity.name.function, entity.name.method, entity.name.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.namespace, entity.name.module, entity.name.section, variable.other.constant, variable.other.enummember#c0c0c0—
variable, variable.other, variable.parameter, variable.language, variable.function, meta.function-call, support.function, support.variable, entity.other.attribute-name, meta.object-literal.key#a0a0a0—
entity.name.type, support.type, support.class, meta.type.annotation, meta.return.type#888888—
keyword, keyword.control, keyword.other, keyword.operator.new, keyword.operator.expression, storage, storage.type, storage.modifier#686868—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#787878—
punctuation, meta.brace, punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.section, punctuation.accessor#686868—
constant.character.escape, constant.other.placeholder#b0b0b0
string.regexp#c0c0c0—
entity.name.tag#a8a8a8—
invalid, invalid.illegal#e8e8e8underline
markup.heading, markdown.heading, punctuation.definition.heading#d0d0d0bold
markup.bold—bold
markup.italic—italic
markup.inline.raw, markup.raw.block, markup.fenced_code#b0b0b0—
markup.underline.link, string.other.link#a0a0a0underline
markup.inserted#c0c0c0bold
markup.deleted#686868italic
markup.changed#a0a0a0bold italic
support.type.property-name.json#a0a0a0—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#a0a0a0—
support.constant.property-value, support.constant.color, support.constant.font-name#c0c0c0—
Barecode by moondef - VS Code Theme