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#EEEEEE
  • activityBar.dropBackground#007db880
  • activityBar.foreground#111111
  • activityBarBadge.background#007db8
  • button.background#007db8
  • debugToolBar.background#ffffff
  • dropdown.background#ffffff
  • editor.background#FFFFFF
  • editor.findMatchBackground#E4E4E4
  • editor.findMatchHighlightBackground#F4F4F4
  • editor.foreground#111111
  • editor.lineHighlightBackground#F4F4F4
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#E4E4E4
  • editor.wordHighlightBackground#EEEEEE
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#F4F4F4
  • editorCursor.foreground#E4E4E4
  • editorGroup.dropBackground#007db880
  • editorGroup.focusedEmptyBorder#007db8
  • editorGroupHeader.tabsBackground#ffffff
  • editorHoverWidget.background#ffffff
  • editorIndentGuide.activeBackground#00000000
  • editorIndentGuide.background#00000000
  • editorLineNumber.activeForeground#00447c
  • editorLineNumber.foreground#007db8
  • editorMarkerNavigation.background#ffffff
  • editorWidget.background#ffffff
  • focusBorder#007db8
  • foreground#111111
  • input.background#ffffff
  • inputOption.activeBorder#007db8
  • list.activeSelectionBackground#007db8
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#007db880
  • list.focusBackground#E4E4E4
  • list.hoverBackground#E4E4E4
  • list.inactiveFocusBackground#E4E4E4
  • list.inactiveSelectionBackground#007db8
  • list.inactiveSelectionForeground#FFFFFF
  • menu.background#EEEEEE
  • panel.background#ffffff
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#11111180
  • panelTitle.inactiveForeground#11111180
  • peekView.border#007db8
  • peekViewEditor.background#cccccc
  • peekViewResult.background#ffffff
  • peekViewTitle.background#FFFFFF
  • pickerGroup.border#FFFFFF1a
  • selection.background#007db8
  • sideBar.background#F4F4F4
  • sideBar.foreground#111111
  • sideBarSectionHeader.background#ffffff
  • statusBar.background#007db8
  • statusBar.debuggingBackground#007db8
  • statusBar.noFolderBackground#cccccc
  • statusBarItem.activeBackground#007db880
  • statusBarItem.hoverBackground#FFFFFF1a
  • tab.activeBorder#007db8
  • tab.inactiveBackground#ffffff
  • titleBar.activeBackground#EEEEEE
  • titleBar.inactiveBackground#E4E4E4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#111111
string#6ea204
constant.language.boolean#007db8
constant.numeric#f2af00
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#00bbff
keyword, modifier, variable.language.this, support.type.object, constant.language#007db8
entity.name.function, support.function#f2af00
storage.type, storage.modifier#007db8
support.module, support.node#00bbffitalic
support.type#00447c
entity.name.type, entity.other.inherited-class#00447c
comment#CCCCCCitalic
entity.name.type.class#00447cunderline
variable.object.property, meta.field.declaration entity.name.function#00447c
meta.definition.method entity.name.function#00447c
meta.function entity.name.function#00447c
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#007db8
meta.embedded, source.groovy.embedded, meta.template.expression#111111
entity.name.tag.yaml#00bbff
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#00bbff
constant.language.json#007db8
entity.other.attribute-name.class#007db8
entity.other.attribute-name.id#6ea204
source.css entity.name.tag#00447c
meta.tag, punctuation.definition.tag#007db8
entity.name.tag#00bbff
entity.other.attribute-name#f2af00
markup.heading#007db8
text.html.markdown meta.link.inline, meta.link.reference#00bbff
text.html.markdown beginning.punctuation.definition.list#007db8
markup.italic#00bbffitalic
markup.bold#00bbffbold
markup.bold markup.italic, markup.italic markup.bold#00bbffitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#6ea204
markup.inline.raw.string.markdown#6ea204
keyword.other.definition.ini#00bbff
entity.name.section.group-title.ini#007db8
source.cs meta.class.identifier storage.type#00447cunderline
source.cs meta.method.identifier entity.name.function#00447c
source.cs meta.method-call meta.method, source.cs entity.name.function#f2af00
source.cs storage.type#00447c
source.cs meta.method.return-type#00447c
source.cs meta.preprocessor#CCCCCC
source.cs entity.name.type.namespace#111111
Global settings#111111
Clarity by maxmckinney - VS Code Theme