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