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#252c34
  • activityBar.foreground#ebd1b7
  • activityBarBadge.background#d2674e
  • activityBarBadge.foreground#ffffff
  • badge.background#95cc5e
  • badge.foreground#ffffff
  • button.background#d2674e
  • button.foreground#ffffff
  • dropdown.background#302c27
  • dropdown.border#302c27
  • dropdown.foreground#ebd1b7
  • editor.background#252c34
  • editor.foreground#ebd1b7
  • editor.hoverHighlightBackground#95cc5e22
  • editor.lineHighlightBackground#3e3933
  • editor.selectionBackground#db784d55
  • editor.wordHighlightBackground#60a36522
  • editor.wordHighlightStrongBackground#db784d22
  • editorBracketMatch.background#95cc5e44
  • editorBracketMatch.border#db784d
  • editorCursor.foreground#f8f8f0
  • editorGroupHeader.tabsBackground#252c34
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#252c34
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#524a43
  • editorLineNumber.foreground#6e645a
  • editorLink.activeForeground#95cc5e
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#db784d55
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#524a43
  • editorSuggestWidget.foreground#ebd1b7
  • editorSuggestWidget.highlightForeground#95cc5e
  • editorSuggestWidget.selectedBackground#6e645a
  • editorWhitespace.foreground#524a43
  • editorWidget.background#524a43
  • editorWidget.border#6e645a
  • extensionButton.prominentBackground#95cc5e
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#aed885
  • focusBorder#95cc5e
  • foreground#ebd1b7
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#8a7d71
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#77851c
  • input.background#282421
  • input.border#60574e
  • input.foreground#ebd1b7
  • input.placeholderForeground#695f55
  • inputOption.activeBorder#db784d
  • list.activeSelectionBackground#db784d
  • list.activeSelectionForeground#36312c
  • list.focusBackground#60574e
  • list.focusHighlightForeground#f8bb39
  • list.highlightForeground#d2674e
  • list.hoverBackground#3e3933
  • list.inactiveSelectionBackground#36312c
  • panel.background#252c34
  • panel.border#252c34
  • panelTitle.activeBorder#95cc5e
  • panelTitle.inactiveForeground#968a7e
  • peekView.border#95cc5e
  • peekViewEditor.background#2b2723
  • peekViewEditor.matchHighlightBackground#db784d55
  • peekViewEditorGutter.background#302c27
  • peekViewResult.background#443e37
  • peekViewResult.fileForeground#e7c7a7
  • peekViewResult.lineForeground#e0b78f
  • peekViewResult.matchHighlightBackground#db784d55
  • peekViewResult.selectionBackground#3c3631
  • peekViewResult.selectionForeground#ebd1b7
  • peekViewTitle.background#302c27
  • peekViewTitleDescription.foreground#e8c9ab
  • peekViewTitleLabel.foreground#ebd1b7
  • progressBar.background#60a365
  • scrollbar.shadow#1a1715
  • scrollbarSlider.activeBackground#95cc5eaa
  • scrollbarSlider.background#6e645aaa
  • scrollbarSlider.hoverBackground#95cc5e55
  • sideBar.background#252c34
  • sideBar.foreground#ebd1b7
  • sideBarSectionHeader.background#252c34
  • sideBarSectionHeader.foreground#ebd1b7
  • statusBar.background#252c34
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#db784d
  • tab.activeBorder#d2674e
  • tab.border#252c34
  • tab.inactiveBackground#252c34
  • tab.inactiveForeground#a2978c
  • terminal.ansiBlack#443e37
  • terminal.ansiBlue#60a365
  • terminal.ansiBrightBlack#6e645a
  • terminal.ansiBrightBlue#a1c8a4
  • terminal.ansiBrightCyan#c8e5ab
  • terminal.ansiBrightGreen#c8e5ab
  • terminal.ansiBrightMagenta#ecb8a2
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ecb8a2
  • terminal.ansiCyan#95cc5e
  • terminal.ansiGreen#95cc5e
  • terminal.ansiMagenta#db784d
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#f1decb
  • terminal.ansiYellow#db784d
  • terminal.background#252c34
  • terminal.foreground#ebd1b7
  • textLink.activeForeground#d2674e
  • textLink.foreground#77851c
  • titleBar.activeBackground#252c34
  • titleBar.inactiveBackground#252c34

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7A7267
string, constant.numeric, meta.structure.dictionary.json string.quoted.double.json, meta.property-value, support.constant.property-value, constant.other.color, meta.structure.dictionary.value.json string.quoted.double.json, variable.parameter.function.coffee, markup.raw.inline.markdown, variable.language.this.ts, entity.name.type.ts#F8BB39
constant.character, constant.language, constant.other, entity.other.inherited-class, storage, keyword, entity.other.attribute-name, support.constant, support.type, support.class, meta.structure.dictionary.json string.quoted.double.json, meta.structure.dictionary.json string.quoted.double.json, entity.name.section.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#DB784D
entity.name.class#DB784Dunderline
variable
entity.name.function, entity.name.function-call.elixir, variable.other.global.php#60A365
support.other.variable
invalid, invalid.deprecated#CF433E
meta.diff, meta.diff.header#7A7267
markup.deleted#E61F44
markup.inserted#A6E22E
markup.changed#F7B83D
constant.numeric.line-number.find-in-files - match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#A0988E
meta.property-name support.type.property-nameitalic
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as, markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown, markup.bold.markdown, markup.italic.markdown, storage.type, entity.name.tag, support.function, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx#95CC5E
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#95CC5Eitalic
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#664E4D
markup.deleted.git_gutter#E61F44
markup.inserted.git_gutter#A7DA1E
markup.changed.git_gutter#F7B83D
meta.template.expression, meta.embedded.block.html, variable.parameter, meta.property-value punctuation.separator.key-value, source.elixir#EBD1B7
source.elixir, source.go#E5AB91
constant.language.json.comments, variable.language.this.js, variable.other#E5AB91italic
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.svelte, punctuation.definition.tag.end.svelte, meta.attribute.class.svelte, expression.embedded.vue, variable.other.readwrite.ts, variable.other.constant.ts, variable.parameter.ts, variable.language.super.ts, meta.object-literal.key.ts, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.js, entity.name.type.class.ts, variable.object.property.ts, entity.name.tag.html, entity.name.tag.block.any.html, entity.name.tag.other.html, entity.name.tag.script.html, entity.name.tag.style.html, entity.name.tag.css, entity.name.tag.custom.css, punctuation.section.embedded.elixir, constant.language.symbol.elixir, entity.name.tag#77851C
#528491
entity.name.type.module.elixir, variable.other.anonymous.elixir, keyword.operator.assignment#5aa395
entity.name.package#8fbf7d
entity.name.import#B9BB25
variable.other.object.property.ts, variable.other.property.ts, variable.other.object.ts, variable.other.property.ts, variable.other.readwrite.ts, variable.other.object.js, variable.other.object.property.js, variable.other.property.js, meta.object-literal.key.js, variable.other.constant.elixir, parameter.variable.function.elixir, variable.other.php, keyword.package, keyword.import, keyword.function#B34233
punctuation.separator, punctuation.section.embedded, meta.function, meta.brace.round, punctuation.terminator.statement, punctuation.definition.block, punctuation.other, punctuation.definition.begin.bracket.curly, punctuation.definition.end.bracket.curly, punctuation.definition.begin.bracket.round, punctuation.definition.end.bracket.round, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square#fe7f1b
keyword.control.conditional#f8ba39
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token, keyword.operator.other.elixir, punctuation.separator.object.elixir#B267E6