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#253647
  • activityBar.dropBackground#7799cc80
  • activityBarBadge.background#7799cc
  • activityBarBadge.foreground#ffffff
  • badge.background#7799cc
  • badge.foreground#ffffff
  • button.background#7799cc
  • button.foreground#ffffff
  • debugToolBar.background#253647
  • dropdown.background#2b3e51
  • editor.background#1b2733
  • editor.foreground#f0f0f0
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorCursor.foreground#FFFFFF
  • editorGroup.dropBackground#7799cc80
  • editorGroup.focusedEmptyBorder#7799cc
  • editorGroupHeader.tabsBackground#202e3d
  • editorGutter.addedBackground#7799cc
  • editorGutter.deletedBackground#669ccc
  • editorGutter.modifiedBackground#c2ec66
  • editorHoverWidget.background#202e3d
  • editorLineNumber.activeForeground#7799cc
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#202e3d
  • editorWidget.background#202e3d
  • focusBorder#7799cc
  • foreground#f0f0f0
  • input.background#2b3e51
  • inputOption.activeBorder#7799cc
  • list.activeSelectionBackground#7799cc80
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#7799cc80
  • list.focusBackground#7799cc80
  • list.focusForeground#FFFFFF
  • list.highlightForeground#7799cc
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#202e3d
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#f0f0f080
  • panelTitle.inactiveForeground#f0f0f080
  • peekView.border#7799cc
  • peekViewEditor.background#151f28
  • peekViewResult.background#202e3d
  • peekViewTitle.background#1b2733
  • pickerGroup.border#FFFFFF1a
  • selection.background#7799cc
  • sideBar.background#202e3d
  • sideBarSectionHeader.background#253647
  • statusBar.background#151f28
  • statusBar.debuggingBackground#7799cc
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#151f28
  • statusBarItem.activeBackground#7799cc80
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#7799cc
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#7799cc
  • tab.activeModifiedBorder#7799cc
  • tab.border#00000033
  • tab.inactiveBackground#253647
  • tab.inactiveModifiedBorder#475b7a
  • tab.unfocusedActiveModifiedBorder#5f7aa3
  • tab.unfocusedInactiveModifiedBorder#475b7a
  • terminal.ansiBlue#7799cc
  • terminal.ansiBrightBlue#66cccc
  • titleBar.activeBackground#151f28

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#f0f0f0
string#669ccc
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#99eaff
constant.language.boolean#7799cc
constant.numeric#66cccc
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#66cccc
keyword, modifier, variable.language.this, support.type.object, constant.language#7799cc
entity.name.function, support.function#66cccc
storage.type, storage.modifier#7799cc
support.module, support.node#66ccccitalic
support.type#c2ec66
entity.name.type, entity.other.inherited-class#c2ec66
comment#517599italic
entity.name.type.class#c2ec66underline
variable.object.property, meta.field.declaration entity.name.function#c2ec66
meta.definition.method entity.name.function#c2ec66
meta.function entity.name.function#c2ec66
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#7799cc
meta.embedded, source.groovy.embedded, meta.template.expression#f0f0f0
entity.name.tag.yaml#66cccc
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#66cccc
constant.language.json#7799cc
entity.other.attribute-name.class#7799cc
entity.other.attribute-name.id#669ccc
source.css entity.name.tag#c2ec66
meta.tag, punctuation.definition.tag#7799cc
entity.name.tag#66cccc
entity.other.attribute-name#66cccc
markup.heading#7799cc
text.html.markdown meta.link.inline, meta.link.reference#66cccc
text.html.markdown beginning.punctuation.definition.list#7799cc
markup.italic#66ccccitalic
markup.bold#66ccccbold
markup.bold markup.italic, markup.italic markup.bold#66ccccitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#669ccc
markup.inline.raw.string.markdown#669ccc
keyword.other.definition.ini#66cccc
entity.name.section.group-title.ini#7799cc
source.cs meta.class.identifier storage.type#c2ec66underline
source.cs meta.method.identifier entity.name.function#c2ec66
source.cs meta.method-call meta.method, source.cs entity.name.function#66cccc
source.cs storage.type#c2ec66
source.cs meta.method.return-type#c2ec66
source.cs meta.preprocessor#517599
source.cs entity.name.type.namespace#f0f0f0
Global settings#f0f0f0