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#272822
  • activityBar.foreground#f8f8f2
  • badge.background#75715E
  • badge.foreground#f8f8f2
  • button.background#75715E
  • debugToolBar.background#1e1f1c
  • diffEditor.insertedTextBackground#4b661680
  • diffEditor.removedTextBackground#90274A70
  • dropdown.background#414339
  • dropdown.listBackground#1e1f1c
  • editor.background#fff
  • editor.foreground#262626
  • editor.lineHighlightBackground#d6d6d6ee
  • editor.selectionBackground#bebebe80
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#a3a3d880
  • editor.wordHighlightStrongBackground#a7a7d880
  • editorCursor.foreground#262626
  • editorGroup.border#34352f
  • editorGroup.dropBackground#41433980
  • editorGroupHeader.tabsBackground#1e1f1c
  • editorHoverWidget.background#414339
  • editorHoverWidget.border#75715E
  • editorIndentGuide.activeBackground#767771
  • editorIndentGuide.background#464741
  • editorLineNumber.activeForeground#c2c2bf
  • editorLineNumber.foreground#90908a
  • editorSuggestWidget.background#272822
  • editorSuggestWidget.border#75715E
  • editorSuggestWidget.foreground#dddddd
  • editorSuggestWidget.highlightForeground#c7d0ff
  • editorWhitespace.foreground#777777
  • editorWidget.background#1e1f1c
  • focusBorder#99947c
  • input.background#414339
  • inputOption.activeBorder#75715E
  • inputValidation.errorBackground#90274A
  • inputValidation.errorBorder#f92672
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#75715E
  • list.dropBackground#414339
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#3e3d32
  • list.inactiveSelectionBackground#414339
  • menu.background#1e1f1c
  • menu.foreground#cccccc
  • minimap.background#d6d6d6ee
  • minimap.selectionHighlight#bebebe69
  • panel.background#272822
  • panel.border#414339
  • panelTitle.activeBorder#75715E
  • panelTitle.activeForeground#f8f8f2
  • panelTitle.inactiveForeground#75715E
  • peekView.border#75715E
  • peekViewEditor.background#272822
  • peekViewEditor.matchHighlightBackground#75715E
  • peekViewResult.background#1e1f1c
  • peekViewResult.matchHighlightBackground#75715E
  • peekViewResult.selectionBackground#414339
  • peekViewTitle.background#1e1f1c
  • pickerGroup.foreground#75715E
  • ports.iconRunningProcessForeground#ccccc7
  • progressBar.background#75715E
  • quickInputList.focusBackground#414339
  • selection.background#878b9180
  • settings.focusedRowBackground#4143395A
  • sideBar.background#1e1f1c
  • sideBarSectionHeader.background#272822
  • statusBar.background#414339
  • statusBar.debuggingBackground#75715E
  • statusBar.noFolderBackground#414339
  • statusBarItem.remoteBackground#3e72ff
  • tab.activeForeground#262626
  • tab.border#1e1f1c
  • tab.inactiveBackground#34352f
  • tab.inactiveForeground#ccccc7
  • tab.lastPinnedBorder#414339
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C4265E
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#B3B42B
  • titleBar.activeBackground#1e1f1c
  • widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#262626
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#262626
comment#777B90
string#c55a11
punctuation.definition.parameters.end.bracket.round#b77da7
punctuation.definition.parameters.begin.bracket.round#b77da7
punctuation.definition.arguments.end.bracket.round#6497b2
punctuation.definition.arguments.begin.bracket.round#6497b2
punctuation.section.array#19648d
punctuation.definition.template-expression, punctuation.section.embedded#c00000
meta.template.expression#262626
constant.numeric#4c206d
constant.language#4c206d
constant.character, constant.other#4c206d
variable#262626
keyword#c00000
storage#c00000
storage.type#00d9ffitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#00b050underline
entity.other.inherited-class#00b050italic underline
entity.name.function#00b050
meta.member.access#00b050
meta.fstring#00ffaa
meta.function-call.arguments#c55a11italic
punctuation.separator.arguments#262626
variable.parameter#c55a11italic
entity.name.tag#c00000
entity.other.attribute-name#00b050
support.function#2f5496
support.constant#2f5496
support.type, support.class#2f5496italic
support.other.variable
invalid#c00000
invalid.deprecated#c00000
meta.structure.dictionary.json string.quoted.double.json#262626
meta.diff, meta.diff.header#8A8EA1
markup.deleted#c00000
markup.inserted#00b050
markup.changed#ffe600
constant.numeric.line-number.find-in-files - match#7429ffa0
entity.name.filename.find-in-files#ffe600
markup.quote#c00000
markup.list#ffe600
markup.bold, markup.italic#2f5496
markup.inline.raw#c55a11
markup.heading#00b050
markup.heading.setext#00b050bold
markup.heading.markdownbold
markup.quote.markdown#75715Eitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#4c206d
markup.underline.link.markdown,markup.underline.link.image.markdown#ffe600
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#262626
punctuation.definition.list.begin.markdown#00b050
token.info-token#005eff
token.warn-token#ffa600
token.error-token#c00000
token.debug-token#9500ff
variable.language#c55a11