Skip to main content
Coding Theme

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#ECECEC
  • activityBar.border#D9D7D5
  • activityBar.foreground#282828
  • activityBarBadge.background#282828
  • button.background#3C93FD
  • editor.lineHighlightBackground#EEF5FE
  • editorGroup.border#D9D7D5
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorGroupHeader.tabsBorder#D9D7D5
  • editorLineNumber.activeForeground#282828
  • editorLineNumber.foreground#A6A6A6
  • editorWidget.background#F5F5F5
  • editorWidget.border#D9D7D5
  • editorWidget.resizeBorder#D9D7D5
  • focusBorder#82ADF3
  • foreground#282828
  • input.border#D9D7D5
  • input.placeholderForeground#C7C6C5
  • list.activeSelectionBackground#3C93FD
  • list.focusBackground#3C93FD
  • list.focusForeground#FFFFFF
  • list.highlightForeground#242424
  • list.inactiveSelectionBackground#CECECE
  • notificationCenter.border#D9D7D5
  • notifications.border#D9D7D5
  • panel.border#D9D7D5
  • panelTitle.activeForeground#282828
  • panelTitle.inactiveForeground#242424
  • scrollbar.shadow#ffffff00
  • selection.background#B3D7FF
  • sideBar.background#F5F5F5
  • sideBar.border#D9D7D5
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#282828
  • sideBarTitle.foreground#282828
  • statusBar.background#ECECEC
  • statusBar.border#D9D7D5
  • statusBar.debuggingBackground#ECECEC
  • statusBar.foreground#565456
  • statusBar.noFolderBackground#ECECEC
  • tab.activeBorder#ffffff
  • tab.border#D9D7D5
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#242424
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#272AD8
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#272AD8
  • terminal.ansiBrightCyan#3F6E74
  • terminal.ansiBrightGreen#007400
  • terminal.ansiBrightMagenta#AA0D91
  • terminal.ansiBrightRed#C41A16
  • terminal.ansiBrightYellow#643820
  • terminal.ansiCyan#3F6E74
  • terminal.ansiGreen#007400
  • terminal.ansiMagenta#AA0D91
  • terminal.ansiRed#C41A16
  • terminal.ansiYellow#643820
  • widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#309409
string, punctuation.definition.string, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#666666
constant.numeric#272AD8
constant.other.placeholder, constant.character.escape#000000
keyword, keyword.operator.new, keyword.operator.wordlike, keyword.operator.logical.and, storage, variable.language, constant.language#AD3DA4bold
keyword.control.directive, punctuation.definition.directive#78492A
variable.parameter#057CB0
entity.name.type, entity.other.inherited-class, storage.type.haskell#23575C
keyword.type.cs, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go#4B21B0
entity.name.function, support.function#3E8087
support.function.builtin#804FB8
variable.other.property, variable.other.object.property, entity.name.variable.field#3E8087
entity.name.function.preprocessor#78492A
entity.name.tag#4B21B0
entity.other.attribute-name, support.type.property-name.css, support.type.property-name.media.css#804FB8
constant.other.color, support.constant.color, punctuation.definition.constant.css, keyword.other.unit#272AD8
support.constant.property-value, support.constant.font-name#AD3DA4bold
support.constant.media.css#3E8087
punctuation.definition.heading.markdown, meta.separator.markdown, punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, fenced_code.block.language.markdown, markup.heading.marker.asciidoc, markup.heading.block-attribute.asciidoc, punctuation.separator.asciidoc, constant.asciidoc, punctuation.definition.asciidoc#3E8087
markup.headingbold
markup.boldbold
markup.italicitalic
magit.header#4B21B0
magit.subheader#804FB8
magit.entity#272AD8
meta.diff.range.unified, punctuation.definition.range.diff#707F8C
markup.inserted, punctuation.definition.inserted#3E8087
markup.deleted, punctuation.definition.deleted#D12F1B
keyword.operator, punctuation, storage.modifier.pointer#000000
support.type.primitive, meta.type.annotation, meta.var-single-variable.expr, meta.var.expr, meta.block, meta.method.declaration#6C36A9
Xcode Light With Gray String by mattxlee - VS Code Theme