Skip to main content
Coding Theme

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#201c1a
  • activityBar.foreground#c8bfba
  • activityBarBadge.background#b67f88
  • activityBarBadge.foreground#695f59
  • badge.background#2c2826
  • badge.foreground#c8bfba
  • button.background#b67f88
  • button.foreground#1a1614
  • button.hoverBackground#b67f88
  • debugToolBar.background#272321
  • diffEditor.insertedTextBackground#a89b7680
  • diffEditor.removedTextBackground#c6716370
  • dropdown.background#2c2826
  • dropdown.listBackground#272321
  • editor.background#272321
  • editor.foreground#c8bfba
  • editor.lineHighlightBackground#2c2826
  • editor.selectionBackground#463e3940
  • editor.selectionHighlightBackground#463e3940
  • editor.wordHighlightBackground#695f5950
  • editor.wordHighlightStrongBackground#695f5950
  • editorCursor.foreground#cc8b66
  • editorGroup.border#2c2826
  • editorGroup.dropBackground#2c282680
  • editorGroupHeader.tabsBackground#201c1a
  • editorGroupHeader.tabsBorder#3c3632
  • editorGutter.addedBackground#a89b76
  • editorGutter.commentGlyphForeground#b67f88
  • editorGutter.commentRangeForeground#9a9082
  • editorGutter.commentUnresolvedGlyphForeground#d4b178
  • editorGutter.deletedBackground#c67163
  • editorGutter.modifiedBackground#8a7e70
  • editorHoverWidget.background#2c2826
  • editorHoverWidget.border#2c2826
  • editorIndentGuide.activeBackground#c8bfba30
  • editorIndentGuide.background#c8bfba10
  • editorLineNumber.activeForeground#cc8b66
  • editorLineNumber.foreground#695f5940
  • editorSuggestWidget.background#272321
  • editorSuggestWidget.border#2c2826
  • editorWhitespace.foreground#c8bfba60
  • editorWidget.background#2c2826
  • focusBorder#cc8b6630
  • gitDecoration.addedResourceForeground#a89b76
  • gitDecoration.conflictingResourceForeground#c67163
  • gitDecoration.deletedResourceForeground#c67163
  • gitDecoration.ignoredResourceForeground#b67f88
  • gitDecoration.modifiedResourceForeground#8a7e70
  • gitDecoration.renamedResourceForeground#d4b178
  • gitDecoration.stageDeletedResourceForeground#b67f88
  • gitDecoration.stageModifiedResourceForeground#9a9082
  • gitDecoration.submoduleResourceForeground#8a7e70
  • gitDecoration.untrackedResourceForeground#9a9082
  • input.background#272321
  • inputOption.activeBorder#2c2826
  • inputValidation.errorBackground#c671634A
  • inputValidation.errorBorder#c67163
  • inputValidation.infoBackground#8a7e70
  • inputValidation.infoBorder#8a7e70
  • inputValidation.warningBackground#d4b178
  • inputValidation.warningBorder#d4b178
  • list.activeSelectionBackground#cc8b6640
  • list.dropBackground#2c2826
  • list.errorForeground#c67163
  • list.highlightForeground#c8bfba
  • list.hoverBackground#2c2826
  • list.inactiveSelectionBackground#695f5930
  • list.warningForeground#d4b178
  • menu.background#272321
  • menu.foreground#c8bfba
  • minimap.selectionHighlight#463e3940
  • panel.background#201c1a
  • panel.border#c8bfba00
  • panelTitle.activeBorder#2c2826
  • panelTitle.activeForeground#c8bfba
  • panelTitle.inactiveForeground#c8bfba70
  • peekView.border#2c2826
  • peekViewEditor.background#272321
  • peekViewEditor.matchHighlightBackground#2c2826
  • peekViewResult.background#272321
  • peekViewResult.matchHighlightBackground#2c2826
  • peekViewResult.selectionBackground#cc8b6630
  • peekViewTitle.background#272321
  • pickerGroup.foreground#2c2826
  • ports.iconRunningProcessForeground#c8bfba
  • progressBar.background#2c2826
  • quickInputList.focusBackground#cc8b6630
  • selection.background#463e3940
  • settings.focusedRowBackground#2c28265A
  • sideBar.background#201c1a
  • sideBar.border#3c3632
  • sideBar.foreground#c8bfbaC0
  • sideBarSectionHeader.background#272321
  • statusBar.background#201c1a
  • statusBar.border#3c3632
  • statusBar.debuggingBackground#b67f8810
  • statusBar.debuggingForeground#1a1614
  • statusBar.foreground#c8bfba
  • statusBar.noFolderBackground#8a7e7010
  • statusBar.noFolderForeground#1a1614
  • statusBarItem.hoverForeground#1a1614
  • statusBarItem.remoteBackground#b67f88
  • statusBarItem.remoteForeground#1a1614
  • tab.activeBackground#272321
  • tab.activeBorder#272321
  • tab.activeBorderTop#cc8b6600
  • tab.border#3c3632
  • tab.inactiveBackground#201c1a
  • tab.inactiveForeground#c8bfba
  • tab.lastPinnedBorder#2c2826
  • terminal.ansiBlack#1a1614
  • terminal.ansiBlue#8a7e70
  • terminal.ansiBrightBlack#1a1614
  • terminal.ansiBrightBlue#8a7e70
  • terminal.ansiBrightCyan#9a9082
  • terminal.ansiBrightGreen#a89b76
  • terminal.ansiBrightMagenta#b67f88
  • terminal.ansiBrightRed#c67163
  • terminal.ansiBrightWhite#695f59
  • terminal.ansiBrightYellow#d4b178
  • terminal.ansiCyan#9a9082
  • terminal.ansiGreen#a89b76
  • terminal.ansiMagenta#b67f88
  • terminal.ansiRed#c67163
  • terminal.ansiWhite#695f59
  • terminal.ansiYellow#d4b178
  • titleBar.activeBackground#201c1a
  • titleBar.border#3c3632
  • titleBar.inactiveBackground#272321
  • widget.shadow#27232100

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#c8bfba
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#c8bfba
comment#695f59
string#a89b76
punctuation.definition.template-expression, punctuation.section.embedded#9a9082
meta.template.expression#c8bfba
constant.numeric#cc8b66
variable.other.property#8a7e70
constant.language#cc8b66
constant.character, constant.other#cc8b66
variable#c8bfba
keyword#b67f88
storage#b67f88
storage.type#9a9082
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#d4b178
entity.other.inherited-class#d4b178
entity.name.function#d4b178
variable.parameter#a8858e
entity.name.tag#b67f88
entity.other.attribute-name#d4b178
support.function#9a9082
support.constant#9a9082
support.type, support.class#9a9082
support.other.variable
invalid#c67163
invalid.deprecated#c67163
meta.structure.dictionary.json string.quoted.double.json#c8bfba
meta.diff, meta.diff.header#2c2826
markup.deleted#b67f88
markup.inserted#d4b178
markup.changed#a89b76
constant.numeric.line-number.find-in-files - match#8a7e70A0
entity.name.filename.find-in-files#a89b76
markup.quote#b67f88
markup.list#a89b76
markup.bold, markup.italic#9a9082
markup.inline.raw#a8858e
markup.heading#d4b178
markup.heading.setext#d4b178bold
markup.heading.markdownbold
markup.quote.markdown#2c2826italic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#8a7e70
markup.underline.link.markdown,markup.underline.link.image.markdown#a89b76
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#c8bfba
punctuation.definition.list.begin.markdown#d4b178
token.info-token#8a7e70
token.warn-token#d4b178
token.error-token#c67163
token.debug-token#8a7e70
variable.language#a8858e
punctuation.separator#c8bfba
support.constant.property-value.css#d4b178
Ristretto by owozsh - VS Code Theme