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#EFF0F6
  • activityBar.foreground#191B2A
  • editor.background#EFF0F6
  • editor.foreground#191B2A
  • editor.lineHighlightBackground#e5e7f0
  • editor.selectionBackground#656FA4
  • editorCursor.foreground#191B2A
  • editorGroupHeader.tabsBackground#e5e7f0
  • editorWhitespace.foreground#4F5987
  • input.background#e5e7f0
  • list.activeSelectionBackground#e5e7f0
  • panel.background#EFF0F6
  • sideBar.background#EFF0F6
  • sideBar.dropBackground#e5e7f0
  • sideBar.foreground#191B2A
  • sideBarSectionHeader.background#e5e7f0
  • sideBarSectionHeader.foreground#191B2A
  • statusBar.background#EFF0F6
  • statusBar.border#e5e7f0
  • statusBar.debuggingBackground#bb22bb
  • statusBar.debuggingBorder#bb22bb
  • statusBar.debuggingForeground#191B2A
  • statusBar.foreground#191B2A
  • statusBar.noFolderBackground#EFF0F6
  • statusBar.noFolderForeground#191B2A
  • statusBarItem.prominentBackground#fd9c33
  • statusBarItem.prominentHoverBackground#fd9c33
  • tab.inactiveBackground#a5abca
  • titleBar.activeBackground#EFF0F6
  • titleBar.activeForeground#191B2A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#191B2A—
comment#858db7 italic
string#0063f5—
constant.numeric#bb22bb—
constant.language#bb22bb—
constant.character, constant.other#bb22bb—
variable#207b5f
keyword#d21570—
storage#d21570
storage.type#007a7aitalic
entity.name.class#207b5funderline
entity.other.inherited-class#fd9c33italic underline bold
entity.name.function#d21570
variable.parameter#fd9c33italic
entity.name.tag#d21570
entity.other.attribute-name#207b5f
support.function#207b5f
support.constant#fd9c33
support.type, support.class#207b5fitalic
support.other.variable#fd9c33
invalid#eff0f6
invalid.deprecated#eff0f6—
source.js meta.brace.curly.js, source.js meta.function.js punctuation.definition.parameters.begin.js, source.js meta.function.js punctuation.definition.parameters.end.js, source.js meta.brace.round.js, source.js meta.delimiter.object.comma.js#a5abca—
source.python meta.class.python punctuation.definition.inheritance.begin.python, source.python meta.class.python punctuation.definition.inheritance.end.python, source.python meta.function.python punctuation.definition.parameters.begin.python, source.python meta.function.python punctuation.definition.parameters.end.python, source.python meta.function-call.python punctuation.definition.arguments.begin.python, source.python meta.function-call.python punctuation.definition.arguments.end.python, source.python meta.function.python meta.function.parameters.python punctuation.separator.parameters.python#a5abca—
source.ruby meta.function.method.with-arguments.ruby punctuation.definition.parameters.ruby, source.ruby punctuation.section.array.ruby, source.ruby punctuation.section.function.ruby, source.ruby meta.require.ruby meta.environment-variable.ruby, source.ruby punctuation.separator.variable.ruby#a5abca—
markup.strike#fd9c33italic
meta.link.inline, meta.link.reference#007a7abold
markup.bold#fd9c33bold
markup.italic#fd9c33italic
markup.heading#207b5fbold
punctuation.definition.list_item.markdown#bb22bb—
markup.quote#0063f5italic
punctuation.definition.blockquote.markdown#0063f5italic
meta.separator#a5abca—
text.html.markdown markup.raw.inline#207b5f—
text.html.markdown markup.raw.inline#fd9c33underline
markup.raw.block#207b5f—
markup.raw.block.fenced.markdown source#191B2A—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#a5abcaitalic
variable.language.fenced.markdown#a5abcaitalic
punctuation.accessor#bb22bb—
meta.function.return-type#bb22bb—
punctuation.section.block.begin#191B2A—
punctuation.section.block.end#191B2A—
punctuation.section.embedded.begin#bb22bb—
punctuation.section.embedded.end#bb22bb—
punctuation.separator.namespace#bb22bb—
variable.function#207b5f—
variable.other#191B2A—
variable.language#bb22bb—
entity.name.module.ruby#0063f5—
entity.name.constant.ruby#bb22bb—
support.function.builtin.ruby#eff0f6—
storage.type.namespace.cs#bb22bb—
entity.name.namespace.cs#0063f5—