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#1a1b16
  • activityBar.foreground#c5c7bf
  • activityBarBadge.background#738683
  • activityBarBadge.foreground#c5c7bf
  • badge.background#2a2b22
  • badge.foreground#c5c7bf
  • button.background#738683
  • button.foreground#c5c7bf
  • debugToolBar.background#22231c
  • diffEditor.insertedTextBackground#acad8c80
  • diffEditor.removedTextBackground#bd9e9a70
  • dropdown.background#2a2b22
  • dropdown.listBackground#22231c
  • editor.background#22231c
  • editor.foreground#c5c7bf
  • editor.lineHighlightBackground#2a2b22
  • editor.selectionBackground#66645e40
  • editor.selectionHighlightBackground#66645e40
  • editor.wordHighlightBackground#66645e50
  • editor.wordHighlightStrongBackground#66645e50
  • editorCursor.foreground#a6beba
  • editorGroup.border#2a2b22
  • editorGroup.dropBackground#2a2b2280
  • editorGroupHeader.tabsBackground#1a1b16
  • editorGroupHeader.tabsBorder#1a1b16
  • editorGutter.addedBackground#acad8c
  • editorGutter.commentGlyphForeground#bd9e9a
  • editorGutter.commentRangeForeground#a6beba
  • editorGutter.commentUnresolvedGlyphForeground#ada99d
  • editorGutter.deletedBackground#bd9e9a
  • editorGutter.modifiedBackground#738683
  • editorHoverWidget.background#2a2b22
  • editorHoverWidget.border#2a2b22
  • editorIndentGuide.activeBackground#c5c7bf30
  • editorIndentGuide.background#c5c7bf10
  • editorLineNumber.activeForeground#c5c7bf
  • editorLineNumber.foreground#c5c7bf40
  • editorSuggestWidget.background#22231c
  • editorSuggestWidget.border#2a2b22
  • editorWhitespace.foreground#c5c7bf60
  • editorWidget.background#2a2b22
  • focusBorder#c5c7bf30
  • gitDecoration.addedResourceForeground#acad8c
  • gitDecoration.conflictingResourceForeground#bd9e9a
  • gitDecoration.deletedResourceForeground#bd9e9a
  • gitDecoration.ignoredResourceForeground#bd9e9a
  • gitDecoration.modifiedResourceForeground#738683
  • gitDecoration.renamedResourceForeground#ada99d
  • gitDecoration.stageDeletedResourceForeground#bd9e9a
  • gitDecoration.stageModifiedResourceForeground#a6beba
  • gitDecoration.submoduleResourceForeground#738683
  • gitDecoration.untrackedResourceForeground#a6beba
  • input.background#2a2b22
  • inputOption.activeBorder#2a2b22
  • inputValidation.errorBackground#bd9e9a4A
  • inputValidation.errorBorder#bd9e9a
  • inputValidation.infoBackground#738683
  • inputValidation.infoBorder#738683
  • inputValidation.warningBackground#ada99d
  • inputValidation.warningBorder#ada99d
  • list.activeSelectionBackground#c5c7bf40
  • list.dropBackground#2a2b22
  • list.errorForeground#bd9e9a
  • list.highlightForeground#c5c7bf
  • list.hoverBackground#2a2b22
  • list.inactiveSelectionBackground#66645e30
  • list.warningForeground#ada99d
  • menu.background#22231c
  • menu.foreground#c5c7bf
  • minimap.selectionHighlight#66645e40
  • panel.background#1a1b16
  • panel.border#c5c7bf00
  • panelTitle.activeBorder#2a2b22
  • panelTitle.activeForeground#c5c7bf
  • panelTitle.inactiveForeground#c5c7bf70
  • peekView.border#2a2b22
  • peekViewEditor.background#22231c
  • peekViewEditor.matchHighlightBackground#2a2b22
  • peekViewResult.background#22231c
  • peekViewResult.matchHighlightBackground#2a2b22
  • peekViewResult.selectionBackground#c5c7bf30
  • peekViewTitle.background#22231c
  • pickerGroup.foreground#2a2b22
  • ports.iconRunningProcessForeground#c5c7bf
  • progressBar.background#2a2b22
  • quickInputList.focusBackground#c5c7bf30
  • selection.background#66645e40
  • settings.focusedRowBackground#2a2b225A
  • sideBar.background#1a1b16
  • sideBar.border#1a1b16
  • sideBar.foreground#c5c7bfC0
  • sideBarSectionHeader.background#22231c
  • statusBar.background#1a1b16
  • statusBar.border#1a1b16
  • statusBar.debuggingBackground#bd9e9a10
  • statusBar.foreground#c5c7bf
  • statusBar.noFolderBackground#73868310
  • statusBarItem.remoteBackground#738683
  • tab.activeBackground#22231c
  • tab.activeBorder#22231c
  • tab.activeBorderTop#c5c7bf00
  • tab.border#1a1b16
  • tab.inactiveBackground#1a1b16
  • tab.inactiveForeground#c5c7bf
  • tab.lastPinnedBorder#2a2b22
  • terminal.ansiBlack#1a1b16
  • terminal.ansiBlue#738683
  • terminal.ansiBrightBlack#1a1b16
  • terminal.ansiBrightBlue#738683
  • terminal.ansiBrightCyan#a6beba
  • terminal.ansiBrightGreen#acad8c
  • terminal.ansiBrightMagenta#bd9e9a
  • terminal.ansiBrightRed#bd9e9a
  • terminal.ansiBrightWhite#c5c7bf
  • terminal.ansiBrightYellow#ada99d
  • terminal.ansiCyan#a6beba
  • terminal.ansiGreen#acad8c
  • terminal.ansiMagenta#bd9e9a
  • terminal.ansiRed#bd9e9a
  • terminal.ansiWhite#c5c7bf
  • terminal.ansiYellow#ada99d
  • titleBar.activeBackground#1a1b16
  • titleBar.border#1a1b16
  • titleBar.inactiveBackground#22231c
  • widget.shadow#22231c00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#c5c7bf—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#c5c7bf—
comment#66645e—
string#acad8c—
punctuation.definition.template-expression, punctuation.section.embedded#738683—
meta.template.expression#c5c7bf—
constant.numeric#bd9e9a—
variable.other.property#ada99d—
constant.language#bd9e9a—
constant.character, constant.other#bd9e9a—
variable#c5c7bf
keyword#738683—
storage#738683
storage.type#a6beba
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#ada99d
entity.other.inherited-class#ada99d
entity.name.function#ada99d
variable.parameter#c5c7bf
entity.name.tag#738683
entity.other.attribute-name#ada99d
support.function#a6beba
support.constant#a6beba
support.type, support.class#a6beba
support.other.variable—
invalid#bd9e9a
invalid.deprecated#bd9e9a—
meta.structure.dictionary.json string.quoted.double.json#c5c7bf—
meta.diff, meta.diff.header#2a2b22—
markup.deleted#738683—
markup.inserted#ada99d—
markup.changed#acad8c—
constant.numeric.line-number.find-in-files - match#ada99dA0—
entity.name.filename.find-in-files#acad8c—
markup.quote#738683—
markup.list#acad8c—
markup.bold, markup.italic#a6beba—
markup.inline.raw#c5c7bf
markup.heading#ada99d—
markup.heading.setext#ada99dbold
markup.heading.markdown—bold
markup.quote.markdown#2a2b22italic
markup.bold.markdown—bold
string.other.link.title.markdown,string.other.link.description.markdown#ada99d—
markup.underline.link.markdown,markup.underline.link.image.markdown#acad8c—
markup.italic.markdown—italic
markup.strikethrough—strikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#c5c7bf—
punctuation.definition.list.begin.markdown#ada99d—
token.info-token#738683—
token.warn-token#ada99d—
token.error-token#bd9e9a—
token.debug-token#738683—
variable.language#c5c7bf—
punctuation.separator#c5c7bf—
support.constant.property-value.css#ada99d—