Skip to main content
CodingTheme

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.

  • activityBarBadge.background#3875d6
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.lineHighlightBackground#fffae3
  • editor.selectionHighlightBackground#ADD6FF80
  • editorIndentGuide.activeBackground#939393
  • editorIndentGuide.background#D3D3D3
  • editorLineNumber.activeForeground#000
  • editorLineNumber.foreground#808080
  • editorSuggestWidget.background#F3F3F3
  • input.placeholderForeground#767676
  • list.activeSelectionBackground#3875d6
  • list.hoverBackground#E8E8E8
  • list.inactiveSelectionBackground#d4d4d4
  • settings.numberInputBorder#CECECE
  • settings.textInputBorder#CECECE
  • sideBar.background#ffffff
  • sideBar.border#cfcfcf
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#e2e6ec
  • sideBarTitle.foreground#000000
  • statusBar.background#f2f2f2
  • statusBar.border#919191
  • statusBar.debuggingBackground#f2f2f2
  • statusBar.debuggingBorder#919191
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#f2f2f2
  • statusBar.noFolderBorder#919191
  • statusBar.noFolderForeground#000000
  • tab.activeForeground#000
  • tab.inactiveBackground#f2f2f2
  • tab.inactiveForeground#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#000000ff
emphasisitalic
strongbold
meta.diff.header#000080
comment#808080
constant.language#800000bold
constant.numeric#0000ff
constant.regexp#811f3f
entity.name.tag#800000
entity.name.selector#800000
entity.other.attribute-name#ff0000
invalid#cd3131
markup.underlineunderline
markup.bold#000080bold
markup.heading#800000bold
markup.italicitalic
markup.inserted#09885a
markup.deleted#a31515
markup.changed#0451a5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451a5
markup.inline.raw#800000
punctuation.definition.tag#800000
meta.preprocessor#0000ff
meta.preprocessor.string#a31515
meta.preprocessor.numeric#09885a
meta.structure.dictionary.key.python#0451a5
storage#0000ff
storage.type#0000ff
storage.modifier#0000ff
string#008000
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#008000
string.regexp#811f3f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0000ff
meta.template.expression#000000
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#000080bold
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#ff0000
support.type.property-name.json#0451a5
keyword#000080bold
keyword.control#000080bold
keyword.operator#000000
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#000080bold
keyword.other.unit#09885a
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#800000bold
support.function.git-rebase#0451a5
constant.sha.git-rebase#09885a
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#000080bold
keyword.operator.new#000080bold
keyword.control#000080bold
entity.name.function#808000
storage.type#000080bold
variable.language#000080bold
storage.modifier#000080bold
entity.name.tag#000080bold
punctuation.definition.tag#000000
entity.other.attribute-name#0000ffbold
string.quoted.double.html#008000bold
entity.other.attribute-name.class.css#000080bold
support.type.property-name#0000ffbold
support.constant.property-value#008000
variable#660e7abold
entity.other.attribute-name, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#800000
variable.scss#000080bold

Shiki preview

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

Loading...

KotStream Theme by Ruslan Usmanov - VS Code Theme