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.dropBorder#414339
  • activityBar.foreground#f8f8f2
  • badge.background#75715e
  • badge.foreground#f8f8f2
  • breadcrumb.foreground#75715e
  • button.background#75715e
  • debugToolBar.background#1e1f1c
  • diffEditor.insertedTextBackground#66852880
  • diffEditor.removedTextBackground#90274a80
  • dropdown.background#414339
  • editor.background#252620
  • editor.findMatchBackground#3d3a3a10
  • editor.findMatchBorder#FF0000
  • editor.findMatchHighlightBackground#3d3a3a10
  • editor.findMatchHighlightBorder#ffffffaa
  • editor.foreground#DBDBDB
  • editor.lineHighlightBackground#3e3d32
  • editor.selectionBackground#135564
  • editor.selectionHighlightBackground#3d3a3a10
  • editor.selectionHighlightBorder#ffffffaa
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#414339
  • editorGroup.dropBackground#41433980
  • editorGroupHeader.tabsBackground#1e1f1c
  • editorHoverWidget.background#414339
  • editorHoverWidget.border#75715e
  • editorIndentGuide.background#464741
  • editorLineNumber.foreground#90908a
  • editorSuggestWidget.background#272822
  • editorSuggestWidget.border#75715e
  • editorWhitespace.foreground#75715E
  • editorWidget.background#1e1f1c
  • focusBorder#75715e
  • input.background#414339
  • inputOption.activeBorder#75715e
  • inputValidation.errorBackground#90274a
  • inputValidation.errorBorder#D8226B
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#75715e
  • list.dropBackground#414339
  • list.focusBackground#414339
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#272822
  • list.inactiveSelectionBackground#414339
  • 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
  • progressBar.background#75715e
  • selection.background#75715e
  • sideBar.background#1e1f1c
  • sideBarSectionHeader.background#272822
  • statusBar.background#414339
  • statusBar.debuggingBackground#75715e
  • statusBar.noFolderBackground#414339
  • tab.activeBorder#ccccc7
  • tab.border#1e1f1c
  • tab.inactiveBackground#414339
  • tab.inactiveForeground#ccccc7
  • tab.unfocusedActiveBorder#75715e
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6a7ec8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66d9ef
  • terminal.ansiBrightGreen#98CE2B
  • terminal.ansiBrightMagenta#ae81ff
  • terminal.ansiBrightRed#D8226B
  • 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#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.function-call.js entity.name.function, meta.function-call.js support.function.dom.js, support.variable.dom.js, support.variable.property.js#66D9EF—
support.variable.property.process#66D9EF—
support.variable.object.process#66D9EFitalic
comment#75715E—
string#E6DB74—
punctuation.definition.template-expression, punctuation.section.embedded.coffee#D8226B—
meta.template.expression#F8F8F2—
constant.numeric#AE81FF—
constant.language#AE81FF—
constant.character, constant.other#AE81FF—
variable#DBDBDB
keyword#D8226B—
storage#D8226B
storage.type#66D9EFitalic
entity.name.type, entity.name.class—
entity.other.inherited-class#98CE2Bitalic underline
entity.name.function#98CE2B
variable.parameter#E2861Ditalic
entity.name.tag, meta.tag.sgml.doctype.html#D8226B
entity.other.attribute-name#98CE2B
support.function#66D9EF
support.constant#66D9EF
support.type, support.class#66D9EFitalic
support.other.variable—
invalid#F8F8F0
invalid.deprecated#F8F8F0—
meta.structure.dictionary.json string.quoted.double.json#CFCFC2—
meta.diff, meta.diff.header#75715E—
markup.deleted#D8226B—
markup.inserted#98CE2B—
markup.changed#E6DB74—
constant.numeric.line-number.find-in-files - match#AE81FFA0—
entity.name.filename.find-in-files#E6DB74—
markup.quote#D8226B—
markup.list#E6DB74—
markup.bold, markup.italic#66D9EF—
markup.inline.raw#E2861D
markup.heading#98CE2B—
markup.heading.setext#98CE2B
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
variable.language#E2861Ditalic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#f8f8f2
keyword.var.go#66D9EFitalic
meta.method-call.php entity.name.function#66D9EF
storage.type.class.jsdoc, variable.other.jsdoc#75715E—
string.quoted.docstring.multi.python#75715E—
entity.name.type.class.python#98CE2Bff—
meta.class.python support.type.python#98CE2Bff—
meta.function-call.generic.python#66d9efff—
punctuation.definition.decorator.python#D8226B—
entity.name.function.decorator.python#66D9EF—
keyword.operator.query#E2861Ditalic
keyword.query.field.apex#66D9EFitalic
keyword.type.apex#66D9EFitalic
keyword.other.get.apex#66D9EF
keyword.other.set.apex#66D9EF
keyword.operator.conditional#E2861D
support.function.apex#D8226B
entity.name.variable.parameter.apex#E2861Ditalic
entity.name.type.class.apex#98CE2B
sharing.modifier.apex#D8226B
punctuation.squarebracket#E6DB74
meta.property-name.css#F92672
ThemeDatabase All Themes by enes ozturk - VS Code Theme