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.boldbold
markup.italicitalic
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