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#0F0F0F
  • activityBar.border#444444
  • activityBar.foreground#fff
  • activityBar.inactiveForeground#444444
  • activityBarBadge.background#a27ae3
  • activityBarBadge.foreground#fff
  • badge.background#a27ae3
  • badge.foreground#fff
  • button.background#a27ae3
  • button.hoverBackground#a27ae3
  • button.secondaryBackground#36363664
  • button.secondaryHoverBackground#444444
  • debugToolBar.background#444444
  • debugToolBar.border#444444
  • diffEditor.border#444444
  • editor.background#0F0F0F
  • editor.foreground#fff
  • editor.lineHighlightBackground#36363664
  • editor.lineHighlightBorder#de090900
  • editor.selectionBackground#f7a0d336
  • editorCodeLens.foreground#80878e
  • editorCursor.background#fff
  • editorCursor.foreground#f7a0d3
  • editorGroup.border#444444
  • editorGroupHeader.tabsBackground#0F0F0F
  • editorHoverWidget.background#444444
  • editorHoverWidget.border#444444
  • editorIndentGuide.activeBackground#f7a0d3
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#f7a0d3
  • editorLineNumber.foreground#444444
  • editorSuggestWidget.selectedBackground#f7a0d336
  • editorWidget.background#444444
  • editorWidget.resizeBorder#fff
  • focusBorder#a27ae3
  • foreground#fff
  • input.background#30303091
  • list.activeSelectionBackground#0F0F0F
  • list.dropBackground#0F0F0F
  • list.focusBackground#0F0F0F
  • list.highlightForeground#fff
  • list.hoverBackground#0F0F0F
  • list.inactiveSelectionBackground#36363664
  • listFilterWidget.background#0F0F0F
  • notifications.border#444444
  • panel.border#444444
  • peekView.border#fff
  • peekViewTitle.background#0F0F0F
  • scrollbar.shadow#0F0F0F
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#444444
  • scrollbarSlider.hoverBackground#666666
  • selection.background#f7a0d336
  • sideBar.background#0F0F0F
  • sideBar.border#444444
  • sideBarSectionHeader.background#0F0F0F
  • sideBarSectionHeader.border#444444
  • statusBar.background#0F0F0F
  • statusBar.border#444444
  • statusBar.debuggingBackground#0F0F0F
  • statusBar.noFolderBackground#0F0F0F
  • statusBarItem.remoteBackground#a27ae3
  • tab.activeBackground#0F0F0F
  • tab.activeForeground#a27ae3
  • tab.border#444444
  • tab.inactiveBackground#36363664
  • tab.inactiveForeground#fff
  • terminal.border#444444
  • textLink.activeForeground#d1b4fb
  • textLink.foreground#a27ae3
  • titleBar.activeBackground#0F0F0F
  • titleBar.activeForeground#e2eaf5
  • titleBar.border#444444
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#80878e
  • tree.indentGuidesStroke#444444
  • widget.shadow#0F0F0F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#808080
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#d1b4fb
entity.name, meta..default, meta.definition.variable#a27ae3
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#c9d1d9
entity.name.function#7bedbb
entity.name.tag, support.class.component#ff9068
keyword#f7a0d3
storage, storage.type#f7a0d3
storage.modifier.package, storage.modifier.import, storage.type.java#c9d1d9
string, string punctuation.section.embedded source#ffc9aa
support#d1b4fb
meta.property-name#d1b4fb
variable#a27ae3
variable.other#c9d1d9
invalid.broken#ffa198italic
invalid.deprecated#ffa198italic
invalid.illegal#ffa198italic
invalid.unimplemented#ffa198italic
carriage-return#f0f6fcitalic underline
message.error#ffa198
string variable#d1b4fb
source.regexp, string.regexp#ffc9aa
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#ffc9aa
string.regexp constant.character.escape#ff9068
support.constant#d1b4fb
support.variable#d1b4fb
support.type.property-name.json#ff9068
meta.module-reference#d1b4fb
punctuation.definition.list.begin.markdown#a27ae3
markup.heading, markup.heading entity.name#d1b4fb
markup.quote#ff9068
markup.italic#c9d1d9italic
markup.bold#c9d1d9bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#d1b4fb
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffa198
punctuation.section.embedded#f7a0d3
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#ffad55
markup.changed, punctuation.definition.changed#a27ae3
markup.ignored, markup.untracked#161b22
meta.diff.range#7bedbb
meta.diff.header#d1b4fb
meta.separator#d1b4fb
meta.output#d1b4fb
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#808080
brackethighlighter.unmatched#ffa198
constant.other.reference.link, string.other.link#ffc9aaunderline