Skip to main content
CodingTheme

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#120e08
  • activityBar.foreground#d3af86
  • badge.background#7f5d38
  • button.background#120e08
  • dropdown.background#51412c
  • editor.background#1d160d
  • editor.foreground#d3af86
  • editor.lineHighlightBackground#2e2414
  • editor.lineHighlightBorder#44351e
  • editor.selectionBackground#84613daa
  • editorCursor.background#120e08
  • editorCursor.foreground#d3af86
  • editorGroupHeader.tabsBackground#131510
  • editorHoverWidget.background#221a14
  • editorLineNumber.activeForeground#adadad
  • editorWhitespace.foreground#a57a4c
  • editorWidget.background#131510
  • focusBorder#a57a4c
  • input.background#51412c
  • inputOption.activeBorder#a57a4c
  • inputValidation.errorBackground#5f0d0d
  • inputValidation.errorBorder#9d2f23
  • inputValidation.infoBackground#2b2a42
  • inputValidation.infoBorder#1b60a5
  • inputValidation.warningBackground#51412c
  • list.activeSelectionBackground#7c5021
  • list.focusBackground#7c5021aa
  • list.highlightForeground#e3b583
  • list.hoverBackground#7c502166
  • list.inactiveSelectionBackground#645342
  • menu.background#362712
  • menu.foreground#cccccc
  • minimap.selectionHighlight#84613daa
  • peekView.border#5e452b
  • peekViewEditor.background#221a14
  • peekViewEditor.matchHighlightBackground#84613daa
  • peekViewResult.background#362712
  • peekViewTitle.background#362712
  • pickerGroup.border#e3b583
  • pickerGroup.foreground#e3b583
  • progressBar.background#7f5d38
  • selection.background#84613daa
  • sideBar.background#241c10
  • statusBar.background#423523
  • statusBar.debuggingBackground#423523
  • statusBar.noFolderBackground#423523
  • statusBarItem.remoteBackground#6e583b
  • tab.inactiveBackground#131510
  • titleBar.activeBackground#423523

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D3AF86
variable.parameter.function#D3AF86
comment, punctuation.definition.comment#A57A4C
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#D3AF86
none#D3AF86
keyword.operator#D3AF86
keyword, keyword.control, keyword.operator.new.cpp, keyword.operator.delete.cpp, keyword.other.using, keyword.other.operator#98676A
variable#DC3958
entity.name.function, meta.require, support.function.any-method#8AB1B0
support.class, entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#F06431
keyword.other.special-method#8AB1B0
storage#98676A
support.function#7E602C
string, constant.other.symbol, entity.other.inherited-class#889B4A
constant.numeric#F79A32
none#F79A32
none#F79A32
constant#F79A32
entity.name.tag#DC3958
entity.other.attribute-name#F79A32
entity.other.attribute-name.id, punctuation.definition.entity#8AB1B0
meta.selector#98676A
none#F79A32
markup.heading, markup.heading.setext, punctuation.definition.heading, entity.name.section#8AB1B0
keyword.other.unit#F79A32
markup.bold, punctuation.definition.bold#F06431bold
markup.italic, punctuation.definition.italic#98676Aitalic
markup.inline.raw#889B4A
string.other.link#DC3958
meta.link#F79A32
markup.list#DC3958
markup.quote#F79A32
meta.separator#D3AF86
markup.inserted#889B4A
markup.deleted#DC3958
markup.changed#98676A
constant.other.color#7E602C
string.regexp#7E602C
constant.character.escape#7E602C
punctuation.section.embedded, variable.interpolation#088649
invalid.illegal#DC3958
comment#D4BB2F
punctuation.definition.comment#D4BB2F
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

WarmDarkCrisp by Akul Mehta - VS Code Theme