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#ece4c8
  • activityBar.foreground#464143
  • activityBarBadge.background#92756f
  • activityBarBadge.foreground#ebe4ca
  • badge.background#ece4c8
  • badge.foreground#464143
  • button.background#92756f
  • button.foreground#ebe4ca
  • debugToolBar.background#f3ecd1
  • diffEditor.insertedTextBackground#7f904080
  • diffEditor.removedTextBackground#89423970
  • dropdown.background#ece4c8
  • dropdown.listBackground#f3ecd1
  • editor.background#f3ecd1
  • editor.foreground#464143
  • editor.lineHighlightBackground#ece4c8
  • editor.selectionBackground#a8c44020
  • editor.selectionHighlightBackground#a8c44020
  • editor.wordHighlightBackground#afa59850
  • editor.wordHighlightStrongBackground#afa59850
  • editorCursor.foreground#894239
  • editorGroup.border#ece4c8
  • editorGroup.dropBackground#ece4c880
  • editorGroupHeader.tabsBackground#ece4c8
  • editorGroupHeader.tabsBorder#ece4c8
  • editorGutter.addedBackground#7f9040
  • editorGutter.commentGlyphForeground#9b4f7b
  • editorGutter.commentRangeForeground#3b7278
  • editorGutter.commentUnresolvedGlyphForeground#92756f
  • editorGutter.deletedBackground#894239
  • editorGutter.modifiedBackground#40325a
  • editorHoverWidget.background#ece4c8
  • editorHoverWidget.border#ece4c8
  • editorIndentGuide.activeBackground#46414330
  • editorIndentGuide.background#46414310
  • editorLineNumber.activeForeground#464143
  • editorLineNumber.foreground#46414340
  • editorSuggestWidget.background#f3ecd1
  • editorSuggestWidget.border#ece4c8
  • editorWhitespace.foreground#46414360
  • editorWidget.background#ece4c8
  • focusBorder#46414330
  • gitDecoration.addedResourceForeground#7f9040
  • gitDecoration.conflictingResourceForeground#894239
  • gitDecoration.deletedResourceForeground#894239
  • gitDecoration.ignoredResourceForeground#9b4f7b
  • gitDecoration.modifiedResourceForeground#40325a
  • gitDecoration.renamedResourceForeground#92756f
  • gitDecoration.stageDeletedResourceForeground#9b4f7b
  • gitDecoration.stageModifiedResourceForeground#3b7278
  • gitDecoration.submoduleResourceForeground#40325a
  • gitDecoration.untrackedResourceForeground#3b7278
  • input.background#ece4c8
  • inputOption.activeBorder#ece4c8
  • inputValidation.errorBackground#8942394A
  • inputValidation.errorBorder#894239
  • inputValidation.infoBackground#40325a
  • inputValidation.infoBorder#40325a
  • inputValidation.warningBackground#92756f
  • inputValidation.warningBorder#92756f
  • list.activeSelectionBackground#46414340
  • list.dropBackground#ece4c8
  • list.errorForeground#894239
  • list.highlightForeground#464143
  • list.hoverBackground#ece4c8
  • list.inactiveSelectionBackground#afa59830
  • list.warningForeground#92756f
  • menu.background#f3ecd1
  • menu.foreground#464143
  • minimap.selectionHighlight#a8c44020
  • panel.background#ece4c8
  • panel.border#46414300
  • panelTitle.activeBorder#ece4c8
  • panelTitle.activeForeground#464143
  • panelTitle.inactiveForeground#46414370
  • peekView.border#ece4c8
  • peekViewEditor.background#f3ecd1
  • peekViewEditor.matchHighlightBackground#ece4c8
  • peekViewResult.background#f3ecd1
  • peekViewResult.matchHighlightBackground#ece4c8
  • peekViewResult.selectionBackground#46414330
  • peekViewTitle.background#f3ecd1
  • pickerGroup.foreground#ece4c8
  • ports.iconRunningProcessForeground#464143
  • progressBar.background#ece4c8
  • quickInputList.focusBackground#46414330
  • selection.background#a8c44020
  • settings.focusedRowBackground#ece4c85A
  • sideBar.background#ece4c8
  • sideBar.border#ece4c8
  • sideBar.foreground#464143C0
  • sideBarSectionHeader.background#f3ecd1
  • statusBar.background#ece4c8
  • statusBar.border#ece4c8
  • statusBar.debuggingBackground#9b4f7b10
  • statusBar.foreground#464143
  • statusBar.noFolderBackground#40325a10
  • statusBarItem.remoteBackground#92756f
  • tab.activeBackground#f3ecd1
  • tab.activeBorder#f3ecd1
  • tab.activeBorderTop#46414300
  • tab.border#ece4c8
  • tab.inactiveBackground#ece4c8
  • tab.inactiveForeground#464143
  • tab.lastPinnedBorder#ece4c8
  • terminal.ansiBlack#464143
  • terminal.ansiBlue#40325a
  • terminal.ansiBrightBlack#464143
  • terminal.ansiBrightBlue#40325a
  • terminal.ansiBrightCyan#3b7278
  • terminal.ansiBrightGreen#7f9040
  • terminal.ansiBrightMagenta#9b4f7b
  • terminal.ansiBrightRed#894239
  • terminal.ansiBrightWhite#ebe4ca
  • terminal.ansiBrightYellow#92756f
  • terminal.ansiCyan#3b7278
  • terminal.ansiGreen#7f9040
  • terminal.ansiMagenta#9b4f7b
  • terminal.ansiRed#894239
  • terminal.ansiWhite#ebe4ca
  • terminal.ansiYellow#92756f
  • titleBar.activeBackground#ece4c8
  • titleBar.border#ece4c8
  • titleBar.inactiveBackground#f3ecd1
  • widget.shadow#f3ecd100

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#464143—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#464143—
comment#afa598—
string#7f9040—
punctuation.definition.template-expression, punctuation.section.embedded#92756f—
meta.template.expression#464143—
constant.numeric#9b4f7b—
variable.other.property#3b7278—
constant.language#9b4f7b—
constant.character, constant.other#9b4f7b—
variable#464143
keyword#92756f—
storage#92756f
storage.type#894239
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#3b7278
entity.other.inherited-class#3b7278
entity.name.function#3b7278
variable.parameter#464143
entity.name.tag#92756f
entity.other.attribute-name#3b7278
support.function#894239
support.constant#894239
support.type, support.class#894239
support.other.variable—
invalid#894239
invalid.deprecated#894239—
meta.structure.dictionary.json string.quoted.double.json#464143—
meta.diff, meta.diff.header#ece4c8—
markup.deleted#92756f—
markup.inserted#3b7278—
markup.changed#7f9040—
constant.numeric.line-number.find-in-files - match#3b7278A0—
entity.name.filename.find-in-files#7f9040—
markup.quote#92756f—
markup.list#7f9040—
markup.bold, markup.italic#894239—
markup.inline.raw#464143
markup.heading#3b7278—
markup.heading.setext#3b7278bold
markup.heading.markdown—bold
markup.quote.markdown#ece4c8italic
markup.bold.markdown—bold
string.other.link.title.markdown,string.other.link.description.markdown#3b7278—
markup.underline.link.markdown,markup.underline.link.image.markdown#7f9040—
markup.italic.markdown—italic
markup.strikethrough—strikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#464143—
punctuation.definition.list.begin.markdown#3b7278—
token.info-token#40325a—
token.warn-token#92756f—
token.error-token#894239—
token.debug-token#40325a—
variable.language#464143—
punctuation.separator#464143—
support.constant.property-value.css#3b7278—