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#2F333D
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#F8FAFD
  • button.background#528bff
  • debugToolBar.background#2F333D
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#1e232c
  • editor.findMatchBackground#42557B
  • editor.lineHighlightBackground#383E4A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#181A1F
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorUnnecessaryCode.opacity#000000c0
  • editorWhitespace.foreground#484a50
  • editorWidget.background#21252B
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • notifications.background#21252b
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#1e232c
  • statusBar.background#21252B
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#383E4A
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#528bff
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#abb2bf
  • titleBar.activeBackground#1e232c
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282C34
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#F8F8F2—
meta.embedded, source.groovy.embedded#F8F8F2—
comment#88846f—
string#f7bd7f—
punctuation.definition.template-expression, punctuation.section.embedded#f97583—
meta.template.expression#F8F8F2—
constant.numeric#AE81FF—
constant.language#AE81FF—
constant.character, constant.other#AE81FF—
variable#F8F8F2
meta.object-literal.key#F8F8F2
meta.tag, entity.name.tag#F8F8F2—
text.plain, text, source, markup#F8F8F2—
keyword#f97583—
storage#f97583
storage.type#a3f0ffitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#15ebce—
entity.other.inherited-class#a4e0a5—
entity.name.function#a4e0a5
variable.parameter#ffc07citalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffc07c—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#ffc07citalic
entity.name.tag#f97583
entity.other.attribute-name#a4e0a5
support.function#a3f0ff
support.constant#a3f0ff
support.type, support.class#a3f0ffitalic
support.other.variable—
invalid#F44747
invalid.deprecated#F44747—
meta.structure.dictionary.json string.quoted.double.json#CFCFC2—
meta.diff, meta.diff.header#75715E—
markup.deleted#f97583—
markup.inserted#a4e0a5—
markup.changed#f7bd7f—
constant.numeric.line-number.find-in-files - match#AE81FFA0—
entity.name.filename.find-in-files#f7bd7f—
markup.quote#f97583—
markup.list#f7bd7f—
markup.bold, markup.italic#a3f0ff—
markup.inline.raw#ffc07c
markup.heading#a4e0a5—
markup.heading.setext#a4e0a5bold
markup.heading.markdown—bold
markup.quote.markdown#75715Eitalic
markup.bold.markdown—bold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF—
markup.underline.link.markdown,markup.underline.link.image.markdown#f7bd7f—
markup.italic.markdown—italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#f8f8f2—
punctuation.definition.list.begin.markdown#a4e0a5—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#ffc07citalic
comment.block.documentation variable#ffc07citalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#15ebce—
Fleeting Theme by fleeting-sound - VS Code Theme