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.markdownbold
markup.quote.markdown#2a2b22italic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#ada99d
markup.underline.link.markdown,markup.underline.link.image.markdown#acad8c
markup.italic.markdownitalic
markup.strikethroughstrikethrough
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
sweeney by owozsh - VS Code Theme