Skip to main content
CodingTheme

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#23272E
  • editor.foreground#B8C0CC
  • editor.lineHighlightBackground#3e3d32
  • editor.selectionBackground#878b9180
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4a4a7680
  • editor.wordHighlightStrongBackground#6a6a9680
  • editorCursor.foreground#f8f8f0
  • 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
  • editorWhitespace.foreground#464741
  • 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.selectionHighlight#878b9180
  • 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#AC6218
  • 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
source.python#34A853
support.type.python#cb4b16
meta.member.access.python#61AFEF
meta.function-call.arguments.python#34A853italic
comment.block, comment.block.documentation, punctuation.definition.comment.begin, punctuation.definition.comment.end, string.quoted.docstring.multi.python, string.quoted.docstring.raw.multi.python#8B95A5italic
comment.line, comment.line.double-slash, comment.line.number-sign#8B95A5
variable.parameter.function-call.python#9A8CF7
meta.function-call.generic.python#B07D1A
constant.numeric.float.python, constant.numeric.integer.python, constant.numeric.dec.python, constant.numeric.binary.python, constant.numeric.exponent.decimal.python, keyword.other.unit.exponent.decimal.cpp, keyword.other.unit.binary.python, keyword.operator.minus.exponent.decimal.python, keyword.other.unit.suffix.floating-point.python, constant.numeric.decimal.point.cpp#CFCFC2
punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python, keyword.operator.assignment.python, punctuation.separator.period.python, string.quoted.single.python, keyword.operator.comparison.python, punctuation.separator.colon.python, punctuation.separator.comma.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.separator.element.python, punctuation.separator.arguments.python, punctuation.definition.decorator.python#CFCFC2
constant.other.caps.python#8FAE00underline
meta.attribute.python#61AFEF
keyword.control.flow.python, keyword.control.import.python, keyword.operator.logical.python, keyword.control.conditional.python, keyword.control.loop.python, keyword.control.exception.python, keyword.control.return.python, storage.type.function.python, storage.type.class.python#EA1D2C
support.function.magic.python#DEA628italic
storage.type.function.lambda.python#DEA628bold
meta.item-access.arguments.python#2aa198
constant.language.python#2aa198
meta.function.decorator.python#dea628
log.error#af1f1fbold
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#F92672
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#E6DB74
markup.quote#F92672
markup.list#E6DB74
markup.bold, markup.italic#66D9EF
markup.inline.raw#FD971F
markup.heading#A6E22E
markup.heading.setext#A6E22Ebold
markup.heading.markdownbold
markup.quote.markdown#75715Eitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74
markup.italic.markdownitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#f8f8f2
punctuation.definition.list.begin.markdown#A6E22E
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
keyword.operator.assignment.shell, constant.character.escape.line-continuation.shell, punctuation.definition.subshell.single.shell#FF5733bold
support.function.builtin.shell #DEA628bold
variable.other.normal.shell#009688bold
variable.other.assignment.shell#8BC34A
string.quoted.single.shell, string.quoted.double.shell, string.unquoted.shell, string.unquoted.argument.shell#9A8CF7
entity.name.command.shell, storage.modifier.export.shell#CB4B16
constant.other.option#4FB7C5
support.type.property-name.json.comments#CB4B16

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...