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
new.expr entity.name#713DA9
comment, comment storage.type#536579italic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, support.function.calc.css, support.function.calc.scss, support.type.property-name.css, support.type.property-name.scss, support.type.vendored.property-name.css, support.type.vendored.property-name.scss, meta.property-value.css support.constant, meta.property-value.scss support.constant, meta.property-value.css support.constant.property-value, meta.property-value.scss support.constant.property-value, support.function.transform.css, support.function.transform.scss#AA0D91
meta.decorator, meta.decorator punctuation.decorator, meta.decorator variable.other.readwrite, meta.decorator meta.function-call entity.name.function#643820
meta.tag.sgml.html#A6A6A6
entity.name.function, support.function#4B22B0
meta.property-list meta.property-name, support.type.property-name, support.type.map.key, entity.name.tag.yaml#4B22B0
keyword.control, keyword.declaration, keyword.expressions-and-types, keyword.operator.new, keyword.reserved, keyword.statement, storage.type, storage.modifier, constant.language, variable.language.super, variable.language.this, text.html entity.name.tag, meta.tag entity.name.tag, meta.tag support.class, string.regexp keyword.other#AD3DA4bold
storage.type.function.arrow, meta.template.expression punctuation, punctuation.separator.key-value, meta.object-literal.key meta.brace.square, meta.template.expression keyword.operator, keyword.operator.or.regexp, keyword.operator.quantifier, punctuation.definition.group.regexp, punctuation.definition.character-class#000000
meta.tag entity.other.attribute-name, constant.character.escape.backslash#816927
constant.numeric, keyword.other.unit, constant.other.color#272AD8
string, variable.parameter.url.scss, markup.heading.markdown, beginning.punctuation.definition.list.markdown, meta.template.expression meta.embedded punctuation.definition.string.begin, meta.template.expression meta.embedded punctuation.definition.string.end#D12F1B
meta.type, meta.return.type, entity.name.type, support.type.primitive#713DA9
meta.objectliteral variable.other.object, entity.name.type.module, entity.other.inherited-class, variable.scss, variable.other.bracket.shell, entity.name.function.scss#3F6E74
keyword.control.at-rule, meta.import variable.other.readwrite, meta.definition.variable variable.other.readwrite, meta.definition.variable variable.other.constant, meta.template.expression variable.other.readwrite, meta.template.expression variable.other.constant, support.constant.property-value#000000
variable.other.property, variable.other.object.property, support.variable.property#713DA9
Digital Eye by Digital Eye - VS Code Theme