Skip to main content
CodingTheme

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#2a2a2a
  • activityBar.dropBackground#ffffff1f
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff99
  • activityBarBadge.background#ebbd5b
  • activityBarBadge.foreground#111111
  • badge.background#ebbd5b
  • badge.foreground#111111
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1a1a1a
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • breadcrumbPicker.background#111111
  • button.background#ebbd5b
  • button.foreground#111111
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#a31515
  • debugToolBar.background#333333
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#3c3c3c
  • dropdown.border#3c3c3c
  • dropdown.foreground#f0f0f0
  • editor.background#1a1a1a
  • editor.foreground#d3d0c8
  • editor.lineHighlightBackground#444444
  • editor.selectionBackground#444444
  • editorCursor.foreground#d3d0c8
  • editorGroupHeader.tabsBackground#2a2a2a
  • editorLineNumber.activeForeground#d3d0c8
  • editorLineNumber.foreground#444444
  • editorWhitespace.foreground#666666
  • errorForeground#ff0000
  • extensionButton.prominentBackground#99CC99
  • extensionButton.prominentForeground#111111
  • extensionButton.prominentHoverBackground#99CC99
  • sideBar.background#2a2a2a
  • statusBar.background#111111
  • statusBar.noFolderBackground#111111
  • tab.activeBackground#111111
  • tab.hoverBackground#111111
  • tab.inactiveBackground#2a2a2a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#d3d0c8
meta.function.block.start.handlebars support.constant.handlebars, meta.function.block.end.handlebars support.constant.handlebars, text.html.handlebars meta.function.inline.other.handlebars variable.parameter.handlebars, text.html.handlebars meta.function.inline.other.handlebars support.constant.handlebars#8fa1b3
entity.other.attribute-name.handlebars variable.parameter.handlebars#bf616a
comment, punctuation.definition.comment#666666
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#d3d0c8
none#d3d0c8
keyword.operator#d3d0c8
keyword#cc99cc
variable#f2777a
entity.name.function, meta.require, support.function.any-method#6699cc
support.class, entity.name.class, entity.name.type.class#EBBD5B
meta.class#f2f0ec
keyword.other.special-method#6699CC
storage#cc99cc
support.function#66cccc
string, constant.other.symbol, entity.other.inherited-class#EBBD5B
constant.numeric#6699CC
none#f99157
none#f99157
constant#f99157
entity.name.tag#F2777A
entity.other.attribute-name#99cc99
entity.other.attribute-name.id#6699cc
none#f99157
markup.heading punctuation.definition.heading, entity.name.section#6699CC
keyword.other.unit#666666
markup.bold, punctuation.definition.bold#EBBD5Bbold
markup.italic, punctuation.definition.italic#cc99ccitalic
markup.raw.inline#99cc99
string.other.link#f2777a
meta.link#f99157
markup.list#f2777a
markup.quote#f99157
meta.separator#d3d0c8
markup.inserted, markup.inserted.git_gutter#99CC99
markup.deleted, markup.deleted.git_gutter#f2777a
markup.changed, markup.changed.git_gutter#cc99cc
markup.ignored, markup.ignored.git_gutter#515151
markup.untracked, markup.untracked.git_gutter#515151
constant.other.color#6699CC
string.regexp#66cccc
constant.character.escape#66cccc
variable.interpolation#f99157
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
text.html.basic#d3d0c8
entity.name.tag.structure.any.html#d3d0c8
variable.language.this.js#f2777a
variable.parameter.js#EBBD5B
storage.type.function.js#cc99cc
comment.block.css#666666
variable.parameter.url.css#69cunderline
keyword.control.at-rule.media.css#FF6AC1
entity.other.attribute-name.class.css#EBBD5B
entity.other.attribute-name.id#f99157
keyword.other.important.css#c9c
keyword.operator.combinator.css#f2777a
entity.other.attribute-name.pseudo-element.css#d3d0c8
support.constant.property-value.css#f2777a
support.type.property-name.css#d3d0c8
entity.other.attribute-name.pseudo-element.css#9c9
entity.name.tag.css#69c
entity.name.tag.reference.scss#9c9
string.quoted.double.scss#69cunderline
punctuation.definition.string.begin.scss, punctuation.definition.string.end.scss#6cc
punctuation.definition.variable.php, variable.other.global.safer.php#F2777A
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#c9c
support.type.property-name.json.comments#d3d0c8
string.quoted.double.json.comments#9c9

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Newton by Marco Bertolini - VS Code Theme