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#0f0f0f
  • activityBar.dropBackground#c3c3c3
  • activityBar.foreground#c3c3c3
  • badge.background#afafaf
  • badge.foreground#0f0f0f
  • button.background#afafaf
  • debugToolBar.background#272727
  • diffEditor.insertedTextBackground#57575780
  • diffEditor.removedTextBackground#27272780
  • dropdown.background#c3c3c3
  • dropdown.foreground#373737
  • dropdown.listBackground#373737
  • editor.background#0f0f0f
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#3737375b
  • editor.selectionBackground#37373780
  • editor.selectionHighlightBackground#0f0f0f80
  • editor.wordHighlightBackground#c3c3c380
  • editor.wordHighlightStrongBackground#c3c3c380
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#0f0f0f
  • editorGroup.dropBackground#c3c3c380
  • editorGroupHeader.tabsBackground#373737
  • editorHoverWidget.background#c3c3c3
  • editorHoverWidget.border#afafaf
  • editorIndentGuide.activeBackground#575757
  • editorIndentGuide.background#767771
  • editorLineNumber.activeForeground#c2c2bf
  • editorLineNumber.foreground#3f3f3f
  • editorSuggestWidget.background#0f0f0f
  • editorSuggestWidget.border#afafaf
  • editorWhitespace.foreground#c3c3c3
  • editorWidget.background#0f0f0f
  • focusBorder#afafaf
  • input.background#c3c3c3
  • inputOption.activeBorder#afafaf
  • inputValidation.errorBackground#c3c3c3
  • inputValidation.errorBorder#c3c3c3
  • inputValidation.infoBackground#575757
  • inputValidation.infoBorder#0f0f0f
  • inputValidation.warningBackground#575757
  • inputValidation.warningBorder#0f0f0f
  • list.activeSelectionBackground#afafaf
  • list.activeSelectionForeground#373737
  • list.dropBackground#c3c3c3
  • list.focusBackground#c3c3c3
  • list.highlightForeground#c3c3c3
  • list.hoverBackground#6f6f6f
  • list.inactiveSelectionBackground#c3c3c3
  • list.inactiveSelectionForeground#373737
  • menu.background#373737
  • menu.foreground#cccccc
  • panel.border#c3c3c3
  • panelTitle.activeBorder#afafaf
  • panelTitle.activeForeground#c3c3c3
  • panelTitle.inactiveForeground#afafaf
  • peekView.border#afafaf
  • peekViewEditor.background#0f0f0f
  • peekViewEditor.matchHighlightBackground#afafaf
  • peekViewResult.background#373737
  • peekViewResult.matchHighlightBackground#afafaf
  • peekViewResult.selectionBackground#c3c3c3
  • peekViewTitle.background#373737
  • pickerGroup.foreground#afafaf
  • progressBar.background#afafaf
  • selection.background#ccccc7
  • settings.numberInputBackground#0f0f0f
  • settings.textInputBackground#0f0f0f
  • sideBar.background#373737
  • sideBarSectionHeader.background#0f0f0f
  • statusBar.background#c3c3c3
  • statusBar.debuggingBackground#afafaf
  • statusBar.noFolderBackground#c3c3c3
  • tab.border#373737
  • tab.inactiveBackground#0f0f0f8c
  • tab.inactiveForeground#ccccc7
  • terminal.ansiBlack#373737
  • terminal.ansiBlue#878787
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#9b9b9b
  • terminal.ansiBrightCyan#ebebeb
  • terminal.ansiBrightGreen#878787
  • terminal.ansiBrightMagenta#d7d7d7
  • terminal.ansiBrightRed#737373
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#878787
  • terminal.ansiCyan#d7d7d7
  • terminal.ansiGreen#666666
  • terminal.ansiMagenta#9b9b9b
  • terminal.ansiRed#c3c3c3
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#737373
  • titleBar.activeBackground#373737
  • widget.shadow#0f0f0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#3f3f3f
comment#4b4b4b
string#afafaf
punctuation.definition.template-expression, punctuation.section.embedded#d7d7d7
meta.template.expression#9b9b9b
constant.numeric#c3c3c3
constant.language#c3c3c3
constant.character, constant.other#c3c3c3
variable#9b9b9b
keyword#d7d7d7
storage#d7d7d7
storage.type#9b9b9bitalic
entity.name.type, entity.name.class#9b9b9bunderline
entity.other.inherited-class#9b9b9bitalic underline
entity.name.function#9b9b9b
variable.parameter#878787italic
entity.name.tag#d7d7d7
entity.other.attribute-name#9b9b9b
support.function#9b9b9b
support.constant#9b9b9b
support.type, support.class#9b9b9bitalic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#afafaf
markup.deleted#d7d7d7
markup.inserted#9b9b9b
markup.changed#afafaf
constant.numeric.line-number.find-in-files - match#c3c3c3A0
entity.name.filename.find-in-files#afafaf
markup.quote#d7d7d7
markup.list#afafaf
markup.bold, markup.italic#9b9b9b
markup.inline.raw#878787
markup.heading#9b9b9b
markup.heading.setext#9b9b9b
token.info-token#6796e6
token.warn-token#4b4b4b
token.error-token#afafaf
token.debug-token#5f5f5f
variable.language#878787

Shiki preview

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

Loading...