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.border#666666
  • breadcrumb.activeSelectionForeground#666666
  • breadcrumb.focusForeground#666666
  • breadcrumb.foreground#AAAAAA
  • editor.background#212125
  • editor.foreground#b7b7d2ff
  • editorBracketHighlight.foreground1#ececec
  • editorBracketHighlight.foreground2#ececec
  • editorBracketHighlight.foreground3#ececec
  • editorBracketHighlight.foreground4#ececec
  • editorBracketHighlight.foreground5#ececec
  • editorBracketHighlight.foreground6#ececec
  • editorGroup.border#666666
  • editorGroupHeader.border#666666
  • editorUnnecessaryCode.border#F35863ff
  • panel.border#666666
  • sideBar.border#666666
  • sideBarSectionHeader.border#666666
  • statusBar.border#666666
  • tab.activeBorder#666666
  • tab.border#666666
  • titleBar.border#666666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#000080
comment#80809citalic
constant.language#F35863ff
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#94ffa4
constant.regexp#b46695
keyword#4ec9b0bold
entity.name.tag#00e6e6
entity.name.tag.css#d7ba7d
entity.other.attribute-name#9cdcfe
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name#d7ba7d
invalid#f44747
markup.underline#4ec9b0underline
markup.bold#b2d350bold
markup.heading#F35863ffbold
heading.1.markdown#eda65eff
heading.2.markdown#dfd249ff
heading.3.markdown#88adf6ff
heading.4.markdown#e65ba1ff
markup.italic#e467e4ffitalic
string.other.link.title.markdown#F35863ffbold
string.other.link.description.markdown#F35863ffitalic
markup.underline.link.image.markdownitalic underline
punctuation.definition.markdown#F35863ffbold
markup.inserted#b5cea8
markup.deleted#e467e4ff
markup.changed#F35863ff
meta.selector#d7ba7d
punctuation.definition.tag#e65ba1ffbold
meta.preprocessor#F35863ff
meta.preprocessor.string#e467e4ff
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
storage#F35863ff
storage.type, meta.type.declaration.ts, keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx#4ec9b0
storage.type.function.arrow.tsx, storage.type.function.arrow.ts, storage.type.function.arrow.jsx, storage.type.function.arrow.js#f35863bold
storage.modifier#88adf6ff
string#e467e4ff
string.tag#e467e4ff
string.value#e467e4ff
string.regexp#d16969
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#F35863ff
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#D7D3C8
keyword#F35863ff
punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.round.go, keyword.operator#ecececbold
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#F35863ff
keyword.other.unit#b5cea8
support.function.git-rebase#d4d4d4
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language.this#F35863ff
keyword.function.go, storage.type.function.tsx, storage.type.function.ts, storage.type.function.js, storage.type.function.jsx#eb4752ffbold
entity.name.function, support.function, support.constant.handlebars#eda65eff
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#b2d350ffitalic bold
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
keyword.control#88adf6ff
variable, meta.definition.variable.name, support.variable, variable.other.constant.ts, variable.other.constant.tsx, variable.other.constant.js, variable.other.constant.jsx#d7d3c8
meta.object-literal.key entity.name.function#dfd249ff
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#e467e4ff
storage.type.ts#00e6e6
variable.other.readwrite.ts#27e727ff
meta.object.member.ts variable.other.readwrite.ts#cdcdcd
meta.arrow.ts variable.other.readwrite.ts#b2d350bold
meta.array.literal.ts variable.other.readwrite.ts #dfd249ffbold
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx#eda65effitalic
variable.other.object.property.ts#b6a9f7
variable.other.property.ts, variable.other.property.tsx#27e727ff
variable.other.constant.property.ts#27e727ff
meta.parameters.tsitalic
keyword.operator.new.js, keyword.operator.new.jsx, keyword.operator.new.tsx, keyword.operator.new.ts#4ec9b0bold
keyword.var.go#4ec9b0bold
entity.name.type.package.go#dfd249ffbold
punctuation.definition.raw.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#e65ba1ffbold
markup.inline.raw.string.markdown#ff8c1a
Space Aurora Theme by Francisco Thiago - VS Code Theme