Skip to main content
Coding Theme

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#DDD6C1
  • activityBar.foreground#584c27
  • activityBarBadge.background#B58900
  • badge.background#B58900AA
  • button.background#AC9D57
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • dropdown.background#EEE8D5
  • dropdown.border#D3AF86
  • editor.background#FDF6E3
  • editor.foreground#6688cc
  • editor.lineHighlightBackground#EEE8D5
  • editor.selectionBackground#EEE8D5
  • editorCursor.foreground#073642
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.tabsBackground#D9D2C2
  • editorHoverWidget.background#CCC4B0
  • editorIndentGuide.activeBackground#081E2580
  • editorIndentGuide.background#586E7580
  • editorLineNumber.activeForeground#567983
  • editorWhitespace.foreground#586E7580
  • editorWidget.background#EEE8D5
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#D3AF86
  • input.background#DDD6C1
  • input.foreground#586E75
  • input.placeholderForeground#586E75AA
  • inputOption.activeBorder#D3AF86
  • list.activeSelectionBackground#DFCA88
  • list.activeSelectionForeground#6C6C6C
  • list.highlightForeground#B58900
  • list.hoverBackground#DFCA8844
  • list.inactiveSelectionBackground#D1CBB8
  • minimap.selectionHighlight#EEE8D5
  • panel.border#DDD6C1
  • peekView.border#B58900
  • peekViewEditor.background#FFFBF2
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#EEE8D5
  • peekViewTitle.background#EEE8D5
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • progressBar.background#B58900
  • quickInputList.focusBackground#DFCA8866
  • selection.background#CCC4B0
  • sideBar.background#EEE8D5
  • sideBarTitle.foreground#586E75
  • statusBar.background#EEE8D5
  • statusBar.debuggingBackground#EEE8D5
  • statusBar.foreground#586E75
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.prominentHoverBackground#DDD6C199
  • statusBarItem.remoteBackground#AC9D57
  • tab.activeBackground#FDF6E3
  • tab.activeModifiedBorder#cb4b16
  • tab.border#DDD6C1
  • tab.inactiveBackground#D3CBB7
  • tab.inactiveForeground#586E75
  • tab.lastPinnedBorder#FDF6E3
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#586e75
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#b58900
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#b58900
  • terminal.ansiYellow#b58900
  • titleBar.activeBackground#EEE8D5
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#073642
comment, punctuation.whitespace.comment, punctuation.definition.comment#8a8a8a
punctuation, meta.brace, meta.delimiter, meta.bracket#dc322f
keyword.operator#d33682
constant, keyword.operator.infix.tight.at, variable.other.member, meta.record punctuation.brace, keyword.operator.lambda, keyword.operator.colon#073642
constant.numeric, constant.language, string.quoted, punctuation.definition.string, keyword.operator.prefix.minus#268bd2
constant.character.escape, punctuation.quasi.element, punctuation.definition.template-expression, punctuation.section.embedded, storage.type.format, constant.other.placeholder, variable.interpolation, meta.quasi-quotation#073642
keyword, modifier#d33682
keyword, modifier, keyword.operator.bind, punctuation.separator.key-value.html, meta.tag, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, keyword.operator.promotion, keyword.operator.function.infix, punctuation.separator.property#d33682
keyword.other.debugger#EA6279
keyword.operator.double-colon, keyword.operator.arrow, keyword.operator.big-arrow, keyword.operator.period, keyword.operator.eq, keyword.operator.pipe, keyword.operator.double-dot, keyword.operator.lambda, keyword.operator.prefix, punctuation.backtick#dc322fbold
keyword.operator.prefix.at#B3DDF5
keyword.operator.prefix.hash, entity.name.label, constant.other.label#8BBBC2
keyword.operator.postfix.hash, keyword.operator.hash#9099A7
keyword.operator.period#dc322fbold italic
keyword.other.forall#d33682italic
invalid, token.error-token#AA2A2Aunderline
storage.type, support.type, entity.name.type, keyword.type#5f5faf
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation#5f5faf
variable, support.variable, meta.definition.variable#5f5fafitalic
entity.name, entity.other.attribute-name, meta.function.type-declaration, meta.other.unknown, punctuation.backtick, punctuation.decorator, keyword.operator.promotion, keyword.operator.function.infix#073642
meta.import, entity.name.namespace, meta.declaration.module, support.module, support.node, support.other.module, support.type.object.module, entity.name.type.module, entity.name.type.class.module, keyword.control.module#073642
entity.name.function, support.function, meta.function, meta.function-call, entity.name.function, meta.definition.method#5f5faf
meta.preprocessor, keyword.other.preprocessor, punctuation.definition.preprocessor, entity.name.function.preprocessor#2aa198
keyword.other.preprocessorbold
entity.name.type.class, support.class, entity.name.class, entity.other.inherited-class, storage.class#7DAEA3
heading.1.markdown, markup.heading.setext.1.markdown#ea6962bold
heading.2.markdown, markup.heading.setext.2.markdown#e78a4ebold
heading.3.markdown#d8a657bold
heading.4.markdown#a9b665bold
heading.5.markdown#7daea3bold
heading.6.markdown#d3869bbold
punctuation.definition.heading.markdown#928374regular
string.other.link.title.markdown, constant.other.reference.link.markdown, string.other.link.description.markdown#d3869bregular
markup.underline.link.image.markdown, markup.underline.link.markdown#a9b665underline
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.metadata.markdown, punctuation.separator.key-value.markdown, punctuation.definition.constant.markdown#928374
punctuation.definition.bold.markdown#928374regular
meta.separator.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown#928374bold
markup.italicitalic
markup.boldbold
markup.bold markup.italic, markup.italic markup.bolditalic bold
punctuation.definition.markdown, punctuation.definition.raw.markdown#d8a657
fenced_code.block.language#d8a657
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#a9b665
punctuation.definition.list.begin.markdown#ea6962
punctuation.definition.function.latex, punctuation.definition.function.tex, punctuation.definition.keyword.latex, constant.character.newline.tex, punctuation.definition.keyword.tex#928374
support.function.be.latex#ea6962
support.function.section.latex, keyword.control.table.cell.latex, keyword.control.table.newline.latex#e78a4e
support.class.latex, variable.parameter.latex, variable.parameter.function.latex, variable.parameter.definition.label.latex, constant.other.reference.label.latex#d8a657
keyword.control.preamble.latex#d3869b
punctuation.separator.namespace.xml#928374
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml#e78a4e
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#d8a657
string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string.quoted.double.xml, string.quoted.single.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.xml, meta.tag.xml, meta.tag.preprocessor.xml, meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html#a9b665
variable.language.documentroot.xml, meta.tag.sgml.doctype.xml#d3869b
storage.type.proto#d8a657
string.quoted.double.proto.syntax, string.quoted.single.proto.syntax, string.quoted.double.proto, string.quoted.single.proto#a9b665
entity.name.class.proto, entity.name.class.message.proto#89b482
punctuation.definition.entity.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.separator.list.comma.css#928374
entity.other.attribute-name.class.css#ea6962
keyword.other.unit#e78a4e
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#d8a657
string.quoted.single.css, string.quoted.double.css, support.constant.property-value.css, meta.property-value.css, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, constant.numeric.css, support.constant.font-name.css, variable.parameter.keyframe-list.css#a9b665
support.type.property-name.css#89b482
support.type.vendored.property-name.css#7daea3
entity.name.tag.css, entity.other.keyframe-offset.css, punctuation.definition.keyword.css, keyword.control.at-rule.keyframes.css, meta.selector.css#d3869b
hackage-theme by dmarticus - VS Code Theme