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#212121
  • activityBar.dropBackground#30619180
  • activityBarBadge.background#306191
  • activityBarBadge.foreground#ffffff
  • badge.background#306191
  • badge.foreground#ffffff
  • button.background#306191
  • button.foreground#ffffff
  • debugToolBar.background#212121
  • dropdown.background#262626
  • editor.background#181818
  • editor.foreground#F0C0A8
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorBracketHighlight.foreground1#3c79b5
  • editorBracketHighlight.foreground2#ff1e1e
  • editorBracketHighlight.foreground3#3c7896
  • editorBracketHighlight.foreground4#f0b496
  • editorGroup.dropBackground#30619180
  • editorGroup.focusedEmptyBorder#306191
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorHoverWidget.background#1c1c1c
  • editorLineNumber.activeForeground#306191
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#1c1c1c
  • editorWidget.background#1c1c1c
  • focusBorder#306191
  • foreground#F0C0A8
  • input.background#262626
  • inputOption.activeBorder#306191
  • list.activeSelectionBackground#30619180
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#30619180
  • list.focusForeground#FFFFFF
  • list.highlightForeground#306191
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#1c1c1c
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#F0C0A880
  • panelTitle.inactiveForeground#F0C0A880
  • peekView.border#306191
  • peekViewEditor.background#131313
  • peekViewResult.background#1c1c1c
  • peekViewTitle.background#181818
  • pickerGroup.border#FFFFFF1a
  • selection.background#306191
  • sideBar.background#02022927
  • sideBar.foreground#00e1ff
  • sideBarSectionHeader.background#212121
  • statusBar.background#131313
  • statusBar.debuggingBackground#306191
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#131313
  • statusBarItem.activeBackground#30619180
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#306191
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#306191
  • tab.activeModifiedBorder#306191
  • tab.border#00000033
  • tab.inactiveBackground#212121
  • tab.inactiveModifiedBorder#1c3a57
  • tab.unfocusedActiveModifiedBorder#264d74
  • tab.unfocusedInactiveModifiedBorder#1c3a57
  • titleBar.activeBackground#131313

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#F0C0A8—
string#188bd8—
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ff2424—
constant.language.boolean#042a50—
constant.numeric#C09078—
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#4891d9—
keyword, modifier, variable.language.this, support.type.object, constant.language#306191—
entity.name.function, support.function#C09078—
storage.type, storage.modifier#306191—
support.module, support.node#4891d9italic
support.type#306078—
entity.name.type, entity.other.inherited-class#306078—
comment#484848italic
entity.name.type.class#306078underline
variable.object.property, meta.field.declaration entity.name.function#306078—
meta.definition.method entity.name.function#306078—
meta.function entity.name.function#306078—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#306191—
meta.embedded, source.groovy.embedded, meta.template.expression#F0C0A8—
entity.name.tag.yaml#4891d9—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#4891d9—
constant.language.json#306191—
entity.other.attribute-name.class#306191—
entity.other.attribute-name.id#a81414—
source.css entity.name.tag#306078—
meta.tag, punctuation.definition.tag#306191—
entity.name.tag#4891d9—
entity.other.attribute-name#C09078—
markup.heading#306191—
text.html.markdown meta.link.inline, meta.link.reference#4891d9—
text.html.markdown beginning.punctuation.definition.list#306191—
markup.italic#4891d9italic
markup.bold#4891d9bold
markup.bold markup.italic, markup.italic markup.bold#4891d9italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#D81818—
markup.inline.raw.string.markdown#D81818—
keyword.other.definition.ini#4891d9—
entity.name.section.group-title.ini#306191—
source.cs meta.class.identifier storage.type#306078underline
source.cs meta.method.identifier entity.name.function#306078—
source.cs meta.method-call meta.method, source.cs entity.name.function#C09078—
source.cs storage.type#306078—
source.cs meta.method.return-type#306078—
source.cs meta.preprocessor#484848—
source.cs entity.name.type.namespace#F0C0A8—
Global settings#F0C0A8—