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.markdownbold
markup.quote.markdown#ece4c8italic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#3b7278
markup.underline.link.markdown,markup.underline.link.image.markdown#7f9040
markup.italic.markdownitalic
markup.strikethroughstrikethrough
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